Complete Guide to Using Thesis 2 for WordPress. Click Here.

≡ Menu

Step 23: How to Use Thesis 2 CSS Variables

We’ve learned how to manipulate HTML templates in Thesis by moving the nav bar and removing the date and edit link from the author byline.  Here we will start to add color to our site using the Thesis CSS editor and the color chart we created.  Thesis 2 has made it very easy to manipulate CSS to control the look-and-feel of a website.  We will create some CSS variables for our color scheme.  By creating variables and referencing these variables whenever we need to use a color, will allow us to change color schemes in the future with 2 minutes of work instead of several hours.

WordPress Color Scheme

From the WordPress Dashboard, navigate to the Thesis Home page.  Inside the Skins Editor click on “CSS” at the top left of the screen.

Thesis 2 CSS

You will now see the Thesis CSS editor page.

Thesis 2 CSS Editor Page

At the bottom right of the page you will see the “Variables” area.

Thesis 2 CSS Variables

Click the blue “Create Variable” button and create a Thesis CSS variable as shown below.  I named this one Primary Color 1.  Give it a lower-case name and then enter the color value in the Variable Value box.  I’m using hex color values which are prefixed by the # character.

Thesis 2 Color Variable

Do this for all your colors.  I followed the naming pattern of “secclra1”, “secclra2”, “secclrb1”, and “secclrb2”.  I’m not sure if I’ll use all these colors but we’ll go ahead and create the variables for them.  Take a few minutes and do this for your site before proceeding.

Thesis 2 CSS Color Variables

Using these Thesis CSS variables for colors we’ll start dressing up our site to match the color palette we chose in the next step.

About the author: I’m a techie, a gadget geek, a former programmer, and all-around technology nut. Currently I’m a business analyst for a technology company. I love what technology can do for us. I love smartphones and apps for everything. Building sites with Thesis 2.0 and WordPress help me to reconnect with the feeling of building something tangible.

I’m on: Google+ and Twitter

{ 12 comments… add one }
  • Lucas February 21, 2013, 5:35 PM

    Hey Doug! I’m still enjoying these lessons – been at it non-stop. On this particular one, it looks like a bit of the text got cut off just as you were talking about the horizontal dropdown menu. I’d love to use that info if you can put it on the site! Thanks Doug – great stuff.

  • Doug Macklem February 21, 2013, 6:26 PM

    Can you clarify a little. I’m having trouble figuring out the missing part. I’ll be glad to update this step once I know the issue. Thanks!

  • Lucas February 21, 2013, 9:17 PM

    Sure Doug – it’s just above the last screen shot you put on the site. It reads, “You will notice in the images above that our colors are only on the navigation menu items and doesn’t carry all the way across the nav bar. Open the – ” and then it cuts off. Thanks for checking that out!

  • Doug Macklem February 21, 2013, 9:34 PM

    Doh! I see my mistake. I think the post was getting to long so I broke it up into another post or two. Step 26 is the step that you are looking for. I have removed the last picture and comment from this post. Thanks for pointing this out. Please send me other items you find for me to correct.

  • Lucas February 21, 2013, 9:49 PM

    Well, this is a pretty comprehensive tutorial, so it’s bound to happen! I’ll let you know if I come across anything else, man. Thanks!

  • tom barney March 11, 2013, 3:18 PM

    Doug,
    I’m not sure if I understand you with the variable and colors. Are we suppose to copy the color codes we chose from that site you sent us to earlier, back a few lessons ago and then paste those codes into the different variables we created in this lesson. I manipulated that color wheel to the hues that I wanted and it exported 5 degrees of that color. On each one of those degrees of color were different letters and or numbers( codes I suspect). Those are the codes I copied and pasted into the variables buttons I created. Did I do that right. It seems right after I did the color change in the header I got these strange warnings and the site changes to something dramatically differnt and strange looking right after I refresh the site. Here are some of the code:
    Warning: preg_replace() [function.preg-replace]: Unknown modifier ‘c’ in /home/thbarney/public_html/wp-content/themes/thesis/lib/core/skin/css/variables.php on line 133

    Warning: preg_replace() [function.preg-replace]: Unknown modifier ‘c’ in /home/thbarney/public_html/wp-content/themes/thesis/lib/core/skin/css/variables.php on line 133

    Warning: preg_replace() [function.preg-replace]: Unknown modifier ‘c’ in /home/thbarney/public_html/wp-content/themes/thesis/lib/core/skin/css/variables.php on line 133

    Warning: preg_replace() [function.preg-replace]: Unknown modifier ‘c’ in /home/thbarney/public_html/wp-content/themes/thesis/lib/core/skin/css/variables.php on line 133

  • tom barney March 11, 2013, 8:31 PM

    Doug,
    Also…. is there a time of day when I can possible message you and you can respond within a few minutes. I’m trying to get this blog up and running and I am so frustrated with this software….GGgggRRRrrrrrrrrrrrrrrrrrrr!!!!!!

  • Doug Macklem March 14, 2013, 3:44 PM

    Tom: Sorry for being slow. I’ve been away on business. Can you copy the code you pasted in a comment? It looks like the CSS compiler doesn’t like something you did. Can you post your site here so I can look at it?

  • Lalit May 24, 2013, 8:38 AM

    Please tell me when we are going to use these variables … what is the reasons to give so different name to these variables …

    If these names are standing for any full form than please explain it … so that in future lessons we will not get confuse.

  • Doug Macklem May 27, 2013, 8:45 AM

    Lalit: I use some of the variables in Step 24 and 54. Try the following Google search and you can see examples (or use the search at the top of the right column) “site:thriftyzizel.com step 23”. I am using the Google Custom Search so you should get the same result. See Step 45 for adding Google Search. It works better than the native WordPress Search.

  • akash February 16, 2014, 12:47 AM

    Awesome posts buddy keep it up
    2.1 is out

  • Doug Macklem February 22, 2014, 8:08 AM

    Yes, I’m running 2.1. I haven’t gotten around to updating my old posts. I did this site for fun and I don’t have much free time now to make updates.

Leave a Comment