Thesis Tips: Custom CSS Stylesheet

The Thesis Custom CSS Stylesheet is the tool you use to build on the colours and fonts you set up in the Design Options screen, to make your WordPress site uniquely yours.

Keep in mind the point I made in the article on design options: in order to keep your site coding as efficient as possible (which speeds up site load times) you should keep your custom stylesheet as small as possible.

That means making sure that you only use it for tweaks that you can’t accomplish through the Design Options screen.

Why use a custom stylesheet instead of the theme’s primary stylesheet to make changes?

Because if you use the primary stylesheet you’ll lose all your customisations whenever you upgrade to the newest version of Thesis.

Using the Custom Stylesheet enables you to preserve your customisations.

Activate the Custom Stylesheet

The first thing you need to do is visit the Design Options screen and make sure that the custom stylesheet is activated:

Check the ‘Use Custom Stylesheet’ check box and hit the Big Ass Save button.

Access the Custom Stylesheet

To access your custom stylesheet click the ‘Custom File Editor’ link in your Thesis sub-menu:

There are 3 files available for you to edit and the default is the custom.css file. Ignore the other two for now, as they’ll be covered in separate articles.

The beauty of making style changes through the custom.css file is that if you get it all wrong you can just delete everything you’ve done and start again.

Your site styling will simply revert to the default layout, or the layout, colours and fonts that you’ve set up in the Design Options screen.

In other words you can’t screw up your site (At least, not by doing something in the custom stylesheet!)

Using the Custom CSS Stylesheet

Because of the way Thesis has been built everything you define in your custom stylesheet must be assigned to the .custom class.

The one exception to this is the BODY tag.

Apart from that one, all style declarations in the custom stylesheet must start with the .custom class.

So, for example, if you want to define some styling for the header div, your style declaration would start like this:

.custom #header { first-property: value; }

If you’re defining some styling for the sidebar class your declaration would be:

.custom .sidebar { first-property: value; }

A link would be:

.custom a, a:active { first-property: value; }

And so on.

In the article on the Design Options screen I described how to define the font size, family and colour for your headlines (H1 tag) by clicking/selecting the attributes you want on that screen.

But you cannot make those tags bold in the Design Options screen. You have to do that from the custom stylesheet.

I also said in that article that you should only use the custom stylesheet for items you cannot define in the Design Options screen.

Therefore, if you want to make your headlines bold, in addition to your preferred font family, font size and font colour, you would simply select those font settings in the Design Options screen and add the bold declaration to your custom stylesheet:

.custom H1 { font-weight: bold; }

Finding the correct selector to edit

One of the most frustrating things about working on the styling of a site that someone else has built is finding the correct selector to edit.

Some of the selectors (e.g. the header div) are obvious. Many are not.

There are two ways you can save yourself hours of frustration here:

1. If you’re using Firefox, install the Firebug addon
2. Go to the Thesis main stylesheet and locate the appropriate selector there

The Firebug addon is by far the best way of identifying the selector you need.

Once you’ve installed it you can simply activate it, select the ‘inspect’ tool (second item from the left on the toolbar), hold your cursor over the bit of the page you want to change and Firebug will give you the exact selector name.

If you’re using a browser that doesn’t support Firebug then you can go to the main Thesis stylesheet and read through it until you find the selector you’re looking for.

Often there will only be a minor difference from what you would expect (for example sidebar vs. sidebars).

Before discovering Firebug, I used to copy the code I needed from the main stylesheet, paste it into the custom stylesheet, delete all the stuff I didn’t need and edit the selector I did need.

As I said, Firebug is an infinitely better solution, but the second option will work if you can’t use Firebug for any reason.

OK, that’s it for the custom stylesheet. If you need any clarifications leave a comment and I’ll clarify

Cheers,

Filed in: Thesis Theme

Was this article useful? Please recommend it: