Build Your Own Business Website header image

What’s New in Thesis 2.1 for the DIY Web Builder?

This is the second in a 3 part series and is intended for the DIYer who wants to do more with Thesis 2.1 than can be done using design and content options. Part 1 of the series is directed at beginners who want to learn how to use Thesis 2.1 without learning or knowing any code. The final part of the series is focused on Web Design Professionals who want to learn about the advanced tools Thesis 2.1 has to offer.

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.

The New Thesis 2.1 Skin Editor Interface

Types of Templates in Thesis 2.1

Understanding the Relationship of Boxes to Actual Pages

Move the Menu Below the Header Image Using the Thesis 2.1 Skin Editor

Remove the Text Box from the Posts and Archive Templates Using the Thesis 2.1 Skin Editor

Remove the Byline From Pages but Not Posts in the Thesis 2.1 Skin Editor

Add a Widgetized Feature Box to the Front Page Using the Thesis 2.1 Skin Editor

Remove Borders From all Pages In Thesis Classic Using Custom CSS

Add Background Images and Color to Thesis Classic Using Custom CSS

Style the Thesis Classic Responsive Menu

Make Your Styles Responsive in the Thesis Classic Skin

Q&A

2 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options

Related Posts

2 comments… add one
  • chris cottle February 21, 2014, 11:54 pm

    I recently started using thesis 2.1 for my site scifimoviefilms.com and in the skin design edit area the back round does not change color at all.

    Here’s my system status:
    About Thesis
    ===========================
    Thesis Version: 2.1.6
    Current Skin Name: Classic Responsive
    Current Skin Version: 1.0
    Current Skin Author: Chris Pearson

    Thesis Filesystem Check
    ===========================
    wp-content/thesis: YES
    wp-content/thesis/skins: YES
    wp-content/thesis/boxes: YES
    wp-content/thesis/packages: YES
    wp-content/thesis/master.php: YES
    Skin CSS Writable: YES

    About WordPress
    ===========================
    WordPress Version: 3.8.1
    Filesystem Method: direct
    Using Multisite: NO

    About PHP
    ===========================
    Version: 5.2.17
    cURL: YES
    Max Upload (according to WP): 64 MB
    Memory Limit: 40M

    About Server/Database
    ===========================
    Server Software: Apache
    Options Collation: utf8_unicode_ci
    MySQL Version: 5.5.33-31.1
    PHP Handler: cgi-fcgi

    I appreciate any help as I have a hand full of site I want to convert from 1x to 2.1 but I’m using this site as a tester.

    Thanks,

    Chris

    • Rick Anderson February 25, 2014, 7:40 am

      Chris, my guess would be that you have some form of cacheing (wp super cache, etc). If that isn’t the case give me a link to the site so I can see what is going on. OR signup for one of the live Q&A sessions on Wednesday.

Leave a Comment