Bold font for pinned posts on main page?

I’ve played around with a custom footer, with bold font so links stand out, and change colour when hovering. How could I do something similar with the pinned post titles at the top of my main page?

Those links come with a class="pinned". So you should be able to target them using that class ie.

.pinned {
    font-weight: bold;
    }
2 Likes

Thanks for this!

I’ve got the pinned titles changed to bold, but the colour changing on hover isnt working. This is the code that I’ve tried using…

.pinned {
  font-family: Roboto, sans-serif !important;
  font-weight: bold;
}
.pinned a:link, .pinned a:visited {
   color: #999;
}
.pinned a:hover, .pinned a:active {
   color: #000;
}

This is pretty much the same as the code used for the Custom-nav at the bottom of my page, which is working as intended.

https://digitalgyoza.writeas.com/

What am I missing?

notice the difference and replace with this:

.pinned {
  font-family: Roboto, sans-serif !important;
  font-weight: bold;
}
.pinned:link, .pinned:visited {
   color: #999;
}
.pinned:hover, .pinned:active {
   color: #000;
}
2 Likes

Perfect! Thankyou.

Is there a class for the “read more” elements, that I could apply behavior to?

a.read-more

1 Like

Most browsers let you see the structure of the page via F12 key. Or if you ‘right’ click on an element, text… and look for Inspect Element it will open a window with the properties of the element to view, you can also use this to give additional properties or change the content of them.

1 Like

Cheers appreciate the help.

Can’t seem to apply similar code to this one, however.

body#collection a.read-more, body#subpage a.read-more

2 Likes

Aha! I was missing the full element.

Cheers for the CSS crash course once again :smile:

Also, I think just adding: !Important to the property will work.

Not really a crash course, more a case of playing with the editor in the browser and seeing what will work or not…! My CSS skills are very beginner in nature really.

There are some elements that are affected up the chain, although I’m not sure how to really easily ascertain that. Anything you write in the CSS Customisation field has to cancel out what comes before in order to have effect.

You’re welcome anyway. :smile: