There are four main concepts that you need to understand in order to use the Thesis 2.3 Skin Editor effectively.
What is a Skin?
The first is “What is a Skin”. We’ll talk about this more but generally a skin is a collection of templates and a set of styles. And templates and styles are themselves Skin dependent. That is different skins have different template setups and different style setups.
Relationship Between Templates and Web Pages
The second thing you are going to need to understand is relationship between templates and web pages. We’re going to talk about that quite a bit here coming up so that you can see the one to one correspondence between what you see on the template and what you see on your web page.
Display Your Content
Templates display your content as a web page. So templates create the structure of the page, that is how the page lays out. Templates include content placeholders for automatic content to be put in those places. And templates include styles for what all that stuff should look like when it is done.
Different Types of Pages Use Different Templates
Different types of pages use different templates. For example, the front page of your site uses the Front Page template. The blog page or your posts page uses your Home template. The typical page uses the Page template and the typical post uses the Single template.
So there are different templates that are automatically applied to different pages. Each of these templates are editable by you. You can customize them.
How Boxes are Used to Create Templates
The third concept that you need to understand is how boxes are used to create templates. And that’s what we are going to spend most of our time on today. You’ll get an understanding of what the boxes are and how they work and then see how to arrange them in different arrangements in order to accomplish the layout that you want for your site.
Boxes are used to add HTML structure to a template. They’re used to add content to the template and often they do both.
Understand How CSS is Used to Style Templates
The final main concept is to understand how CSS is used to style templates. In other words, to understand the connection between a CSS rule and a particular element in the template. This is something that I think beginners wrestle with so we will focus some time on this.
Language that Creates Style Rules
CSS is a language and that language creates style rules and those style rules are applied to HTML elements. And so we’re going to be looking at the connection between the style rule and the HTML element in the Skin Editor.
Just as an overview for CSS for the beginner, CSS styles your web page. That’s what that language is for. It determines, for example, the widths of your website. Your page width is determined by CSS. The width of columns in your page are determined by CSS. That’s generally thought of as the structural CSS.
And then CSS also styles the content. So that’s the font size, the font color, the heading size, how much padding, margin and all that sort of thing are all controlled by CSS rules.
Hopefully by the end of today you will understand those four main concepts and be able to apply them. The first thing we will take a look at is the Skin Editor interface.