Learn CSS Quickly & Easily with Thesis

by Ben Cook on June 23, 2009

Learn CSS with the Thesis WordPress theme

The Thesis theme has been hailed as the most flexible WordPress Theme ever. And, given the diversity of quality designs its users have cranked out, it’s tough to disagree.

The flexibility centers around the theme’s unique use of a custom CSS (cascading style sheet) file so you can drastically change the look of your site by editing just one or two lines of code in one single file.

If you’re an amateur (at best) web designer like myself, just reading the three letters of CSS probably sent shivers down your spine. But, while CSS can certainly be intimidating at first, Thesis actually makes it MUCH more approachable and easier to learn.

While I still wouldn’t consider myself an expert, in just a few hours I was able to learn enough to create the custom design you see on this site.

The Necessary Tools

For the purpose of this tutorial you’ll obviously need to have purchased a copy of the Thesis theme. Also, I urge you to install the Thesis OpenHook plugin, as well as the Firebug add-on for FireFox.

OpenHook makes it quick and easy to edit your custom CSS file from within the WordPress admin panel. Without it you’ll have to use an html editor and keep saving & uploading every time you tweak something and that gets old quick.

Note: Thesis OpenHook also allows you create and use custom functions within the hooks Thesis uses. But that’s a whole other post and both Chris & Rae have done a good job of explaining hooks already. Also, Thesis 1.6 has built in functionality that allows you to edit your custom files. If you’re comfortable with PHP and using hooks, you will no longer need OpenHook, however, it’s still a great tool for those new to Thesis.

Firebug allows you to inspect items on any given web page and selects the corresponding CSS rules that govern that particular object. This will keep you from having to guess what rules are being applied to an object not to mention having to sort through line after line of code trying to find the answer.

Those two plugins saved me countless hours of work and certain frustration. If you don’t install them that’s fine, just don’t get mad at me when you put your keyboard through your flat screen display.

Learning CSS

Once you’ve activated your custom CSS file (which amounts to renaming the “custom-sample” folder in the stock Thesis installation to simply “custom”) any change you make in your custom.css file will be applied to your site.

So, how do you make those changes?

After activating the Thesis OpenHook plugin, you’ll see a “Thesis Custom Styling” option in the Appearance section of your left sidebar. Clicking that link will take you to a page that should look a lot like the image below that allows you to edit your custom.css file.

thesis openhook custom styling screen

As you can see, within the developer’s comments you’re given these two quick examples of CSS stylings that you may want to employ:

.custom a, .custom a:visited { color: #090; } <--- This makes links green
.custom a:hover { color: #00f; } <--- This makes links blue when you mouse over them

CSS code is divided up into 3 basic parts, the selector (the item you want to style), the property, and the value. In the first line above you’re styling links (a) and visited links (a:visited) by editing their color property to a value of #090 (green).

Trial and Error

Once you’ve grasped the concept of how to construct CSS stylings, my best advice is to jump right in. You could spend hours digging through W3Schools’ article repository on CSS but at least for me, trial and error is a much more effective approach.

Note: Do keep the W3School articles handy for quick reference should you encounter an issue that you don’t know how to deal with.

DIYthemes offers a quick but worthwhile tutorial on editing your background color or adding a background image that was a fairly natural starting point for me.

Grab their code, drop it into your custom.css file and start tweaking the settings to your liking. For this site, I wound up wittling the code for my background down to the following:

body.custom {
background: #505050 url('images/bg-image.png') repeat-y scroll center center;
}

While my code looks a little different than the first example, the structure is essentially the same. My selector in this instance is the page body, and I’m styling the background property to have a value of #505050, use a background image, repeat that image along the y axis even while scrolling, and to center that background image on the page.

Learn from Others

The big breakthrough during my learning process came when I started looking at the sites in the Thesis showcase.

When I found something I liked, I inspected it with Firebug to figure out the syntax and applied it to my site.

Want to know how Chris Brogan got that cool image to appear when you hover over links in his footer? Take a look!

And, with most installations of the Thesis them if you need to take a look at the entire custom.css file you can do that too by adding /wp-content/themes/thesis/custom/custom.css after the domain name.

Note: While CSS can not be copyrighted, the look and feel of a design CAN fall under copyright laws. So don’t try to rip off someone’s entire theme. This should only be used to learn how to modify your own theme.

For example, want to know how I made my headlines orange and centered on the page? Using Firebug or peaking at the full style sheet you’d see this snippet of CSS:

.custom h1, .custom h2, .custom h2 a {
color: #d54e21;
text-align: center;
}

Do you want orange headlines centered on your page? Probably not.

But now you know how to should you choose to do so and that, my friends, is the whole point.

Original image by Simon Pow

{ 3 comments… read them below or add one }

faliq August 13, 2009 at 11:40 pm

Hi Ben,

How can edit my sidebar style to match like yours? Where the colour is changed and no extra gap to the outer frame. The same goes for Coppyblogger design.

Please advice.

Faliq

cheri March 29, 2010 at 10:46 pm

Ben,
I’ve been stumbling around trying to create a video opt in page on Thesis. I have to say – I was SO excited to understand your article! I feel like I’m speaking a foreign language and had almost given up hope that I could make this work for me.

Thanks for the clear instructions, the great resources and the hope!
I appreciate it!
Cheri

Rajiv October 10, 2010 at 9:59 pm

Very helpful coming as it does from the standpoint of someone starting out.

Previous post:

Next post: