Next we are going to talk about creating and using variables in Thesis 2.3. Let’s go over to the Skin Editor.
Where to Change the Content of the Variables
The first to say about this is you don’t want to change these variables. Because if you make a change in this variable it’s just going to get thrown away the next time you save Skin CSS. So, this is not the place to change the content of these variables.
If you want to change the content of these variables then you would do it in Skin Design, Design Options because all of these variables are adjustable there.
How to Create Your Own Variable
However, you can create your own variable by simply clicking “Create Variable” and giving it a name. I’m going to say, “dark background color”.
Actually you don’t have to put the dollar sign in, it puts it in itself. I think I can use color 5. Then I’m going to put this value in and save it. I’ve got colors 1, 2 and 3 so actually I’m going to change this to color 4. Hit save.
If I save my CSS here this variable added and if I reload this now I have color 4 available to me. And because I gave it name I can tell what it’s for, it’s my dark background color. And if I want to use that in the background, let’s just say background color and then come over and push the button for color 4. Do that and I’ve used it.
Variables Perfect for Color Schemes
You may find that three colors are not enough for a color scheme and that you want 5 or 6 or 7 colors. Or you want some colors that are a variation like a darker variation and a lighter variation say for buttons or for hover or whatever.
I strongly suggest you use this method to create that color scheme so that, again, you have variables that you can change once that will change all the way across the site.
Use Single Value or Blocks of CSS
It doesn’t just have to be a single value though really any amount of CSS can go into a variable. You can put an entire block of CSS into a variable and it will work just fine. So if you’ve got some standard CSS block that you always want to add you could put it in a variable like this.
Example: Basic Button Styling
I don’t really like the way the buttons look on the site so I want to put my own basic button styling in. So I’m going to create a variable and I’m going to call it “default button style” and I’ll use the reference button. So this is the code, display inline block.
The text color is white and it’s got a little bit of text shadow, no text decoration. It’s going to have a slightly darker border and it’s going to be 3 pixels across the bottom. This is going to be the standard background color. It’ll have this kind of padding and a border radius. We’ll set the cursor to pointer and webkit appearance none.
Then I’m just going to copy this and I think we can dispense with webkit appearance none these days. Just copy that and come on over into my button variable. I’ve got all of those things there and I can hit save. And now I will have a button style that I can use.
Change Styling in Custom CSS
So if I come back over to the Custom CSS, I want to change this button. If we inspect the element on this button you can see it’s getting most of its style from the input type, input equals submit. So I’m just going to copy that selector and come back over here to my Custom CSS. I’ll just put it right there.
I guess I copied all of it and that’s fine, this will be my default. Actually I didn’t need to that. All I have to do is come over here and get my…let’s copy this, reload this because I don’t have the variable in there yet.
Come over grab my button variable. Save my Custom CSS. Come back over to the site and flush the cache. There I have my button. That’s my base button.
I’m actually going to change the font size on that too. Come over here to this and do that. And we’ll add a font size. We’ll bump it up just a little bit to 16px.
And then we need a hover condition. So I’m going to come over here and so it’s going to be button colon hover. We’ll just use that colon hover in each case. Actually I should probably stick to my other convention which is putting each selector on a single line. That way you can really read it well.
All you really need to do here is change the background color. So, I will say background color colon and let’s grab a different color here. I think it’s this one, a darker one. All of these other styles are going to continue to apply except now the hover condition is going to substitute out the color.
Review the Button and Make Changes
Let’s flush the cache again. So there we go, we’ve got the little hover condition. Let’s just check and see if that’s really 16 pixels. So obviously I’m going to need to pick a different selector if I want to increase that size because right now that font size is actually calculated and it’s ignoring this because it’s more specific.
So if I really want to change the font size, I would have to use that sidebar class and then input submit just like they did before. And put the font size in. There you go. I’ve set the font size on a more specific selector. Let’s flush the cache and now I’ve got a larger font.
Example: Repeat Use of a Variable
So the next thing I want to do is use that same style but I want to change it up a little bit. Because I want to show you how you can repeat the use of variable. That’s the whole point of it is to have a repeatable variable here.
The first thing we are going to do is create a link that we want to use as a button. So if we come over here to Edit Page and let’s just add a little thing here. We’ll say “visit my YouTube page” and now I need to get that URL. Put that in.
We put that link into this, then switch back over to the text view and say class equals button primary. So I’ve given this a class now. And hit update.
Now I can come back over to here and in Custom CSS I can say dot button underscore primary. And then again, use my button. Then change the background color. I want the YouTube red. Grab that. Background color and then if I wanted to get a lighter version of that colon hover. Let’s get a lighter version of that same red color.
I’ll go to one of my favorite design resources which is the color scheme generator. Just put that red color in and I’ll grab the darker version of it which is this color here.
Come back over and we’ll add that. Note that I’ve got something wrong. Let’s take a look. I’ve misspelled background. So that’s the beauty of the syntax highlighting, you can tell you are making a mistake even if you don’t have someone looking over your shoulder to tell you what mistake you made.
Now we’ve used this variable twice. This is not the perfect example of using something twice because I could have just changed that up but here you see it, “visit my YouTube page”. And you’ve got a button.