Thesis 2.1 for DIY Website Builders

Difficulty Level - Intermediate

Filed Under Topics - Thesis 2.1

Listed Under Lesson Subjects - Features Overview

In this seminar we introduce the new Thesis 2.1 skin editor. We take the site that was developed during the Thesis 2.1 Launch party and show how to move and style the menu, add a widgetized feature box and how to create structures in Thesis Classic Responsive that maintain its responsiveness. We spend a bunch of time using the new custom CSS editor as well.

Who is the Thesis 2.1 Skin Editor for?

Please share this with others
If you haven’t already watched the first videos
Who is this seminar for?
- Someone building their own site
- Someone willing to learn some code and code concepts
- If you have no intention of learning or using any CSS then this isn’t the right place for you
Thesis 2.1 is infinitely customizable
- Basic understanding of HTML
- Basic understanding of CSS
Thesis is way easier to customize that most WordPress themes
To get the most out of Thesis you’ll need to learn
- Some HTML
- Some CSS
- Some basic responsive design concepts
Some tools that can reduce what you need to learn – but then you need to learn the tool

4 Main Concepts you Need to Understand to Effectively Use the Thesis 2.1 Skin Editor

What a skin is
- What is a skin?
  - a collection of templates
  - a set of styles
  - switching between skins means switching between templates and styles
The relationship between templates and your web pages
- A template takes your content and displays it as a web page
  - it adds structure
  - it places content
- Different types of pages use different templates
  - Front
  - Blog
  - Page
  - Single
How boxes are used to create templates
- Boxes do 1 or 2 things
  - Create HTML structure for the template
  - Add content to the template
- Often they do both
How CSS is used to style templates
- CSS is a language for creating “Style Rules”
- Style rules are applied to HTML elements

The New Thesis 2.1 Skin Editor Interface

Custom CSS
Manage Skins
Skin Editor
- HTML – 5 sections
  - Template selector
  - Template options
  - Template layout
  - Box builder
    - Shows boxes that have been created and are available for use in the template but that are not being used – *
    - Shows the list of new box types that can be created
  - Box Trash
- CSS – 3 Sections – Not template specific
  - Skin CSS
  - Variables
  - Packages
- Images – 2 sections
  - Add image
  - Image library
- Manager
  - Backup skin data
    - what skin data?
    - restore
    - export. delete
  - Import skin data
  - Restore default
  - Skin Backups
- Canvas
- THESIS
HTML Layout
- Each template contains boxes
- Box options
- Box contents
- Box tray
- 2 types of drag operations
  - Shift drag – from one box to aother
  - Drag – rearrange within a box

Types of Templates in Thesis 2.1

2 types of templates
- core templates – automatically applied
- custom templates – must be selected
Core templates
- Home
- Page
- Single
- Archives
Parent/child relationships in templates

Understanding the Relationship of Boxes to Actual Pages

Body
Container (above and below)
- Nav menu
- header
- content
- footer
Header
- site title
- site tagline
Columns (side by side)
- Content Column
  - WP Loop – explain
  - Post/Page Post Box
    - Headline Area
      - Author Avatar (Not Visible)
      - Headline
      - Byline
        
        Author
        
        Date
        
        Edit
    - WP Featured Image
    - Thesis Post Image
    - Content
  - Page Comments
- Sidebar
  - text box
  - widget box
Footer
- Thesis attribution
- WP Admin link