Find out in only 2 min
Take the free quiz to reveal the perfect Showit website template for your business!
Which Showit Website Is Right For You?
Thousands of blogs use the YARPP (Yet Another Related Posts Plugin) plugin, which allows you to display related posts at the bottom of a post. Did you know you can easily style the colors and fonts to match your site? Below are some simple CSS styles you can add to your WordPress site to change the look of your LinkWithin related posts.
In your WordPress admin go to Appearance > Editor. By default you should land on your theme’s style.css file. I typically scroll to the bottom and begin entering my code.
Note: Always make a backup copy of your styles.css code – I usually save mine to a .txt file just in case!
Change the Border Style Between Posts
.yarpp-thumbnail {
border: 1px dashed #999 !important;
}
Remove the Border Between Posts
.yarpp-thumbnail {
border: none !important;
}
Change the Post Title Style
.yarpp-thumbnail-title {
font-family:'Arvo', Arial !important;
color:#999 !important;
font-size: 14px !important;
text-transform:uppercase !important;
}
Change the Background Color
.yarpp-related {
background: #999 !important;
}
Change the Header Font
.yarpp-related h3 {
font-family: 'League Script' !important;
}
Note: You can change the default “You may also like…” text by going to Settings > Related Posts (YARPP).
Remember that in the styles above I’m using colors and fonts as examples – you should use the colors and fonts that coordinate with your website. For color options check out ColorPicker.com. For font options check out Google Fonts (you’ll need to install one line of code in your header to make the font work on your site).
What do you think of this article? Do you have any questions for me? Ask me in the comments box below!
$157 - PAYMENTS AS LOW AS $36.75/MO
Showit Website Template for Health Coach
$157 - PAYMENTS AS LOW AS $36.75/MO
Showit Website Template for Coaches
$157 - PAYMENTS AS LOW AS $36.75/MO
Showit Website Template for Virtual Assistant
$157 - Payments as low as $36.75/MO
Showit Website Template for Coaches
Boost Your Business with Fun Quizzes!
Free Quizzes
Next Story
Previous Story
TAKE THE QUIZ
Discover your brand's unique personality + reveal a special offer!
What is Your Brand Personality?
Great post! I’m having a little difficulty customizing mine….I’m not seeing the style.css for my widget….is it under a different name? Also, did you change coding, or did you just add these in?
Thanks for any help you can provide, Casey! Can’t wait to read some of your other blog tip posts!
Hi Paulina!
I see you’re using the Delightful Child theme by Restored 316. Did you go to the Editor page under Appearance on the left right? It’s a style.css file that’s for your entire site. Here’s a screenshot: http://awesomescreenshot.com/06d1y0l08a
Thanks,
Casey
Thanks for the awesome post. I’m just wondering if you’re able to help me find the css code for changing the font of titles of the YARRP widget.
Thanks in advance.
Sure, the code for the post title is:
.yarpp-thumbnail-title
You’ll need to add this to your theme’s CSS file. Be sure to mark each style as !important so that it overrides the YARPP style sheet. For example:
.yarpp-thumbnail-title {
font-family:’Arvo’, Arial !important;
}
Hi,
Nice post! Do you know how I can centre the related posts? I managed to centre the title, but not the thumbnails. This is my site: https://reisdroom.nl/backpacken-door-vietnam