style links in a custom block in bookdown

217 views Asked by At

I'm trying to style links in a custom block in bookdown. The custom block type is called "rmdcomment", and I've added the following to the style.css file:

.rmdcomment {
  padding: 1em 1em 1em 4em;
  margin-top: 30px;
  margin-bottom: 30px;
  background: #1f9ac9;
  position:relative;
  color: white;
}

.rmdcomment:before {
  content: "\f075";
  font-family: FontAwesome;
  left:10px;
  position:absolute;
  top:0px;
  font-size: 45px;
  color: white;
}

The above appears correctly.

I've also added the following in an (unsuccessful) attempt to style the links:

.rmdcomment a:link {text-decoration: underline; font-weight:bold; color:white;}
.rmdcomment a:visited {text-decoration: underline; font-weight:bold; color:white;}
.rmdcomment a:hover {text-decoration: underline; font-weight:bold; color:white;}
2

There are 2 answers

0
Deepak Bandi On BEST ANSWER

I believe this is the section you talking about.

enter image description here

Add !important, so basically you overwrite the previous styles.

.rmdcomment a:link {text-decoration: underline !important; font-weight:bold !important; color:white !important;}

0
Vcasso On

Using !important is not the best practice. You can always be more specific with your CSS. Try targeting like this and you should get the same result without using !Important:

.book .book-body .page-wrapper .page-inner section.normal .rmdcomment a:hover {
    text-decoration: underline;
    font-weight: bold;
    color: white;
}