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.
A pop-up will appear for the Header CSS. Click on the Options link.
Inside the Options section of the Header CSS you will see a black arrow next to the Background label. Click on the black arrow.
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.
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.
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.
You will get a pop-up asking you to confirm your action. Click “OK”.
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.
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.