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.
From the WordPress Dashboard, navigate to the Thesis Home page. Inside the Skins Editor click on “CSS” at the top left of the screen.
You will now see the Thesis CSS editor page.
At the bottom right of the page you will see the “Variables” area.
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.
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.
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.