There are four main concepts that you need to understand in order to be able to use the Skin Editor effectively.
What is a Skin?
The first concept is, “What is a Skin?”. A Skin is a collection of templates and a set of styles. Templates are essentially the structure of the page and styles are the things that tell the web page what it ought to look like.
Skins and Child Themes
So those of you who are familiar with WordPress and the greater WordPress world are probably familiar with the concept of child themes. Themes are, generally speaking, a collection of templates and a set of styles. A child theme is generally a modification of the parent theme. It may have some additional templates or different set of styles.
Skins are very much like child themes in that way except that skins aren’t built in a vacuum. You build the skin inside the theme itself and you customize it and modify it there.
Templates and Styles in Skins
What we’ll be doing today is modifying templates and modifying styles. In this regard the templates and the styles are dependent upon the skin. We’ll be working in Thesis Classic Responsive today but if you later activate the Flex skin, for example, you will have a whole different set of templates and a whole different set of styles. Anything that you did in Thesis Classic stays with that theme and does not follow over to Flex.
Relationship Between Templates and Web Pages
The second concept is the relationship between templates and web pages. Templates create the structure of the page and they also include content placeholders that are like little modules of content that WordPress automatically fills with the content that you’ve specified.
Templates Display Content Differently
WordPress has a whole bunch of different types of templates. Those templates are displayed based on the kind of page that you are looking at. So, for example, if you are looking at the front page of the website that generally uses the Front Page Template.
If you are looking at the blog posts page, that uses the Home Template. So if you’ve got a site where in Reading settings you’ve set it so that your front page shows a static page and you have selected another static page for your blog posts page, the front template is the one that you said was going to be the front page and the home template is the one that kicks in for the blog posts page.
The typical page uses the Page Template and the typical post uses the Single Template.
This terminology is right out of the WordPress playbook. This is exactly the terminology that WordPress uses. Most people don’t usually interact with it because they don’t have to but because of this ability for you to customize your pages means that you end up interacting with templates.
That’s how your front page can look different than a regular page. And if you’ve got a custom template on a page, that page looks different than your regular pages and that’s the point at which you end up interacting with templates.
Templates Provide Structure and Content Area
Templates provide the structure and modules of content placeholders that WordPress automatically fills. Different templates are being used on different pages. Some of them automatically and some of them by virtue of the fact that you will have chosen them.
How Boxes are Used To Create Templates
The third concept that you need to learn is how boxes are used to create templates. This is not WordPress terminology. This is Thesis terminology. And you can think of them as boxes or modules or elements. We use the term boxes because just like HTML they often are nested inside of another box. You are going to see that very clearly here in a few minutes.
Boxes can be Both Structural and Add Content
Boxes that are structural are generally HTML elements like a div or an article or a header or a footer. They are HTML elements that then contain other things. And the boxes can add HTML structure to the site and also can add content to the site. And then they often do both.
They often provide both a content placeholder and a structural component. And while that might sound a little nebulous to you at the moment, it’s going to become very obvious as we work our way through the process of customizing the site.
How CSS is Used to Style Templates
The fourth concept you need to understand is how CSS is used to style templates. If you are a brand new beginner and it’s the first time you have even the encountered the concept of CSS or if you don’t understand CSS style rules, then there are other things you are going to want to learn as well.
Language for Creating Style Rules
Essentially CSS is a language for creating style rules that are applied to HTML elements. So the HTML element might be a headline and the style rule might be to make it red, make it Helvetica, make it 24 pixels tall, with a bottom margin of 27 pixels and so on. Those are the kinds of style rules that you can apply to an HTML element.
Provides Styles for Template Structure
CSS styles provide style for the template structure. For example, this column is 640 pixels wide and this column is 320 pixels wide. This column has 54 pixels of margin and this one has 27 pixels of margin. Those are structural rules in that they lay out how the page lays out.
So you use CSS to style that sort of thing and you also use CSS to do things like I mentioned before which is making changes to the color or font style and size, etc. That’s how CSS styles the web page. It does it by providing rules that affect HTML elements.
If this concept of CSS is entirely foreign to you then I would encourage you to come over and take a look at this course, Customizing Thesis 2.1 like a Pro. We’ll redo this for 2.3 but the CSS concepts are identical. There are two lesson here: Customizing Skins with Background Images, Colors and Gradients and Customizing Thesis Skins using Custom Fonts.
The main concepts are really in lesson 1, understanding what a rule is, what the parts of a rule are, what the syntax looks like and all that stuff. It’s important for you to get a sense of all that. There is a lot of information on byobwebsite on customizing CSS as it relates to Thesis 2. You might also look at Introduction to HTML for WordPress & Thesis 2.1 Users.