I use WordPress for my blog and I currently use the Thesis theme as well (Thesis Demo Site — See the Thesis Theme in action!). Thesis has a number of features that make it easy to work with for me. One of those features is the ability to write your own custom CSS (Cascading Style Sheets) that you place in a separate file from the main style.css file.
Instead of messing around with the theme author’s style file, the author has provided a custom style file (custom.css) with hooks so you can tweak the various visual aspects of your blog – the positioning of content as well as the look or – style.
This is great because as the theme’s author releases new versions, you don’t have to worry about making any changes over and over to the main style file for every version.
CSS
Now, if you don’t know what CSS is it stands for Cascading Style Sheets. CSS can be used when you create a website. The w3school CSS tutorial is a great resource and a great place to start.
The idea is when you create a web page, you can place different types of content on it like text and graphics without worrying about design. Then when you have all the content in place, you can apply CSS to the page to make it look the way you want it to. That’s a simplified definition and there’s plenty more to it than that, but for the sake of this article that definition will do just fine.
A WordPress Plugin
Have you ever used a WordPress plugin and it didn’t look quite right on the page? You want to change the look of it but you don’t know how?
Well, for this example I’m going to use the Contextual Related Posts plugin. When I first downloaded this plugin and installed it, it displayed pretty well on my post pages but I wanted to tweak it just a bit so it was positioned better.
With the Thesis custom style file it was pretty easy to do and you can certainly do this type of tweak with any plugin whether you’re using the Thesis theme or not.
Luckily by default, the Contextual Related Posts plugin came with a default CSS selector id that was labeled crp_related. So the plugin was wrapped up in a div that looked like this: <div id=”crp_related”></div>.
How did I know that? Well after using the plugin and viewing the source of a page, you can see what CSS and markup has been applied to a plugin.
Armed with this information, we can style the plugin the way we want to. So we fire up our custom.css file that we use with Thesis to style things and we add the following empty selector id to custom.css:
.custom #crp_related {
}
What this will do is allow us to style the plugin the way we want because we’ve now added a CSS selector id to our custom.css file that is the same name of the div that came with the plugin. Let’s fill in the rest to get the look that is in the image below.
.custom #crp_related {
background: #f0f0f0;
border-top: 0.5em solid #999999;
margin-bottom: 2em;
padding: 1em 1em 0.4em 1em;
}
Now, I won’t explain every property and value of the selector in the CSS but this places the plugin in a box that is a lighter shade of gray with a dark border at the top of that box. See below red arrow.
Click image for larger view
I did do a bit of an alteration to the plugin code. You can edit any plugin in WordPress by clicking on the edit button in the plugins list. I added a <p> (paragraph) selector around the text “Related Posts” so I could separate the title a bit higher up from the list of related posts. The following was placed below the crp_related CSS in the custom.css file.
.custom #crp_related p {
margin-bottom: 0.5em;
}
This places a bit of space below the text “Related Posts” which helps with making the list a bit more distinct.
Photo Credit: lockstockb



{ 15 comments… read them below or add one }
Great tips. I just upgraded to Thesis on my personal blog and made the switch to the Contextual plugin as well so this tutorial came in very handy.
Quick question though, why add in the p selector into the plugin code? There’s already an H3 wrapped around it so I just applied the css to the H3 selector.
Adam Pieniazek’s last blog post..Thesis Theme Comes to Prose of a Pol
@Adam Pieniazek – Thanks for stoppin’ by. I’ll have to dig into again, I don’t see the h3 other than the options page h3. Maybe they’ve updated the plugin, I’ll have to look a bit closer.
FYI, I’m using the latest version (1.3.1) and found the H3 tag on line 113. Seems the CSS works fine though I might be missing something.
Adam Pieniazek’s last blog post..Five Life Lessons From “He Hate Me”
The css code does not work for me .. not sure why .. ?
.custom #crp_related { background: #f0f0f0; border-top: 0.5em solid #999999; margin-bottom: 2em; padding: 1em 1em 0.4em 1em; }
.custom #crp_related p {margin-bottom: 0.5em;}
Its showing the related posts fine .. but the beautification part is not showing up .
MAnish
Just checking some basic stuff – Have you made other changes to your custom.css file?
Yes , i have . But they were already there for long time and today I added the code.
I took all the code out as to make the comment more readable. I'll take a look and compare to mine.
Sure
Thanks for doing this , I will be waiting
Manish
I don't know if I mentioned it in the blog post but did you uncheck “Add related posts to…” in the options screen?
I can see that Its checked and thats the reason its showing up the Related Posts links . If I uncheck it and save options . After that its not showing up . Why should I uncheck that part ? I am not sure If i understood what you mean .
Manish
Thanks for a great tut, Bill. I have a question though: The theme i'm using doesn't have a custom.css. Can i still change the style in an easy way?
Yes. If it's a free theme look for the .css file that styles the look of your theme. That's one place to start.
thx mate
Build a website is really not that tough, and top of all, you can build a website or more for free.
Build a website is a extremely individual skill and is different with each client.
It is more about revealing your business to new probable clients and generating new sales.
I think from thesis 2.0 This has been enabled by default! Am i right?