# Bold font for pinned posts on main page? **URL:** \ **Category:** Customization\ **Tags:** troubleshooting\ **Created:** [March 28, 2019, 4:33pm UTC](https://discuss.write.as/t/bold-font-for-pinned-posts-on-main-page/495 "2019-03-28T16:33:47Z")\ **Posts on this page:** 11\ **Page:** 1
**Author:** ![digitalgyoza](https://discuss.write.as/letter_avatar_proxy/v4/letter/d/ecc23a/32.png) [@digitalgyoza](https://discuss.write.as/u/digitalgyoza)\ **Post date:** [March 28, 2019, 4:33pm UTC](https://discuss.write.as/t/bold-font-for-pinned-posts-on-main-page/495/1 "2019-03-28T16:33:47Z")
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? ---
**Author:** ![lhl](https://discuss.write.as/user_avatar/discuss.write.as/lhl/32/103_2.png) [@lhl](https://discuss.write.as/u/lhl)\ **Post date:** [March 28, 2019, 11:40pm UTC](https://discuss.write.as/t/bold-font-for-pinned-posts-on-main-page/495/2 "2019-03-28T23:40:39Z")
Those links come with a `class="pinned"`. So you should be able to target them using that class ie. ``` .pinned { font-weight: bold; } ``` ---
**Author:** ![digitalgyoza](https://discuss.write.as/letter_avatar_proxy/v4/letter/d/ecc23a/32.png) [@digitalgyoza](https://discuss.write.as/u/digitalgyoza)\ **Post date:** [March 29, 2019, 9:49am UTC](https://discuss.write.as/t/bold-font-for-pinned-posts-on-main-page/495/3 "2019-03-29T09:49:50Z")
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/](https://digitalgyoza.writeas.com/) What am I missing? ---
**Author:** ![lhl](https://discuss.write.as/user_avatar/discuss.write.as/lhl/32/103_2.png) [@lhl](https://discuss.write.as/u/lhl)\ **Post date:** [March 29, 2019, 10:00am UTC](https://discuss.write.as/t/bold-font-for-pinned-posts-on-main-page/495/4 "2019-03-29T10:00:02Z")
notice the difference and replace with this: ```auto .pinned { font-family: Roboto, sans-serif !important; font-weight: bold; } .pinned:link, .pinned:visited { color: #999; } .pinned:hover, .pinned:active { color: #000; } ``` ---
**Author:** ![digitalgyoza](https://discuss.write.as/letter_avatar_proxy/v4/letter/d/ecc23a/32.png) [@digitalgyoza](https://discuss.write.as/u/digitalgyoza)\ **Post date:** [March 29, 2019, 10:11am UTC](https://discuss.write.as/t/bold-font-for-pinned-posts-on-main-page/495/5 "2019-03-29T10:11:11Z")
Perfect! Thankyou. Is there a class for the “read more” elements, that I could apply behavior to? ---
**Author:** ![lhl](https://discuss.write.as/user_avatar/discuss.write.as/lhl/32/103_2.png) [@lhl](https://discuss.write.as/u/lhl)\ **Post date:** [March 29, 2019, 10:12am UTC](https://discuss.write.as/t/bold-font-for-pinned-posts-on-main-page/495/6 "2019-03-29T10:12:06Z")
`a.read-more` ---
**Author:** ![lhl](https://discuss.write.as/user_avatar/discuss.write.as/lhl/32/103_2.png) [@lhl](https://discuss.write.as/u/lhl)\ **Post date:** [March 29, 2019, 10:16am UTC](https://discuss.write.as/t/bold-font-for-pinned-posts-on-main-page/495/7 "2019-03-29T10:16:56Z")
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. ---
**Author:** ![digitalgyoza](https://discuss.write.as/letter_avatar_proxy/v4/letter/d/ecc23a/32.png) [@digitalgyoza](https://discuss.write.as/u/digitalgyoza)\ **Post date:** [March 29, 2019, 10:21am UTC](https://discuss.write.as/t/bold-font-for-pinned-posts-on-main-page/495/8 "2019-03-29T10:21:27Z")
Cheers appreciate the help. Can’t seem to apply similar code to this one, however. ---
**Author:** ![lhl](https://discuss.write.as/user_avatar/discuss.write.as/lhl/32/103_2.png) [@lhl](https://discuss.write.as/u/lhl)\ **Post date:** [March 29, 2019, 10:26am UTC](https://discuss.write.as/t/bold-font-for-pinned-posts-on-main-page/495/9 "2019-03-29T10:26:21Z")
`body#collection a.read-more, body#subpage a.read-more` ---
**Author:** ![digitalgyoza](https://discuss.write.as/letter_avatar_proxy/v4/letter/d/ecc23a/32.png) [@digitalgyoza](https://discuss.write.as/u/digitalgyoza)\ **Post date:** [March 29, 2019, 10:32am UTC](https://discuss.write.as/t/bold-font-for-pinned-posts-on-main-page/495/10 "2019-03-29T10:32:30Z")
Aha! I was missing the full element. Cheers for the CSS crash course once again 😄 ---
**Author:** ![lhl](https://discuss.write.as/user_avatar/discuss.write.as/lhl/32/103_2.png) [@lhl](https://discuss.write.as/u/lhl)\ **Post date:** [March 29, 2019, 10:39am UTC](https://discuss.write.as/t/bold-font-for-pinned-posts-on-main-page/495/11 "2019-03-29T10:39:12Z")
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. 😄