Build Your Own Business Website header image

A Beginner’s Guide to the Thesis 2.0 Skin Editor – Part 9 – How Boxes and Packages are Linked

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.

Video Transcript

The reason why people talk about this in terms of code is because those of us who use code all the time automatically resort to code-like language, when we talk about the link between an HTML box and a CSS package. But it’s absolutely critical that the link part of this get made and get understood. How is it that this package is going to style a box that I’ve created? Okay, that’s what we’re going to talk about next, how boxes and packages are linked.

There is one link and it’s the selector. The selector is the link. And that selector is made up of either the id or the class that’s in the box. So boxes have an id or a class, packages have the selector. Those two things… the selector is the id or the class of the box.

So if we come back over and just take a look at our boxes for a second, let’s look at our fishsticks. Fishsticks is given an id of container. So the package that styles fishsticks has to have the selector id = container and that selector looks like… if we come over here to our container, here it is. This doesn’t know we named it fishsticks, right? So it’s still calling it container. If we come over here, here is our selector #container. Notice that this is different, right? This has a little pound sign in front of it, in front of container whereas the HTML just said container in the id box. This has #container. That’s because your selector is made up of the designator and the name.

So bear with me for just a second. The selector is comprised or composed of the id or the class designator and the name. So if it’s an id, it starts with a pound sign. If it’s a class, it starts with a period. Those are the designators and those are the only 2 designators. Pound sign stands for id, period stands for class and those are the designators. So over here, since our HTML of fishsticks had an id of container, the package that styles fishsticks needs to have #container in the selector.

Okay now if we come over for a second and look at columns, the selector here starts with a period, period columns, .columns. That means that the thing it styles has a class of columns, not an id of columns. So if we come over and look at columns here and you see it doesn’t have anything in the id but it does have columns in the class. Whether it’s an id or a class, it has to… the selector has to properly display the designator. And so since container, the columns container has a class of columns, the package that styles that box has to have .columns rather than #columns.

Okay so that’s the link. The link is that selector. Now for beginners, generally, this selector is simple. That is it’s either #container or .columns. It’s generally one word with its designator. Generally, you’re going to see these selectors as being simple. However, the selectors can be compound. They can be fairly long. They can include several ids and classes in a selector.

Now beginners should entirely avoid this. Beginners, you can file this away as it’s possible for selectors to be compound. But really, for what you’re doing, the chances are you don’t need it to be compound. You don’t need to think of it as compound and you don’t need to learn the rules for compound selectors. All you need to know is that this has the same designator and the same name as the box you intend to style with it. That’s what you need to know. And the difference between class and id is not really important to you. There is an important difference. Well, we’ll talk about the one difference that is important to you here in a minute.

But what I’ve struggled with is trying to find a non-code way of explaining this concept. That is the reason why a package styles a box is because they are linked together by this selector. And the selector is comprised of either the id or class designator and the name of the id or class. And that’s the link.

When do you choose an id or a class? You choose ids for boxes that exist only once on a template. And usually, you’re doing this for structural things, for big structural things. So header, footer, content, stuff like that. That’s usually when you use an id. It is only supposed to exist once on a page. So if there’s ever a possibility that it’s going to exist more than once on a page, you want to use a class instead. And that’s really the only distinction that a beginner cares about.

Now you can use, in some cases, you can use both an id and a class. But you should just avoid that. You can do it and there are good reasons for doing it especially if you know css and know HTML. You’ll know of reasons for using them. But if you don’t know HTML and don’t know CSS really, you don’t need to use both of them, generally speaking, for what you want to do. You can use one or the other. And the rule that you should use is id is only for boxes that only exist once on a template and classes for everything else.

So there’s a set of rules to live by as you work your way through this kind of stuff. Use an id only once per template. So if you’re giving something id of footer, make sure it only happens once per template. That’s not only one id but that is id footer should only exist once per template. You don’t want to use id column because you might have a whole bunch of different columns on a template. So a specific id should only exist once per template.

You should use all lowercase letters. You should never use spaces in a name. Spaces in a name are actually significant and as a beginner, you don’t understand that significance and you don’t want to have to manage it. So as far as you’re concerned, you’re never going to use spaces in a name. In fact, you’re only going to use lowercase A through Z, 0 through 9, underscore or dash. And those are the only characters you’re ever going to use in a class or an id name. You’re never going to use any other characters but that.

You’ll also always start with a  letter. It will not work if you start it with a number. You must always start id or class names with a letter. Now once you’ve got a letter in there, you can have as many numbers as you want. But it’s got to start with a letter. You cannot start with an underscroe, cannot start with a dash. Must start with a letter.

Personally, I think you ought to make them descriptive. That is when you are looking at them, you should know what they are attempting to style or what they are… what the box is. So you should make them descriptive and you should avoid WordPress generated class names.

Now in one of the very first sessions of demonstrating Thesis 2, I used a reserved WordPress class name not thinking and it caused me 15 minutes of troubleshooting. I couldn’t figure out what on earth the problem was. And subsequent to that for this class, I have created a list for you to download, it’s on Seminars and A Beginner’s Guide to Thesis 2 Skin Editor. Download the WordPress Generated Class Names Cheat Sheet.  Here are my little rules. Use a pound sign for elements that’ll only occur once on a page. Use a class for elements that occur more than once on a page. Only use lowercase letters, numbers, underscores and a dash. Never begin with a number. Make the names reasonably descriptive of WordPress generated class names and there’s the list of WordPress generated class names. I used page. Oh my gosh, page is missing. Okay, we’ll there’s one that’s missing and it is page. I’m going to fix that.

But nevertheless, I used page as a class name and that’s what threw me. This is an almost exhaustive list of class names that WordPress automatically uses for stuff and that you should not use in a box. Now you may very well choose to create a package that styles page item or attack package that styles logged in or h entry or gallery caption. You can certainly use these in packages because WordPress automatically assigns these classes to things. But you won’t want to use these in class names for boxes because WordPress is already using them for stuff. And that’s not because the whole more than one id thing. It’s because it’s meaningful. Menu item is meaningful and as soon as you go create a box and call it menu item and try to put a bunch of stuff in it, you’re not going to be able to figure out what on earth is the problem. Well because menu item actually refers to each individual menu item in a menu. Each one of these things has a class assigned to it of menu item so it’s a meaningful class. So you don’t want to use those.

So run over there, download this. While you’re at it, you can download the slides and everything else.

So those are the rules to live by. Now there’s one other thing to understand about this and that is the one to many relationships that can exist. You can have more than one box with the same id, right? You could have another box over here that says, let’s see… where’s one with an id? Container had an id. You can have another box named fishsticks with the id of container. And it can be used for something else on a different template when you’re not using this container with the same id. So there can be more than one box with the same id but those… the other box has to be sitting over here you know, in a template and you may be swapping boxes back and forth. But you can have more than one box in the same id.

You can have more than one box with the same class. An in fact, that is very likely because you may have one style that applies to a specific class and then you’re just going to use that class over and over and over again in containers. So you can have more than one box with the same class.

You can also have more than one package with the same selector. And in fact, it’s likely for example, let’s use site title. Site title has a single element style defined for it. And single element styles don’t have a way of setting colors for links. But your site title is a link. So you could create a links package for your site title as well and in that case, you would use the same selector. So you can have more than box or more than one package with the same selector.

However, you cannot have more than one package with the same reference. The reference name has to be unique. So each reference has to be different. However, each selector does not need to be different. Each name does not need to be different. It’s just each reference needs to be different.

So that’s the one to one relationship, one to many relationship that exists. That can be many boxes as long as only one of them is on a template. There can be many boxes with the same class. It doesn’t matter how many of those boxes are on the same template. And there can be many packages with the same selector. It wouldn’t make any sense for you to have more than one of the same kind of package with the same selector because then they’re just competing with each other. But you can have different packages, different types of packages with the same selector because you’re trying to style different things. And your reference inside of a package can only exist once. Each reference has to be unique.

2 Comments… add one
2 comments… add one
  • Maxine Stephenson February 8, 2013, 4:23 am

    Never was good with relationships, 🙁 and this part is going to take me a few minutes to sort out in my head LOL