Build Your Own Business Website header image

Lesson 2 – Part 2 – Introduction to Thesis Style Sheets

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Welcome back to Part 2 of Lesson 2 of the Customize Thesis Like a Pro tutorial series. In the second part of this lesson, we are going to examine the Thesis theme CSS files. Those are the external style sheets we talked about in the Part 1 of this lesson and there are three style sheets for the Thesis theme.

First you have style CSS, then layout.css and finally, custom.css. And inside the style sheet cascade, style.css is overwritten by layout.css which is overwritten by custom.css. So custom.css has the highest priority. So if something is defined here, it will override a definition that may exist here or here.

Let’s take a look at these CSS files in NetBeans. I’m going to open the file and go to my local copy of a website. I’ve created a website for this lesson, ctlp-lesson2 and we’re going to start with style.css. Now this is a special style sheet that WordPress expects to find in the root of any given theme. Since our current theme is Thesis_18, inside the root directory of that theme, it expects to see this file.

If we were to look at the old default theme, this is the Kubric default theme, you can see it has a style.css that exists in the root of this directory. And if we look at the old classic theme, it also has a style.css that exists in the root directory. So that is a WordPress default file that needs to exist and Thesis has it in its root directory as every other theme does.

Style Sheet – style.css

When we open up style.css, it’s important to know that this css sheet is hard coded. That is, it comes exactly as you see right now with every  installation. And it defines the things that Thesis does not expect to change. That is, none of these things that you see defined here can be changed by Thesis Design Options. Not only are these things not intended to change, you should never change this sheet yourself. Theoretically, on ordinary themes, this is where you would put your regular styles. In those themes if you wanted to change something about the footer, you would come in to style.css and make that change. However, in the Thesis theme, that’s not the way it works. And so this is a style sheet that you should never edit. There’s no reason even for you to open it.

Style Sheet – layout.css

The second one is called layout.css. It is inside the custom folder and it is the file that is created on the fly every time that you press the save button from your dashboard. For example, let’s look at this site here, ctlp-lesson2.byobtutorial.com, which is the Lesson 2 website that I’ve created for demonstrating. If we go to our dashboard, and then we go down to Thesis Design Options, every time we press the big ass save button, this layout.css is rewritten from scratch. It contains everything that can be changed by using Thesis Design Options.

Layout.css is placed inside your custom directory because it is something that you don’t want overwritten when you upgrade Thesis. Say, you go from 1.7 to 1.8, you wouldn’t want your layout.css to be overwritten when you made that upgrade. And so the way Thesis customization upgrade works is that everything you don’t want upgraded goes inside of that custom folder. Thus, layout goes inside of that custom folder.

Like style.css, layout.css is a file that you should never change. If you were to change this file and then you saved something on Design Options, your change in layout.css is entirely erased and rewritten to reflect what’s in Design Options. So layout.css should never be changed.

Style Sheet – custom.css

And then we finally have custom.css. This is the highest priority style sheet in Thesis and you can see here custom.css comes installed only with comments. Besides the comments, it’s entirely blank and the reason is because it’s left for us to add our own edits. And it’s inside of custom.css that we will do all of our editing. We won’t edit any other css file.

And so to recap, custom.css is designed to have the highest priority. What is defined in style.css can be modified by custom.css. What is defined in layout.css can be modified by custom.css. And custom.css is the file in which we are going to make all of our css customizations.

That wraps up Part 2 of Lesson 2 of the Customize Thesis Like a Pro tutorial series.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment