Build Your Own Business Website header image

The Beginner’s Guide to the Thesis 2.1 Skin Editor – Part 10 – CSS Selection – The Link Between Boxes and Styles

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

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

Now that you understand what the core Thesis 2.1 boxes do, the next step is to talk about how boxes and styles are linked.

Selectors

So let’s look at this link here, it’s red, right? Our text here is blue with red when you hover over it and that happens because CSS and this box are linked somehow. And they are linked by what everybody calls a selector. So if you’re looking at the HTML of the page, the selectors can be just a class or can be just an HTML tag, and they can be a compound of an HTML tag and of a class and then you add on the next iteration of that which is the ID.

So if we take a look at our tagline, you can see that our site tagline is given an ID of site tagline, right? “A site for demonstrating and testing functionality surrounding “categories”, that’s the content of it but it’s given the ID of site tagline and so it is styled using this selector.

And you can see what that code looks like in the skin editor by coming over to CSS and looking for where site title is styled. Now, the easiest way to find that is just to search. You can see here it is, #site_title and then it’s got some little variable.

So for example the variable for title up here is right there and that variable says font family is Arial black and the font size is 52 pixels. That information is inserted with this and then the line height is 1.32, the font weight is bold and then the color equals the title color, which again is this one here that #2129FF right? That’s what it looks like.

Now let’s say, we want to change that and we want to change it in a way that is not available to us using those design options. We can just copy this and then come over to our custom CSS, paste it and then let’s say what we want to do is to make it italic. So, this is where you would use the CSS for that and let’s say font-style:italic; okay?

Link Between Item being Styled and the Box is the Selector

Now you save that custom CSS and we can come over and look now and it has gone to italics. So the link between the style and the box or the thing being styled is this selector. Now this selector is a simple selector, right? It has this pound sign that represents the ID and then as the name of the ID which is site title.

Oh pardon me, I was working on a site title, it should have said site tagline, but here’s site_title right? When you see ID=site_title, if you’re going to try to affect that, you code reads #site_title. Because this means ID and then this is the name of that ID. You could also make this compound by saying h1#site_title and then say color:brown and save this. And now everywhere where there’s an h1#site_title the color is going to change.

But it’s not showing me as brown. h1 ID=site_title it says the color should be brown but it’s showing up as blue…I don’t know why that’s happening. Because it isn’t being overridden and the blue version of it is being overridden so, where’s the mystery going on here? It was telling us very clearly that the color should be brown. Well, let’s change it to green just to make sure. No, it’s just not behaving.

Somebody said to try it with an a tag and that’s probably right, h1#site_title a{ that a tag represents the link. Yeah, you’re right. Oddly enough,even though #site_title is where the color was set, I’m overriding the color by using h1#site_title a{ but anyway, you wouldn’t really do this because the color can be set inside of Design Options.

Sometimes in Thesis 2.1 you’re going to create your own boxes and you need to create your own styles. Let’s save this custom CSS, refresh that and go back over to the skin editor and back to the front page. Let’s create a Feature Box. So we’re going to create an HTML container. We’re going to call it Feature Box and we know we want to style it, we’re going to give it a background color and stuff like that.

ID and Class

So now we have to either give it an ID or a class. As a general rule, you’ll use IDs very sparingly. More often than not, you’ll use class. There’s never a need for you to use an ID and a class that are the same. See, beginners do that all the time. So they might put feature box and feature box here and that’s not necessary and there’s no reason to do it. Not only it is not necessary but it’s not a good idea.

ID is Used Only Once per Template or Page

IDs can only exist once in a template or once in a page. If the same ID shows up more than once in a page, it’s no longer valid HTML and sometimes you’re going to have confusing, conflicting rules for it so you’d use IDs very sparingly. You’d only use them for things that are going to show up once on a page.

Personally, I only use IDs for structural elements so I wouldn’t use an ID for a site title or a tag line but I might use an ID for feature box.

Naming Conventions

When you are creating a name here, and I’m just talking about generally speaking, IDs and classes should only be lowercase letters, numbers and underscores. No special characters, no HTML characters, they should only be lowercase letters like dashes, underscores and numerals. They should not start with a number, they should always start with a letter.

And in a class, if there’s a class and a space and another class, Thesis interprets that as having two classes for that div. Now that happens all the time, however, you can’t have two IDs for a div. So if you have a space in there and then another word, that’s going to fail. So, when you’re choosing an ID, again, it ought to mean something so that when you read it you know exactly what it means.

Creating Your Own Code – A Feature Box Example

So we’re going to carry a div ID and feature box and we’re going to drag the div ID and Feature Box over to the Columns section. And I’m going to drag this, Related Post Query Box up into inside of it and save the template. I’m going to come back over here to the main page and now our query box is up here.

I’m going to add some styling to this now and the styling I’m going to add is to the Feature Box. So what you can do then is come back over to custom CSS and now #feature_box. I’m not really teaching CSS in this class just showing you the relationship of CSS to the boxes so that when you go learn CSS, you know what’s happening.

Adding Styles (Color, Padding and Border, Margin)

The first thing we’re going to say is background-color: and I am going to grab one of the variables. The variable I’m going to grab is $color2 and I can do that just by clicking it. So background color, and then I’m going to say padding:30px; then I’m going to say border:1px solID and I’m going to choose $color1 as my color for that. And yeah, that’s good enough.

So now anywhere I’ve got this Feature Box, it’s going to take this ID. Now you can see we’ve wrapped it in a color, we’ve given it a little border. Let’s give it some top margin and while I’m at it, let’s give it a border radius of 10px. So there we go.

We added a Feature Box, we added some content in that Feature Box, we put it above everything else, we styled it in custom CSS and this style was tied to the box that we created in a template by a selector, the #feature_box corresponding to HTML ID, feature_box.

Avoid WordPress Generated Class Names for Class and ID

So, there’s one other thing that you should know about classes and IDs and that is you want to avoid WordPress generated class names. And on my site, byobwebsite, under resources then Thesis 2, I have a downloadable pdf so “Download the WordPress generated class names Cheat Sheet”, this thing shows you all of the class names that WordPress automatically generates and sticks in places that you don’t actually want to use yourself.

So when you’re creating your own class names, make sure you take a look at this, you can see I’ve got a little set of rules here for you too. Use the (#) sign for elements that will occur only once in a page, use class (.) for elements that may occur more than once on a page, only use lowercase letters, numbers, underscores and a dash, never begin a name with a number, make the names reasonably descriptive and then avoid these, okay?

So that is under resources, and then down here under downloadable resources that I have, under Thesis 2.

0 Comments… add one
0 comments… add one

Leave a Comment