Build Your Own Business Website header image

Thesis 2.3 for Web Design Professionals

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Introduction

  1. Who is this for?
  2. Thesis 2.3 Was Made For You
    1. Infinitely customizable
    2. Powerful developer tools
    3. Keeps your clients out of the skin editor
  3. What’s new for you?
    1. New DIY Themes skins
    2. CSS Code Editor
    3. Skin management tools
    4. Development tools
    5. Dynamic Variables
    6. DevTools box

Thesis 2.3 File Structure

  1. Core files
  2. User files
  3. Skin files
  4. master.php VS custom.php VS skin.php
  5. PHP User Files best practices
    1. Use master if
    2. Use custom if
    3. Use skin if

Using the Thesis 2.3 Code Editor

  1. Uses Codemirror
  2. Syntax highlighting
  3. Automatic indentation
  4. Insert variables
  5. Shortcut cheat sheet

Creating and Using Variables in Thesis 2.3

  1. Using existing variables in your own code
  2. Create a simple variable – #BABA5A
  3. What can go into a variable?
  4. Create a standard button variable
  5. Apply the button style to email form
  6. Apply button style to link

Template Specific CSS with Thesis Body Classes

  1. Look at full width & landing pages
  2. Open template options
  3. Add body classes
  4. Look at pages again
  5. Create css
  6. Add background styles

Restructure the Layout of a Skin

  1. What is a full width layout?
    1. Browser width element
    2. Pagewidth element
    3. Each section has both
  2. Create the full width elements
    1. header_area
    2. content_area
    3. footer_area
  3. Create the page width elements
  4. Style the header
  5. Style the footer

Thesis 2.3 Skin Data Management

  1. Backup
  2. Restore previous backup
  3. Restore defaults
  4. Export skin data
    1. Parts of the name you can change
  5. Import skin data

Understanding the Thesis Classic Responsive Media Queries

  1. 3 queries – 4 conditions
  2. Full size
  3. Smaller than the total width
  4. Smaller than the content width
  5. Smaller than 450px

Create a 2 Column Responsive Header in Thesis 2.3

  1. Create the header wrapper container
  2. Create header left & header right containers
  3. Move menu
  4. Self clearing floats
  5. Column widths & floats
  6. Padding & box sizing
  7. Menu width & margin

Change the  Responsive Header Behavior for Tablet Devices

  1. New desktop only media query
  2. Move desktop only code into it

Thesis 2.3 Developer Tools Box

  1. Use Developer Updates
  2. Skin Editor Options
  3. Skin Distribution
  4. Create New Skin
    1. screenshot size – 300 x 225
  5. Export Skeleton Data
  6. Import Skeleton Data
  7. Transfer images
  8. Transfer CSS
  9. Create Distribution Zip

Question and Answer

0 Comments… add one
0 comments… add one

Leave a Comment