Customizing Thesis with custom.css

After installing and activating Thesis on your blog, chances are very good that you will want to customize something about your site’s display — a color, a border… maybe bold text isn’t bold enough.

Whatever the case may be, you want to tweak Thesis until it is just right. Good for you, and here’s how.

When you first installed Thesis, you extracted a folder named /thesis from the download package. Within that folder is another one, named /custom. This folder, appropriately, is the nexus of Thesis customization.

There are two files within the /thesis/custom folder: custom.css and custom_functions.php. Let’s focus on custom.css for the time being.

Unfortunately, there is currently no way to edit these custom files from within your WordPress admin panel, as there is for many other Thesis files via the Design panel. While advanced users may find it easiest to edit custom.css with a server-side file editor, such as those available in a command-line interface, the rest of us will be editing the custom files on our computers.

Open. Edit. Save. Upload.

This process is easy enough.

1. Open Notepad (Start -> Run… -> “notepad” -> OK) or a comparable text editor and use it to open custom.css.

   Do not use word processors such as Microsoft Word which may add specialized tags or other code which could wreck your custom.css file. Oh, and never, ever save files for the Web as “Rich Text.”

2. Make whatever changes you want to make, and then save the file.
3. Finally, use an FTP program to upload the file to your Website, ensuring that it is saved into the /wp-content/themes/thesis/custom folder.
4. View your blog (after clearing your browser’s cache, if necessary) to check your customizations.

What Is CSS?

CSS stands for “cascading style sheets.” It is a fairly simple language which is used to define how elements of a Web page are displayed. These styles are generally defined in separate files — in Thesis’ case, these files are style.css and /custom/custom.css — but they may also be defined within HTML code itself.

There are several advantages to using externally defined styles over styles within your pages:

• External files are able to be cached. A browser will only need to download your style file one time, but it can be used across thousands of pages of your site. This results in slightly faster page-load times for your users, and it saves you bandwidth usage!
• External files are flexible. If you are defining how a header on your site looks every time you display a header, what happens if you ever want to change that look site-wide? You guessed it: you’ll have to change the style every time you used it. What a pain! Using externally defined styles, as Thesis does, all you have to do is change the file in one place and the style gets applied across your entire site, saving you tons of time!

Basic CSS code is formatted like this: selector { property: value; }

selector

The selector defines what you specifically want to style. It could be an HTML element such as H1 or ADDRESS, a class or an ID such as .sidebar or #logo, or it could be a combination of various things.

property

The property defines which part of the selector you wish to change. For instance, you may want to change the font-family of a certain title or change the background-color of another. Just about anything about an element on your page can be changed with styles!

value

The value defines what you wish to set the property (above) to. For instance, if your property is font-size, your value may be 1.2em. Possible values vary greatly depending upon which property is being styled.

To learn more about the syntax of CSS, visit W3Schools.

What should you customize first? Check out our tutorial on adding custom backgrounds – both solid colors and images – to Thesis; adding a background is a quick and easy way to set your Thesis installation apart from others!

More from the Support Forums

The extend to which Thesis can be styled using custom.css is limited to your imagination. The DIY Themes Forums contains numerous examples of Thesis customizations that our users have tried out, and you’re invited to check out the Thesis Showcase to see what others have done.