Well, good morning everybody and welcome to this special seminar a “Beginner’s Guide to Thesis Skin Editor”. In order to effectively use the Thesis 2.1 Skin Editor, you have to learn 6 main concepts.
What is a Skin?
The first one is, what is a skin? I’ll begin with a summary answer, we’re going to talk about this at length here in a little while. But in summary, a skin is a collection of templates and a set of styles. And those templates and styles are skin dependent which means if you switch from one skin to another you’ll be switching to a different set of templates and a different set of styles. The templates and the styles are part of the skin and they are dependent upon the skin.
Relationship Between Templates and Web Pages
The second thing you need to learn is the relationship between templates and web pages.
Templates Display Content as a Web Page
A template displays your content as a web page and they do that by creating a structure for the content to be inserted in and then by including content placeholders for the content. So it creates a structure and it creates content placeholders.
Different Types of Pages use Different Templates
Now, different types of pages use different templates. So if you are using a static front page on your site, then that static front page will always use the front page template. Your blog post page is always going to use your home template. Typical pages are going to use a page template unless you assign a custom template to it and typical posts are always going to use a single template unless you assign a custom template to it.
So, different templates play different roles in your website by displaying different types of content.
Boxes are Used to Create Templates
The third thing you need to know is how boxes are used to create templates. Boxes are used to add HTML structure to the template, to add content to the template, and often to add both. When we get to looking at the templates you’ll see that in Thesis 2.1, that template is entirely comprised of boxes and those boxes provide structure, they add content and sometimes the same box does more than one thing.
Relationship between Skin Content, Skin Display and Skin Design
The fourth concept is the relationship between Skin Content, Skin Display, Skin Design and Boxes. This has become a little bit more complicated in Thesis 2.1 because Thesis 2.1 introduced this concept of Skin Content, Skin Display and Skin Design. So it is important to understand and we are going to look at this more thoroughly.
Skin Content is used to set the options for the content that is displayed by boxes. So, some boxes have options that are set up in skin content and you will have seen examples of this already undoubtedly such as the nav menu.
The way you pick your nav menu is there is a box in the template but you select a nav menu by going over to skin content and picking it. The same thing is true with text boxes. Text boxes exist in the template but you enter whatever text you want in that text box by doing so in the skin content.
So, the options for content boxes are displayed by boxes. They can also add content to the template and sometimes it is both. Sometimes it is both options and content that are being adjusted or manipulated inside the skin content options.
Skin display options is used to determine whether or not a specific box is displayed in the templates. We’ll look at examples of that as well but one you might remember, for example is site title or site tagline. You turn off the appearance of the site title and site tagline inside of this skin display. It doesn’t remove the box from the template, it just makes the box invisible.
Skin design is used to change the style of the content of a box. So, when you go in there to the color generator in Classic Responsive and click on a set of colors, that set of colors automatically changes the style of some other content, like the link color. So that is what skin design does and again that content is content that is one way or another inserted by the box.
CSS is Used to Style Templates
The fifth thing you need to understand is how CSS is used to style templates. Even if you are not doing any CSS or even if you are doing just a tiny bit of CSS you still need to understand the relationship of CSS to the templates and how CSS is used to style those templates.
What is CSS?
If you’ve never heard this language before or if you are not clear what we are talking about, CSS is a language that creates style rules that are applied to HTML elements. So if you have an HTML element like a header tag, an h1 tag, a style rule might say for some specific set of h1 tags make them all red and that’s a style rule that is applied to HTML elements.
CSS Styles Structure and Content of Pages
CSS styles your webpage in two ways. One way is by styling the template structure that is essentially giving things height and width and placing and arranging things inside of a template. CSS also styles content, like making a header red. So those are the two things that it does, it styles the structure and it styles the content.
Using the Thesis 2.1 Skin Editor Interface
And finally, what I need you to do is learn how to use the Thesis 2.1 interface. There are some little tricks to the interface and there is some back and forth in the interface that you have to become comfortable with and familiar with in order to use the Skin Editor effectively.