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