Build Your Own Business Website header image

The Beginner’s Guide to the Thesis 2.1 Skin Editor

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

This guide is intended to give beginner’s not just an overview of the Thesis 2.1 Skin Editor but a real understanding of what is in the editor, how it works, how the work you do there relates to the pages on your website and how you can begin effectively using it. As you can see from the outline below, we cover all the concepts in depth that you need to know to use the Skin Editor. Then we walk you through 7 examples of things you are likely to want to do on your own website.

The 6 main Concepts You Need to Know to Effectively Use the Thesis Skin Editor

  • What a skin is
  • The relationship between templates and your web pages
  • How boxes are used to create templates
  • The relationship between skin content, skin display and boxes
  • How CSS is used to style templates
  • How to use the Thesis skin editor interface

What is the Relationship Between Skins, Templates and Web Pages?

  • Traditional HTML
    • Website consists of documents
    • Actual document file that can be opened and edited
    • Everything that is displayed exists in that document
  • How WordPress Works
    • 2 main components
      • Content Management System
      • Template system – Theme system
      • These are interdependent – one cannot exist without the other
    • Content is almost never in a file
      • It exists in the database
      • Examples
      • Page title
      • Page content
      • Categories
      • Without a theme system there is no way to display the content
    • A Theme is a collection of template files, function files and stylesheets
      • Template files structure the content
      • Have placeholders for that content
      • Themes also have stylesheets
  • How Thesis Works
    • Thesis is a Theme – but not really
    • Thesis is a Theming Engine
      • Replaces entirely the WordPress template system
      • There are no template files
      • Thesis uses Skins to represent a WordPress Theme
      • Thesis needs a Skin to display content
  • What is a skin?
    • a collection of templates (but not template files)
    • a set of styles
    • switching between skins means switching between templates and styles
    • Switching has no effect on the content, only on the display of the content
  • 4 things to keep track of
    • structure
    • content placeholders
    • styles
    • content
  • CSS styles
    • structure
    • content
    • example of my homepage
  • Where does the content come from?
    • From the admin interface
      • create a post or page
      • create categories
      • place widgets
    • In almost NEVER comes from the template
    • It NEVER comes from the style

Thesis 2.1 Skin Menu

  • Not all skins have the same menu items
  • Content – Skin Content
  • Design – Skin Design Options
  • Header Image
  • Custom CSS
  • Manage Skins
  • Editor – Skin Editor
    • HTML – 4 sections
      • Template selector
      • Template layout
      • Box Library – shows available unused boxes and potential boxes
      • Box Trash
    • CSS – 3 Sections – Not template specific
      • Skin CSS
      • Variables
        • Generally created by the skin author
        • When the value of the variable is changed the result is changed
        • May be programmatically tied to Skin Design
      • Packages
    • Images – 2 sections
      • Add image
      • Image library
    • Manager
      • Backup skin data
        • what skin data?
        • restore
        • export. delete
      • Import skin data
      • Restore default
    • Canvas
    • THESIS – Thesis Home

Types of Templates in Thesis 2

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

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)
    • Column 1
      • loop – explain
      • single post box
        • headline area
          • headline
        • post content
    • Sidebars
      • sidebar 1
        • text box
      • sidebar 2
        • widget box
  • Footer
    • Thesis attribution
    • WP Admin link

The Relationship of Skin Display, Skin Content, Skin Design and Boxes

  • Skin Content
    • Some boxes are placeholders for content
    • Some placeholders can be set from Skin Content
    • Examples
      • Menu
      • Text Box content
  • Skin Display
    • Some content placeholders can be turned off
    • Example Site tag line
      • It exists in the template
      • Skin content is the switch to turn it on or off
    • If there is no content for a box, nothing is displayed
      • Author Description
      • Author Avatar
      • Tags
  • Skin Design
    • Skin Design controls variables

Overview of the Skin Editing Process

  • What’s up with HTML and CSS?
    • structure – HTML
    • placeholder for content – HTML
    • style – CSS
  • Simple stylistic edits
    • select the design option that applies to the thing you want to change
    • change the setting
    • example – tagline
  • Simple Structural Edits
    • moving existing boxes
    • removing existing boxes
  • Typical Structural/Stylistic edits
    • create the box
    • place the box
    • add content place holder to the box
    • Style the box

HTML – Using The Template Editor

  • 3 functions of core boxes
    • containers – holds both placeholders and content
    • placeholders – displays content
    • content – displays template specific content
  • Box colors
    • White – “containers” – rotator boxes
    • Blue – “content” – terminal boxes, template can contain more than one
    • Purple – content – terminal, template can contain only one
    • Rose – content – dependent boxes
  • How to add a box
    • new box – nav menu
    • name it – this should be meaningful
  • How to position a box
    • from one box to another
    • within a box
  • How to remove a box from the template without deleting it
  • How to delete a box from all templates
  • How to delete “extra” boxes
  • How to position dependent boxes
    • Add dependent boxes
    • Remove dependent boxes
    • Remove from another container
  • Box persistence
    • create a box
    • edit a box
    • settings persist
    • placement doesn’t persist
    • contents don’t persist

HTML – Description of the Thesis Core Boxes

  • Core Containers
    • Comment form
    • Comment List
    • HTML Container
    • Post Box
    • Post List – only on home & archive
    • Query Box
    • Trackbacks
  • Core Placeholders
    • Comment Navigation
    • Nav Menu (WP)
    • Widgets
    • Site Title
    • Site Tagline
  • Core Content
    • Text Box
    • Attribution

CSS Selectors – The Link Between Boxes and Styles

  • Selector is the link
    • boxes have id and or class
    • the composition of the selector
      • the selector needs to include the class or id designator
      • most often the selector will be simple
      • the selector can be compound
  • When to choose an ID or a class in the box
    • id for things that happen once on a template – generally for structural elements
    • class for things that may happen multiple times in a template
    • sometimes both
    • If you need to add multiple classes use a space between them
  • Do’s and Don’ts
    • use an id only once per template
    • use all lower case letters
    • use no spaces – a-z, 0-9, _, –
    • cannot start with numbers
    • make them descriptive
    • avoid WordPress generated class names
  • One-to-many relationships
    • more than one box can have the same id
    • more than one box can have the same class
    • more than one package can have the same selector

Example #1 – Change the Background Style for the Site

  • This is a style only change
  • Upload a background image
  • Open Custom CSS
  • Create the background image code

Example #2 – Include the Author’s Name on Posts but Not Pages

  • Turn on author info in Skin Display
  • Open page template
  • Remove Author info

Example #3 – Center the Text in the Header

Example #4 – Add a Widgetized Feature Box

  • This is a typical structural change that follows the typical process
  • Create the feature box –
    • this is structure
    • give it a name
    • give it a class
    • drag it into place
  • Create the widget boxes
    • these are content placeholders
    • name
    • give them a class
    • drag them into place
  • Note which templates this affects

Example #5 – Add the Widgetized Feature Box to Another Template

Example #6 – Create a 3 Column Custom Template

  • Create a new custom template
  • Copy an existing template to the new template
  • Move Elements
    • content
  • Remove Elements
    • content column
    • sidebar column
    • Page Comments
  • Apply custom template to a page

Example #7 – Backup and Restore a Skin

Question and Answer

0 Comments… add one
0 comments… add one

Leave a Comment