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 -

Good morning everybody and welcome to this special seminar, Thesis 2.3 for Web Design Professionals. As the name suggests, this seminar is not for beginners.

Who is this Seminar for?

This is for people who are comfortable and familiar with CSS, HTML and media queries and responsive design concepts. In essence this is a seminar for people who are comfortable with the tools of professional web design.

It is my opinion that if you are in that category, Thesis 2.3 was actually made for you. It was not really designed I don’t think with the beginner in mind. It was really designed for those of you who understand the concepts of HTML and CSS and want to streamline your design without having to write a lot of that stuff but still be able to work in it in WordPress.

What you are going to see today is that Thesis is infinitely customizable. If you know HTML and CSS you can make Thesis do anything that you want it to do.

Thesis Provides Powerful Developer Tools

In addition to that, Thesis gives you very powerful developer tools which make creating websites over and over and over again easy. It makes standardizing skins, standardizing templates, standardizing your design palette and then implementing it over and over again.

It’s essentially a template editor in the small scale but it’s also a template editor for an entire website. That is, it gives you the ability to setup defaults that you can use repeatedly. We are going to spend a bunch of time talking about that today.

Since the last version of Thesis came out we have a handful of new skins which already come with some prebaked HTML and CSS. You have now more starting places than you used to have.

You also have the lovely CSS code editor. You have skin management tools, especially in data management. You have development tools in the form of the Thesis Developer Box. You have dynamic variables that you can so that you can modularize your code and not repeat it over and over again. It has a whole bunch of tools with you specifically in mind.

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