This document is deprecated! The information on this page refers to a Thesis version that is now obsolete. Please visit the Thesis Docs for current documentation.
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 which can be used for your specific customizations: custom.css and custom_functions.php. Let’s focus on custom.css for the time being.
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.
Note: As of Thesis 1.6, a Custom File Editor is available from within the WordPress admin panel, which allows you to make changes to your custom.css (and custom_functions.php) without the need for an external text editor or FTP program.
Open. Edit. Save. Upload.
This process is easy enough.
-
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.cssfile. Oh, and never, ever save files for the Web as “Rich Text.” -
Make whatever changes you want to make, and then save the file.
-
Finally, use an FTP program to upload the file to your Website, ensuring that it is saved into the
/wp-content/themes/thesis/customfolder. -
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.sidebaror#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-familyof a certain title or change thebackground-colorof 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 be1.2em. Possible values vary greatly depending upon which property is being styled.
To learn more about the syntax of CSS, visit W3Schools.
Example Usage and Why It Works
If you have enabled the custom stylesheet in the Thesis options panel, the <body> tag will be appended with the custom class, like so: <body class="custom">. You can use the custom class to override any CSS declarations contained in the style.css file.
For example, if you wish to change the default link color to green, you would add the
following declarations to this file:
.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 */
By using the custom class, you are creating more specific CSS declarations for HTML elements. CSS styling is applied through rules of specificity, and because declarations prepended with .custom are more specific, they get applied when the page is rendered!