Build Your Own Business Website header image

Thesis 2.1 for Web Design Professionals – Part 4 – Creating and Using Variables in Thesis 2.1

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

Watch the opening clip of this video to preview it,
the full video is available to free and paid members.

Now that you understand the basics of how to use the Thesis 2.1 Code Editor the next thing I want to show you are the variables and how they work. So we come over here to the Skin Editor and go over to css. You have these variables.

Using Existing Variables in Your Code

Now, we’re going to look at different ways to use variables but one of the things that I think is really important is to use existing variables in your code. For example, in that footer, we used that color 1 so it would take that color with the color changed. We also did the same thing with this media query. We used the total page width as our trigger for our media query and then again, chose colors that were part of the variables. This means that when somebody changes that variable value, it also changes here in your code. That’s the real power of the variables.

So that’s one way to use existing variables here. And although I have not done it yet, another cheat sheet that will be coming soon is one that shows you which variables are mapped to which css elements and what they do. That’s coming in the near future.

Variable Examples

So anyway, if we go back over here to our css editor then you can see, Chris makes very extensive use of variables in his code. There are tons and tons of variables in this code. We could create a variable that say we’ll call padding. I’m going to call it 0 padding margin.

So we’ll say 0 pm as our reference and then I’m just going to type in padding: 0px margin and save that variable. So now I’ve got my 0 pm and let’s see, we’ll save that css and then come back over to our custom css.

And I could then say for example, for my header, I’ve got this header border I want to remove. I could also do this padding margin. If I put that there, save custom css, notice that it is showing it as black because at the moment, it does not realize that it has the semi-colon inside of it. If I put the semi-colon here… oh, it’s still showing it as black. Well, let’s see what happens. I’m not quite sure why that’s showing as black there.

Let’s just save our custom css, come back over and refresh it. We’ll just look at the element, look at our header… we’ve got header padding 0 margin 0. And if we look at that in its context…this is something I already put in there. But if we look at our custom css, it says header border none, padding 0 margin 0, right? So it wrote that css correctly. Note the absence of the tab there. That’s kind of interesting.

But in any case, it took that variable and placed it in there and the 0 clearly worked. I guess that’s probably black because it’s replacing the entire combination of property and value. In fact, it’s multiple properties and value. So it’s suggesting that this is an error and from its standpoint, this is an error. But in any case, this works just fine.

Nest Variables in Variables

You can also use variables in this value. So for example, if we come back over to our editor css and open up that variable, we can also say background color colon and then we could pick a color like, say, dollar sign… what was that? That was color 1. We could use the variable in here. I wonder what would happen if we tabbed right now? Probably nothing, yeah. Save that, save the css, come back over and refresh it.

And now we’ve got that background color in here and you can see it place the background color, right? It took the value of that variable and inserted it. So you can nest variables inside of variables. That was my point.

You could theoretically take an entire block of text and paste it as a variable. So for example, if we go back to our custom css we could take this. Save it, come back over to our editor css, and create a variable. We’ll call it background or body background and then paste that entire thing.

We’re talking about the entire including the comment. Hit save and then save our css, come back over to our custom css and then place our body background in there. Save the custom css, refresh it. And then if we come up and look at our body, we’ve got that back in here. Right there is our comment and there is the code.

So you can see this does work fairly well for just about anything and you’ll probably find lots of ways to use it. Okay, those are variables.

Will Variables Slow Down the Site?

Somebody asks, “Won’t the variables slow down the site?” No, because the variables are processed when you save the custom css. They are not processed every time a page loads. They are only processed when the css page is generated. And the css page is generated just when you hit save here. So no, it’s not going to slow the site down. It’s an operation that only happens when you hit save.

0 Comments… add one
0 comments… add one