Build Your Own Business Website header image

Thesis 2.1 for DIY Website Builders

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

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

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

  • Drag it from the Home template
  • Why hasn’t it moved?
  • Drag from the parent templates
  • Look at child templates

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

  • Locate the correct templates
  • Drag the text box to the toolbox
  • Repeat

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

  • Turn on the Byline features in Content
  • Remove byline from front template
  • Remove avatar from front template
  • Repeat for pages

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

  • Create the box
  • Move it into place
  • Create the widget area
  • Move it into place
  • Create the text box
  • Add class names to the boxes
  • Add the widget
  • Add the call to action

Remove Borders from All Pages in Thesis Classic Using Custom CSS

  • Remove border from the footer
  • Remove border from the sidebar
  • Remove border from the header

Add Background Images and Color to Thesis Classic Using Custom CSS

  • Set the page background color in Design
  • Add a color to the container
  • Add a repeating background image to the body
  • Add a solid color to the sidebar
  • Add a background image to the footer
  • Add a color to the footer
  • Add padding to the footer

Style the Thesis Classic Responsive Menu

  • Add color to the menu
  • Change the border colors

Make your Styles Responsive in the Thesis Classic Skin

  • Test in responsinator
  • Set up the media query
  • Move sidebar color
  • Move the menu border color

Question and Answer

1 Comment… add one
1 comment… add one
  • Derek Goodyer July 15, 2013, 7:01 pm

    Hi Rick, Are the two downloads above which relate to shopping carts supposed to be with this Thesis 2.1 series?