Introduction to Custom CSS in Thesis

So, we’ve installed Thesis, and we’ve figured out how to add custom elements to our layout. Now, its time to kick the customization into high gear. Let’s take a look at some custom styling.

Obviously, Thesis ships with some pretty amazing customization tools. You can change colors, add and remove borders, change sidebar layouts, and more. Before you ever get your hands dirty with any CSS/HTML/PHP code, check this video for help with basic customizations using Thesis options.

Understanding CSS

To help give you a clear idea of what HTML and CSS are we’ve broken it down.

  • HTML is what web browsers (like Firefox or Internet Explorer) read to find out what is on each page. This is purely the text and images shown on a page.
  • CSS is the design aspect of a web page. Browsers use CSS to determine how the text/images in the HTML should be displayed.

In a nutshell HTML is “what you see”, and CSS is “how you see it.”

You can use the standard Thesis design options to create a professional looking blog in perhaps 15 minutes if you’ve got the design sense to do so. However, to make your design really stand out, you’ll need to go above and beyond the scope of the default Thesis controls and dive into some of this “scary code stuff.” Luckily, Thesis makes it easy (notice a developing trend?) to manage all of this stuff.

Thesis comes with a built in editor for your custom.css file and your custom_functions.php file. You can access this via the Thesis Options tab in your WordPress admin. Your custom.css file is where you will make all of your style edits to your Thesis design.

The Basics of CSS

If you’re new to this whole CSS thing, you need to understand a couple things. Elements of your website are given classes and/or id’s. You set styles for specific classes and id’s in your WordPress theme’s style.css file (every wordpress theme has one). We use “.” for classes and “#” for id’s. So if an object is classified as “red_button”, we would refer to it in style.css as “.red_button {}”. If an object was given the id “white_box”, we would refer to it as “#white_box {}”.

CSS is based on specificity. If an element is contained by another element, we can specify styles for the child element that will only affect it when it is contained by the parent element. For example, if our red button is contained by our white box, we could refer to it as “#white_box .red_button {}”. If we had another element with the same red_button class that was outside of the white box, it would not be affected by this since we specified that it would only refer to the red_button inside the white_box. Make sense?

cssdemo

Keep in mind that CSS will always display your most specific code. So, if you have code for “.red_button” and “#white_box .red_button”, the latter is the code that will control the display of the red button within the white box.

For more info on CSS basics, check the w3schools website.

Custom.CSS

So, how in the world does this whole custom.css file work? All of the default styles for Thesis are contained in style.css and layout.css. The < body > tag controls all of the HTML content of your blog from the top of the header down through the bottom of the footer. Thesis adds a “custom” class to the body tag making it body.custom. Therefore, if you add “.custom” before any CSS code in the custom.CSS file in the custom folder, it will be more specific than the CSS code in the default style sheets and will override anything written in style.css or layout.css that would refer to the same object.

For example, if we add the following code to custom.CSS:

.custom a { color: #cc0000; }

All of the links will turn red. We’re going to use this to demonstrate a couple of css customizations that can be accomplished with the Thesis theme. You’ll need some basic CSS knowledge, the rest should be straight forward. This really is an amazing way of doing this. Its not unique to Thesis, but it certainly is a great feature.

Note: Make sure you’ve enabled your custom.CSS stylesheet in the Thesis Design Options panel or none of this will work.

Clickable Custom Logo

In order to add a custom logo to the header, we’re going to cast the blog name and tagline out to the far left. Unless someone has an absolutely enormous resolution computer monitor, they will never know its there. Next, remember the FTP skills we learned in the first part of this guide? We need to upload our logo image (logo.jpg) to the images folder in our Thesis custom folder. Typically this is found at “home/wp-content/thesis(version#)/custom/images”.

We also need to set height and width properties for both the logo area and the hyperlink itself. This will ensure that that full logo is shown in the proper location. Here is the CSS code:

.custom #logo {background-image: url('images/logo.jpg') no-repeat; width: 300px; height: 150px; text-indent: -9999px; }
.custom #logo a {width: 300px; height: 150px; display: block; }

Height and width obviously just set the size of the logo. “Text-indent” is the property that casts the title and tagline out to the far left.

Adding a Background Image to the Body

This one is easy! First, we upload our background image to the images folder in our Thesis custom folder. Then, we need to specify that we are referring to the body, so we use “body.custom” and it really is just one line of CSS code to get this done:

body.custom { background: #fff url(images/body_bg.gif) repeat-x; }

That should get you off to a good start! I really hope this tutorial has helped to get you started. If you have any questions just fire away in the comments and I’ll be glad to answer. Also, if any of this seems intimidating, don’t worry! Thesis has one of the best support forums in the business. The community there is amazing and if you have problems, just ask questions and you’ll get great answers.

Adam has a decade of experience as a WordPress designer and developer. Learn more about him here.

«
»

Comments are closed.