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.

YouTube Preview Image

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.

css

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.

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

Written by Adam Baird

Adam is a Wordpress designer, Thesis specialist, and blogger from Indianapolis, Indiana. He writes web design tutorials and resources on Theme Big. Check out his custom work here.

Comments

  • pop art says:

    Very useful information, continue on creativity. Since I masig lay about CSS, please explain a little about CSS?

  • Suhasini says:

    Good information covered on css. I feel now I will not be having problems in editing css.

  • […] Introduction to Custom CSS in Thesis – This is another Tutorial you can find here on Art of Blog. It takes you through the basics of CSS, using custom CSS in Thesis, and offers a couple of very simple example tutorials. […]

  • WW says:

    How to match adsense to the default Thesis links, what is the color that Thesis uses for default?

    #2361a1 ?

  • Russ Page says:

    I am a beginner and have been doing a crash course in web design since I have been out of work for over two years. I have been studying XHTML, HTML, CSS and Java Script so that I would have more of an idea on how the websites are controlled.

    Using Thesis — how do I influence HTML; only by custom.css? What about using external style sheets? I may be under misunderstanding, but there is so much I see in using XHTML and HTML along with CSS in placing everything on the page; I don’t see that even with all the Thesis design controls. I thought understanding code would give me a better control and appreciation of designing a website; however, it has only confused me in regards to the shortcut ability of using Thesis — it seems that rather than extending my options; Thesis seems to be limiting. Please excuse me for my ignorance, but I don’t see how to coordinate all these options and getting what I desire in page layout by using Thesis. The only other editing I see for which I have very little experience is PhP. The more the options–the more the confusion. I’d appreciate any clarification you may give. Thank you.

    • Nick Reese says:

      Russ, I totally understand your frustration. I was in your shoes when I first opened Thesis too.

      Definitely check out this post on Thesis Custom Hooks
      http://www.artofblog.com/thesis-introduction-to-hooks/

      With a TINY bit of PHP you can insert whatever xhtml you want anywhere you can think of using thesis. The above tutorial does a great job explaining it.

      Basically you will use the PHP to just wrap your html. I would say with your bit of experience you will be up and rolling in NO TIME!

      • Adam Baird says:

        Nick is spot on here. Thesis works just like any other theme with regard to css. It has two style sheets that dictate style. They are style.css and layout.css. custom.css is designed to overwrite those styles. That way, you can change whatever you want via custom.css and leave the rest to the default style sheets. Hope that makes sense.

        Also, def check out the hooks article.

        • Russell Page says:

          Appreciate the comments. When one buys an expensive book, it approaches the topics clearly for the approach they are using. You throw a different approach as in the case of Thesis — it becomes a different animal, i.e. the element of setting up external style sheets as explained in the book has to be rethought into another vehicle; then you find that PHP enters, and there’s more pieces to add to the puzzle. Even simple terms like “hooks” become: “what is that and how does that apply to what I spent hours upon hours of studying?” This reminds me of being thrown into the beginnings of desktop publishing back in the late 80’s when Mac and the software was beginning. The employer knew it was the up and coming method of operation, but with very little training and hardly any guidance it was: “here are the tools (which you have never seen before); now just do the work . . . perfectly.” Amazingly somehow we did. Now the printing industry has again changed and jobs were eliminated. Now it is time to take the experience and remake oneself so economically one can survive, and I find myself back at the beginning saying: “I understand the principles and how the codes work, but the pieces are not so easy to combine; however, do the work . . . perfectly. Lol, I’ve been here many years ago — and we’ve progressed how?

      • Russell Page says:

        Thank you sir for your advise, which is most appreciated . . . seems there could be a book or outline that would give an overview of all the coding and what specific coding does; furthermore, a source that would provide a guidance or tutorial on where to start and the path or choice of study that would be a logical course to put all these puzzles together. It’s amazing how just phrasing a search can take you down a path of complete help, confusion or nothing at all. There are many out there who know how to do — but their ability to communicate is so poor as to leave too big of gaps in their presuming someone even understands their terminology or explanation thereof . . . amazing! In short, some help is no help at all. I do appreciate your time and patience. Combine that with clarity without talking down and you become a genuine teacher. :-)

  • […] Introduction to Custom CSS in Thesis […]

  • […] To get started, the body tag contains all of the html that displays as your website’s content. Assuming you’ve opted to use the “Custom Stylesheet” in the Thesis site options panel, Thesis automatically adds a “custom” class to your body tag site-wide. This is why you add .custom to the beginning of each line of css code you use in custom.css. […]

  • Chris says:

    Can you tell me if it is possible to remove a sidebar on a specific post if I create a css command for that particular post ?

    and if so how and what would be the css command that I would be looking for

    Thanks for your help

  • Chris says:

    Is there a way to remove the sidebars on a specific post with a css command ?

    Appreciate you help

  • Adam Baird says:

    Not sure that using CSS to hide sidebars on certain posts is optimal, but here ya go:

    .custom .sidebar { display: hidden; }

  • Chris says:

    Adam

    Firstly thanks mate appreciate it. This is one a a very small number of thesis sites that I have book marked — I come back to this site again and again, thank you for all your hard work.

    Secondly I am using a skin from thesis themes and therefore have no idea on how to adjust the function php and do it that way i.e. by creating a custom page template — because the skin uses a custom page template for a “portfolio style” page.

    That being said would you recommend another way — and why would removing the sidebars via css NOT be optimal ?

    Appreciate your help

  • Aaron says:

    I was wondering where you find out what attributes can be changed. For example where do I findthe name sidebar 1 to be able to change the CSS. Where in Thesis do I find the name of this? Another example would be if I want to make one of those big footers with lots of stuff in there where would i find the info to be able to change that. Basically howdo I know the names of what I can change. Thanx, Aaron

  • Dave Owen says:

    Adam,

    Great resource for Thesis.

    I would like to place a background behind my content.

    I can find lots of info on the body background but not content (posts and pages) background.

    Thanks is advance and keep up the good work!
    Dave

  • […] If you’d like, you can find out more about the way that Thesis handles hooks and custom css. […]

  • Elena says:

    This tutorial ia all I need for my projects. Thanks

  • Kulwant Nagi says:

    Its so easy ! from my point of view if someone is dedicated to learn css then it can easily be learnt in 3-4 days.