Now that you know how useful some knowledge of code and code concepts are let’s talk about the 4 main concepts you need to learn in order to effectively use the Thesis 2.1 Skin Editor.
What is a Skin?
The first concept is, what is a skin? A skin is a collection of templates and a set of styles. You’re going to see what that means here a little further down the road but templates and styles are “Skin Dependent”.
That is, each template layout is dependent upon the skin that’s currently active and if you activate a different skin, then the template settings that you made in the first skin are no longer going to be applied. This is because the template settings of the second skin that you activated are the ones that are going to be applied.
For example, if you switch back and forth between Thesis Classic Responsive skin and my Agility skin, they style the same templates but the template layouts are going to be different between the two of them. This is because the template is dependent upon the skin and so is the style.
Now, the style, of course, is what color these things are and what things look like. Those are absolutely dependent upon the skin that you are using. So the skin is the part of Thesis and WordPress that displays your content in a particular arrangement, a particular way with a particular appearance, that’s what the skin is.
The Relationship Between Templates and Web Pages
The second thing you need to learn is what is the relationship between templates and web pages?
Templates Create the Structure for your Pages
Templates display your content as a webpage so templates create the structure for what’s going to be displayed. And they include content placeholders that stand in for actual content. Again, we’ll see this more specifically as we work our way through the class but the template is really the thing that tells a particular page what to display.
Different Types of Pages Use Different Templates
Different types of pages use different templates. So for example, if you’ve got a static Front page on your site like we have on this Barking Chihuahua site that we’re working on, that uses the Front page template. The blog page or your posts page uses the Home template. The typical ordinary page uses the Page template and typical blog post uses the Single template.
These are all default behaviors inside of WordPress. This is a normal behavior in WordPress. Most people don’t really have to interact with the concept of templates when they deal with WordPress because the theme designer has handled all of that template stuff for you. However, because Thesis gives you full control over the HTML of your site, at that point it gives you full control over the content and arrangement of your templates. And when you’re working in the Skin Editor, the thing you’re going to spend the most time on is the template part of the editor.
How Boxes are Used to Create Templates
The third concept you need to master and understand is how boxes are used to create templates because that’s the whole drag and drop thing, right? What we’ll be doing is we will select the template that we’re going to edit and then we will drag and drop boxes around to arrange the templates. Really, that’s the thing you’re going to spend your most time doing when you’re customizing your skin. You’ll be rearranging the boxes in order to set up the layout of your templates.
Boxes are used to add HTML structure to a template. They can also be used to add content to the template and actually, more often than not, they are used to do both things. We’re going to talk about that, we’re going to see that extensively as we move on here in the next half hour or so. But that’s what boxes are used for, they add HTML structure to a template, they add content to that HTML structure and sometimes they do both, HTML structure and content.
How CSS is Used to Style Templates
Finally, the fourth concept you’re going to need to learn is how CSS is used to style templates. CSS stands for “Cascading Style Sheets” but CSS is a programming language here. It is, of course, but I don’t want to scare anybody so CSS is a language for creating style “rules” that are applied to HTML elements.
So if you’ve got an HTML element say an h1 tag for a header tag, then you can create a style rule that says, display this h1 tag with this font size and this color and this font family and that sort of thing. That’s a rule that defines how that h1 tag is going to look and that’s what CSS is, it’s a language that create style rules that are applied to HTML elements.
CSS Styles Template Structure
CSS styles are used for two things. One of them is they’re used to style your template structure. We’re going to do a bunch of this today but, for example, CSS defines the width of columns. You don’t actually see the column on your page, what you see is the content that’s contained inside of the column and that CSS rule is saying, make this column this wide. So that’s one of things it does, is it styles the template structure.
CSS Styles the Content Displayed
The other thing it does is it styles the content that’s displayed inside the template. So back to our h1 tag. The heading is a content that’s displayed in the template and you can create a style to style that heading.
So it styles both things, it styles both template structure and it styles the content that’s being displayed. I wanted to introduce these 4 main concepts because in a few minutes, we’re going to be spending all of our time working on those things.