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

≡ Menu

Step 24: Adding Color Using Thesis CSS Variables

Thesis 2 Header Color

We just created several Thesis 2 CSS variables to hold our hex color values.  Now I’ll show you how you can use these CSS variables to add color to your website.  By using these color variables, we can easily adjust our color scheme in the future just by changing the value of the variable.  So one modification will change every reference to that color without requiring you to dig through all of your CSS looking for the hex color value.  This will become clearer as work this step.  Our site header currently looks like the image above.  Let’s use our primary site color to color the background of the header.

From your WordPress Dashboard navigate to the Thesis 2 Skin Editor CSS screen.  Near the top right of the screen you will see a “Packages” area.  Look for the package labeled “Header”.  Click on “Header” button.

Thesis 2 CSS Packages

A pop-up will appear for the Header CSS.  Click on the Options link.

Thesis 2 Header Package

Inside the Options section of the Header CSS you will see a black arrow next to the Background label.  Click on the black arrow.

Thesis 2 CSS Header Options

Refer back to the CSS variable you created for your primary color.  Note the lower-case name prefixed with a “$” (dollar sign).  Thesis will add the “$” (dollar sign) to the front of your name.

Thesis 2 CSS Variable

You will see a text entry box under the “Background Color” label.  Enter the CSS variable name you provided to your primary site color.  After you enter the variable name, click the green “Save” button.

Thesis 2 Header CSS Background Color

Now we need to save our changes in the Thesis 2 CSS page.  At the top right of the Thesis 2 CSS page click the green “Save CSS” button.

Thesis 2 Save CSS Button

You will get a pop-up asking you to confirm your action.  Click “OK”.

Thesis 2 CSS Confirm Save Popup

Go to your website home page and click the refresh.  You should now see that we have added our primary color to the header.  In my case I chose a blue scheme so I now see the header colored blue.

Thesis 2 Header Color Using CSS Variable

You should now understand the power of Thesis 2 CSS variables.  We are able to create one variable that we can use throughout the site such that we make one change to the CSS variable and the change will carry to every place we reference the variable.

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

{ 13 comments… add one }
  • Frosty February 28, 2013, 6:08 AM

    I have to say that I was skeptical of migrating from Thesis 1 to 2 (especially after reading all the grumblings on the forum), but I have to say, due to your tuts, that this theme is more streamlined in getting what you want!

  • Doug Macklem February 28, 2013, 7:18 AM

    Frosty: I was the same way until one day it just clicked. I now prefer Thesis 2 and wouldn’t go back. Saves me all the PHP and gives me much the same control. Maybe more control with the ease of using custom templates. I’m glad you are enjoying this guide.

  • Orlee Berlove July 31, 2013, 5:44 PM

    I am trying to go through the steps of your tutorial on the most version of Thesis. In the most recent version, there is no “Header” package. What can I use instead?

    Alternatively, did I make a mistake?

  • Doug Macklem July 31, 2013, 9:31 PM

    Orlee,

    They change the naming of the packages so that “Header” is now called “&header” but I still have this package and the background color setting is still set the same way. Unfortunately (for me), Thesis 2.1 has made some big and small changes and this is one of them.

  • erik September 30, 2013, 2:14 PM

    I am using the most current version of Thesis 2 (Version 2.1.2). Under the “Skin Editor CSS screen” the packages tab is at the bottom now but there are no packages showing under that section. There is a drop down option to add a package but “header” isn’t one of them. I also tried flipping through the rest of the pages in the thesis editor but found nothing. Any advice??

    Thanks

  • Doug Macklem September 30, 2013, 9:07 PM

    This is because Thesis is depricating this function. In fact, they are stating that by version 2.2 these will stop working. Thesis 2.1 changed alot from 2.0 so many of my steps may have some difference between what I’ve done and version 2.1.

    See http://diythemes.com/thesis/rtfm/tutorials/migrate-css-packages/ for reference.

  • Connie October 11, 2013, 12:35 PM

    Wow, Doug:
    Thanks for all the help. I struggled with WP and the Classic Responsive Skin enough. Even though DIY has a super help forum, they have never been able to resolve any of my forum problems:(
    On this topic, can you guide me on how to change the color on my submenus? When the drop down opens, they are the same color as the nav bar and sometime hard to see.

  • Doug Macklem October 11, 2013, 7:40 PM

    Connie: Try adding Custom CSS .sub-menu a {background-color: color;}

  • Connie October 14, 2013, 12:58 PM

    Thanks again, Doug, for trying to help. I’m finding the Classic Responsive skin to be very stubborn for enhancing a lot of the features. Mainly, the problem is finding where to place the code. I couldn’t even get the background to take even though I created a wallpaper in gimp. Sad.
    For this code, I placed it in the SES package on the CSS custom tab under the Skin Editor with no luck. I then went into the Thesis CSS custom and tried there. No luck. It’s not terrible staying the same color, you just can’t tell a sub-menu drop down is there, since it blends.
    Have a great day
    Connie

  • Joanne Povey June 20, 2014, 4:58 AM

    Hi Doug

    Thanks so much for adding this tutorial its been a great help to me, keep them coming!

    Thanks
    Joanne Povey

  • Doug Macklem June 21, 2014, 8:30 AM

    Thanks!

  • Don Donadio July 22, 2014, 10:01 PM

    I just got to the point where I added all my color variables like you did and then started the tutorial on how to uses them. However, in that tutorial you told us to go to the skin editor and utilize the package area. When I go there I am told that in the new version of Thesis2, packages have been deprecated. How do I proceed now in utilizing those color variables I just created. Thanks in advance.

  • Doug Macklem July 22, 2014, 10:17 PM

    I have not looked into this since Thesis changes. This site was really a “give back” to the Thesis community. I just don’t have the time to go back and make the required updates with all the Thesis changes.

Leave a Comment