Build Your Own Business Website header image

Thesis 2.3 for DIY Website Builders

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Introduction – Who is the Thesis 2.3 Skin Editor For?

  1. Who is this seminar for?
    1. Someone building their own site
    2. Someone willing to learn some code and code concepts
    3. If you have no intention of learning or using any CSS then this isn’t the right place for you
  2. Thesis 2.3 is infinitely customizable
    1. Basic understanding of HTML
    2. Basic understanding of CSS
  3. Thesis is way easier to customize that most WordPress themes
  4. To get the most out of Thesis you’ll need to learn
    1. Some HTML
    2. Some CSS
    3. Some basic responsive design concepts
  5. 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.3 Skin Editor

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

The Thesis 2.3 Skin Editor Interface

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

Types of Templates in Thesis 2.3

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

Understanding the Relationship of Boxes to Actual Pages

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

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

  1. Drag it from the Home template
  2. Why hasn’t it moved?
  3. Drag from the parent templates
  4. Look at child templates

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

  1. Locate the correct templates
  2. Drag the text box to the toolbox
  3. Repeat

If you Make a Change to a Box in One Template does that Change Exist in the Other Templates?

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

  1. Turn on the Byline features in Content
  2. Remove byline from front template
  3. Remove avatar from front template
  4. Repeat for pages

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

  1. Create the boxes
  2. Add class names to the boxes
  3. Move them into place
  4. Create the widget area
  5. Move it into place
  6. Add the widget
  7. Add the shortcode

How to Add an Aweber Email Optin Box

  1. Install the box
  2. Configure the box
  3. Drop the box in place

Remove Borders From all Pages In Thesis Classic Using Custom CSS

  1. Remove border from the footer
  2. Remove border from the sidebar
  3. Remove border from the header

Add Background Images and Color to Thesis Classic Using Custom CSS

  1. Set the page background color in Design
  2. Add a color to the container
  3. Add a repeating background image to the body
  4. Add a solid color to the sidebar
  5. Add a background image to the footer
  6. Add a color to the footer
  7. Add padding to the footer

Style the Thesis Classic Responsive Menu

  1. Add color to the menu
  2. Change the border colors

Make Your Styles Responsive in the Thesis Classic Skin

  1. Test in responsinator
  2. Set up the media query
  3. Move sidebar color
  4. Move the menu border color

BYOB Thesis Style Manager – BYOB Responsive Columns

Question and Answer

0 Comments… add one
0 comments… add one

Leave a Comment