The other day I was looking for a wordpress plugin that would show related posts, and I came across Contextual Related Posts. It worked well, however the plugin to me lacked attractiveness. So I did a search to find how I could customize it and came across some CSS code that gave it a facelift or “beautify” it. The code I am about to share with you was written by Kevin DeldyckeI (check his site out).
Here is a screenshot of how it will look

Before

contextual related posts screenshot

source: http://kevin.deldycke.com (check his site out)

After

contextual related posts screenshot 2

After 2

contextual related posts screenshot 3

source: http://inwhatepisode.com (cool site)

CODE DIRECTLY BELOW:

#crp_related ul {
list-style: none;
float: left;
margin: 0;
}
#crp_related li, #crp_related a {
float: left;
overflow: hidden;
position: relative;
text-align: center;
}
#crp_related li {
margin: .9em;
border: 1px solid #ddd;
padding: 6px;
}
#crp_related li:hover {
background: #eee;
border-color: #bbb;
}
#crp_related a {
width: 150px;
height: 150px;
}
#crp_related a:hover {
text-decoration: none;
}
#crp_related img {
max-width: 150px;
margin: auto;
}
#crp_related .crp_title {
position: absolute;
height: inherit;
bottom: 6px;
left: 6px;
padding: 3px;
width: 144px; /* = 150px - (3px * 2) */
color: #fff;
font-size: .9em;
text-shadow: #000 .1em .1em .2em;
background: rgb(0.5, 0.5, 0.5);
background: rgba(0, 0, 0, 0.5);
}
#crp_related li:hover .crp_title {
background: rgb(0.2, 0.2, 0.2);
background: rgba(0, 0, 0, 0.8);
}

I’ll be keen to notify you that this plugin might not give the same results as the one in the preview due to your :
1. Theme
2. Version of WordPress (mine is version 3.7.0)
3. Version of actual plugin (I tested 1.8.10.1)
Here is how you go about customizing the plugin:
After you have it installed you will go to Settings option on your dashboard and select > Related Posts and then select the Custom Styles tab. You will then copy the code above and paste it in the text section as shown in the picture below and select save.

There you have it. You guys can make your own customizations as you desire. Please leave a comment and tell me if it helped.

The following two tabs change content below.
My name is Robert Brown also known as “bobbysony” or just “bobby”. There are many words I could use to define myself but I prefer the short description of an average guy with an above average out-look on life. Read More at: http://bobbysony.com/about/
Categories: website development