Build Your Own Business Website header image

A Beginner’s Guide to the Thesis 2.0 Skin Editor – Part 8 – CSS, The Style Editor

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

Let’s talk about the style editor. So here we are in the style editor and the style editor styles primarily by means of packages. So what’s a package? A package is essentially a little dialog that allows you to set settings for a specific box.

And there are several different types of packages and each package does different things. So the one that you’ll probably use the most often is a single element style package. The single element style has the most flexibility. It can do lots of different things but it’s only going to do it for a single element. A links package will make changes to the link state, to the link hover state, and to the link active state. So maybe this is a little bit sort of outside the bounds of this conversation but you know that when you are looking at a link here you know, if you hover over it, something happens often. So when it’s not hovered over, this is called the links tate. When you hover over it, that’s called the hovered state. When you press on it, that’s called the active state. And then there’s another state called visited which if you’ve gone to the link and seen that page and the browser knows that then it’ll show you a visited state. Well, that links package lets you configure all of those things for a single link or for links on a page.

Horizontal drop down menu allows you to style menus. Post formatting lets you style posts. And so it’ll style headlines and post content and lists and things like that. Columns lets you create column configurations. Comments let you style comments. Form input lets you style all kinds of forms and one of these days, I’m going to do a thing on how to style Contact Form 7 using this form input. And then widgets lets you style sidebars or widget areas.

So depending upon what you’re trying to style, you’ll choose a different kind of package. And these are the core packages but you know, as time progresses, I’m certainly going to be creating for members, lots of different kinds of packages because as much as I love this you know, I don’t think that the horizontal drop down menu gives you enough choices. And there are other things that I want to be able to offer members that they can easily style that don’t necessarily happen here. So there’ll be other packages that come along but in terms of the core packages, these are your core packages.

So the way you add a package is you pick the kind of package you want to add and  then you give it a name. And again, that name ought to be meaningful. I’m going to pick a widget here. I’m going to add a widgets package and the name I’m going to call this is footer widgets. Okay, just like box names, package names are only there for you to know what they’re about. So this could also be fish sticks and this fish sticks wouldn’t have to have anything to do with the fish sticks on the boxes. There’s no relationship between box name and package names. So you can name this anything you want although I strongly recommend you name it something that’s meaningful. You give it a reference. For the moment, I’m going to give it a reference. Later, I’ll describe what that is but footer widgets and then you’ll give it a css selector. And I’m going to give it the css selector of footer widget.

Once you’ve done that, you can go over to your options and look at the various options you have. So the widgets has options like font settings. Okay, let’s say I’m going to pick Arial and I want the font size here to be 14 pixels and I won’t set anything else here. But let’s say that I want you know, 20 pixels of top margin between my widgets and I’m not going to do anything about padding. But in my widget titles, let’s say I want Arial black widget titles and we’ll go up to 18 pixels for the font size there. And then let’s say perhaps you know, I want to style my widget list and that list I’m… I think I want to give… I don’t want actually… I don’t want any styles applied to it so I’m just going to say list style none. And it’s not going to have any bullets so it doesn’t matter. I will indent that list a little bit you know, and hit save. Okay now I’ve created this package called footer widgets and it’s there.

Now if I want this footer widgets thing to be meaningful, if I want it to result in css then I have to put its reference in the compile list. And the reference is shown here in red. It’s the &footer_widgets. So what I’d have to do here is &footer_widgets and now, the styles that I set up here will result in css that’s written to the file.

However, what we haven’t done is we haven’t linked this style to a box and that’s really the critical thing to understand here.

2 Comments… add one
2 comments… add one
  • Vanessa Carvalho May 27, 2015, 2:30 pm

    Your explanations were very helpful to me a while ago but now I’m a little lost again. The Thesis interface has changed and they are no longer using packages. So when I create a box, I do not know how to style it. You have already done some content about it?

    • Rick Anderson May 29, 2015, 4:37 pm

      Vanessa – the first thing to note is that you should be watching the newer version of the Beginner’s Guide. We have one specifically for Thesis 2.1. Secondly there is a bunch of material on how to style stuff here on the site. If you are looking for something in particular why not post it on the forum or join one of the live sessions. I’d be delighted to help you with it.

Leave a Comment