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 -

Good morning everybody and welcome to this special seminar on Thesis 2.3 for the DIY Website Builder. Before we start I want to talk about who this seminar is for because it isn’t going to be for everyone.

Interest in Learning Some CSS and HTML

This seminar is for someone who wants to build their own site and who is willing to learn some code and code concepts. If you have no intention of learning or using any CSS or HTML basic concepts then this probably isn’t the right seminar for you.

The tools that Thesis provides for the DIY website builder involve if not good CSS and HTML knowledge then at least a basic understanding of the concepts. If you don’t have a basic understanding of any of those things then this is going to be a learning experience for you.

Benefit: Create Any Type of Website with Thesis

Thesis 2.3 is infinitely customizable and that means that you can do absolutely anything that you want in terms of creating a WordPress website with Thesis.

Any website that you’ve seen can be emulated with Thesis. Really anything that you want to accomplish can be done with Thesis but it does, in fact, require a basic understanding of HTML and CSS.

Thesis Easier to Customize than Most WP Themes

Having said that, Thesis is way easier to customize than most WordPress themes. I say that with a caveat since some WordPress themes have 5 or 6 options that you can change and that’s all that you can do. Of course, that’s easier than what we are talking about here today.

But if you were to want to change the layout of a page or change the colors on a site away from the basic colors and those sorts of things, that kind of customization is quite a bit easier with Thesis than it is with most other WordPress themes.

To get the most out of that you are going to want to learn some HTML, some CSS and also some basic responsive design concepts. You’ll see all of that illustrated here today. But this is not a seminar for those of you who don’t want to learn any code or web design concepts.

It’s really for the website builder who’s interested going beyond the basic and wants to be able to take advantage of the power that Thesis 2.3 has in building and customizing websites.

You can think of Thesis 2.3 like this, it’s a tool for designing and building out WordPress websites. And it’s tool that you have to learn how to use. When you learn how to use it you can do just about anything.

If you’re not interested in this then the types of things that you can do with Thesis 2.3 are relatively simple. Now, there’s nothing wrong with that. If you are the kind of person who is willing to find a skin that’s pretty close to what they want, use the skin options that are available there to customize it and let it go at that, that is a perfectly acceptable way to approach Thesis. That’s the way you have to approach every other WordPress theme so there’s nothing wrong with that.

Resource for Learning CSS and HTML for WordPress and Thesis

A useful resource for you on HTML and CSS is our seminar Introduction to HTML for WordPress and Thesis 2.1 users. Learning HTML can be difficult especially because much of what you would typically learn isn’t relevant in WordPress. This seminar bridges the gap between learning HTML and leaning HTML that will be useful to you as a WordPress and Thesis user.

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