Thesis 2.1 introduces a bunch of new tools specifically designed to help the DIYer customize the look and feel of their website. In the videos below we pick up where the Launch Party videos left off. The new improved Thesis 2.1 Skin Editor revolutionizes how folks can customize their sites. With it, Thesis has become infinitely customizable with most of the traditionally hard stuff handled with simple drag and drop.
The best part about this is that it doesn’t require a lot of code knowledge in order to take advantage of the skin editor. A great deal of customization can be accomplished with a little CSS and some drag and drop. Of course, the more CSS you know the further the Thesis Theme can take you.
Who is the Thesis 2.1 Skin Editor For?
The Thesis 2.1 Skin Editor is intended to be used by the DIY web builder and the professional web designer. Thesis has taken many of the design options out of the old skin editor and placed them in skin options pages. This enables the less technically proficient to do a great deal of customization without using the skin editor. Some knowledge of HTML and CSS is very helpful when editing a skin using the skin editor.
Thesis 2.1 is INFINITELY customizable
Almost anything you may want to do can be done within the skin editor. The HTML template editor allows you to drag HTML elements around the template and to place them where you want them to go. This effectively eliminates ALL HTML limitations that exist in typical WordPress themes. A basic knowledge of HTML concepts is necessary in order to do this effectively but there is no coding involved. A general understanding of basic HTML elements (text tags, lists, divs, etc) is all that is needed in order to fully exploit the power of the template editor.
The more CSS you know the more you will be able to do with Thesis 2.1. The skin editor now sports a new CSS editor that includes syntax highlighting and one click code snippet insertion. The syntax highlighting does a pretty good job of error checking and it includes auto indentation. This makes writing CSS within the dashboard a snap.
4 Main Concepts You Need to Understand to Effectively Use the Thesis 2.1 Skin Editor
1. What are skins?
In Thesis 2 a skin is the functional equivalent of a child theme in typical W0rdPress themes. It is essentially a collection of templates and styles that are used to display your webpages. Both templates and styles are dependent on the skin that is activated at the time. Each skin has its own set of templates and styles. Switching between skins results in switching templates and styles.
2. What is the relationship between templates and web pages?
WordPress recognizes a number of different templates. Each template is used to display a certain type of information. So for example, a single blog post is displayed using the “single” template. The template structures the content that displays on a page. Thus it is the template that displays the content in 2 columns with a header on the top and a footer on the bottom. The single template has elements like comments where the typical page template doesn’t.
3. How Boxes are used in Thesis 2 to create templates
Boxes in Thesis 2 are tools for inserting and arranging structure and content in the template. Some boxes are nothing more than containers used to provide structure. Others are content placeholders used to display various forms of content. More often than not, boxes have both functions. They often display content and wrap that content in HTML elements. Anything that goes in a template does so via a box.
4. How CSS is used to style templates
This probably goes without saying for many folks but CSS is a language of style rules that get applied to HTML elements. The Thesis 2 Skin Editor allows you to assign class and id to your HTML boxes and then provides the mechanism for writing style rules that reference those classes and ids. Understanding this is fundamental to understanding how to use the Skin Editor.