Build Your Own Business Website header image

The Beginner’s Guide to the Thesis 2.1 Skin Editor – Part 6 – The Relationship of Skin Display, Skin Content, Skin Design and Boxes

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 we’ve covered the relationship of Thesis 2.1 boxes to actual pages, we need to understand the relationship of skin display, skin content and skin design to these boxes.

Why Doesn’t Everything Showing in the Boxes Show on the Page?

And you may have already seen something that you would have expected to see show up here on the page that is not showing. Remember, we looked at the headline area in the template for our front page and it has author avatar. But when you look at this there is no author avatar. So, you ask yourself well if it is showing up in the template why doesn’t it show up in the page?

Some Boxes are Placeholders for Content

And that is why we have to talk about the interrelationship of the other aspects of Thesis 2.1 with this. First, you need to keep in mind that some boxes are placeholders for content. So, for example that author avatar box, this actually is a placeholder. There’s, not an actual avatar in this box that just goes and says who the author is and what’s their avatar. It gets information to the database.

Some Placeholders are Set in Skin Display, Content and Design

Some placeholders can be set from inside of either Display Options or Skin Content. If we look at Post and Page Output as an example for the skin author, you can see we don’t have a check next to author avatar which means the author avatar is not displaying. If we place a check box beside it and save our display options it doesn’t change the template at all but it is going to display my avatar. There is my avatar sitting there now.

The ability to display the avatar was there all along because it was sitting here as a box but it had been turned off in display options and thus did not show.

Options are Different Depending upon the Skin

There are a bunch of things that are like that inside of display options and this is dependent on the skin that you are using. So this is Classic Responsive. If you’re using any version of Agility you’ll notice there are no display options. I don’t use the display options feature in Agility, I take a more traditional approach and say if you wanted it in your skin then you’re going to drag it there. And if you don’t want them in your skin then you’re going to drag it out.

But display options are designed to make this really easy for people who don’t want to have to open up the skin editor. But none of you are that sort of person because you are here learning about how to use the Skin Editor for Thesis 2.1. And since we’re talking about how to use a skin editor you’re going to be happy getting in there and dragging stuff hither and thither.

Well, a similar kind of thing happens with content. For example, if we look at content here we have got this menu here, home, carousel, oranges, categories and blog. Well if I come over here to my nav menu, and instead of the main menu I choose my category menu this box didn’t change.

It is still the same nav menu box but I’ve changed the settings in skin content and now it’s a different menu. It’s no longer the main menu, now it is a category menu. Without changing that box, I’ve changed its options. And changing those options makes the box behave differently, that is it displays a different menu.

There are three notable examples of that there’s the nav menu as an example, there’s a sidebar text box. Any text box that you have regardless of where it is its content is set from inside skin content. So I can say, ‘I love fish sticks’ in this text box and that text is going to end up in this little text box right here. So I refresh my page and now it says ‘I love fish sticks’.

That’s going to be the same in every template that has that text box in it. So this is a place in which the content is actually being set by the template. If I take that out then I go back to my default content.

Another example of that of course is the attribution. I can always come down here under attribution and say ‘BYOB website is great’ and the attribution will change to ‘BYOB website is great’.

Display Options and Content

Now, back to this idea of displaying. Sometimes the display option may be turned on but the content just doesn’t exist. It doesn’t have anything to display. Let’s take an example of tags. If you insert tags up here…we’ll save our template and refresh our template here; you’ll note that no tag is displayed down here because there are no tags for this page.

Tags aren’t designed to work with pages so even if I put the tags down here, some place on the page they still aren’t going to show because they don’t exist. That’s another thing about this post page outline. Even if we put tags on here and turn tags on because it has no tags nothing is going to show up here.

So that is the other aspect of the relationship between display, boxes and what actually gets shown. The box has to be in a template. If it has display options that display options has to be on and then there actually has to be something to display. That thing that you wanted displayed actually has to exist. It has to have content in it. And really, notable examples of that are tags or author descriptions and stuff like that.

Skin Design Changes Variables

Now, there’s one last thing to say about this and that is in Skin Design. Skin design changes variables. If it didn’t change variables, it wouldn’t change anything. That’s what it does. So let’s look at an example of that. I think this is color 1, color 2 and color 3. Let’s make color 3 bright blue for a second, when we refresh that change of color that’s what the site looks like.

If we come over to our CSS and we looked at color 1; color 1 is that blue color. Color 2 is another blue color and color 3 is that bright blue color. These values changed because I changed design options. If I come back and go back to the Thesis 2.1 default colors and refresh my views here, these variables have changed. Now it’s gray and white.

That’s the relationship of these variables to these design options. These design options control these variables and then these variables are inserted into the skin css to create the style, to create the appearance.

0 Comments… add one
0 comments… add one

Leave a Comment