Build Your Own Business Website header image

Create a Responsive Skin for Thesis 2.0

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

This is a new 10 lesson series that teaches a developer or designer how to create a responsive skin for Thesis 2.0. This class introduces you to the skin development and management system new in Thesis 2.0.  For a designer the new Thesis theme is a blank canvas that will allow you to design any kind of site you like.  Making that site responsive to mobile devices is more important now than ever.  When you are finished with this class you will have a skin that you can share or sell that looks great on all mobile devices.

This course is designed for an intermediate WordPress and Thesis theme user.  This means that you are comfortable with the workings of WordPress and you have at least an introductory knowledge of HTML, CSS and PHP.  This class will be primarily focused on understanding and writing the code that works in the new Thesis 2 theme.  We will explain in depth all of the concepts around the code that we write.  The class is intended for someone who is comfortable customizing Thesis 1.x using their custom.css and custom_functions.php files.

The skin we are creating can be found here.  It is based on the “Blue Masters” PSD template published by Smashing Magazine. The course will teach all of the tools and skills necessary to completely build a skin like this.

Course Outline

Lesson 1 – Understanding Skins in Thesis 2.0

  1. Course Introduction
  2. What is Responsive Design?
  3. Skins in Thesis
  4. Mapping out the Thesis Blue Masters Skin
  5. Setup the Skin File Structure
  6. Create the Skin Files
  7. WordPress/Thesis Constants and File Locations

Lesson 2 – Create the Typical Page Template

  1. HTML Structures for Responsive Design
  2. Collapsing column configurations
  3. Assembling Thesis Boxes
  4. Setup Primary Structural Elements
  5. Setup Structural Packages
  6. Add Content to Structure
  7. Add Content Packages

Lesson 3 – Create the Responsive CSS

  1. Introduction – Mobile Devices and Responsive Behavior
  2. Understanding Media Queries
  3. Set Up the Media Queries
  4. Tablet Landscape Responsive CSS Rules
  5. Forcing Device Width on Mobile Devices
  6. Tablet Portrait Responsive CSS Rules
  7. Smartphone Responsive CSS Rules

Lesson 4 – Create the Typical Styles

  1. Map Out the Site Background
  2. Create the Background Images from the PSD File
  3. Style the Background
  4. Style the Typical Page Content
  5. Style the Typical Sidebar
  6. Style the Footer
  7. Style the Main Nav Menu

Lesson 5 – Create the Front Page Template

  1. Map out the Front Page
  2. Understanding WordPress Image Sizes
  3. Create a Helper Box for the Responsive Slider
  4. Setup the Feature Box
  5. Construct Home Page Attention Boxes
  6. Add additional Responsive CSS

Lesson 6 – Complete the Front Page Template

  1. Update to the Box Method Options in 2.0.3
  2. Update to the Box Method HTML function in 2.0.3
  3. Update the Orbit Slider Box to Best Practices
  4. Create the Feature Box CSS
  5. Create the Front Post Box CSS
  6. Create the Widget Styles
  7. Make The Front Page Template Responsive

Lesson 7 – Create the Custom Blog Page and Single Post Page Templates

  1. Understanding Thesis 2.0 Post Box Configurations
  2. Map out the Blog Page
  3. Exclude Categories from Posts Page
  4. Restructure the Headline Area
  5. Modify the Excerpt
  6. Setup Ending Post Meta
  7. Add Custom Body Class
  8. Create Misc Styles

Lesson 8 – Create the Archive and Single Post Templates

  1. Add Post Navigation to the Home Template
  2. Create the Archive Template
  3. Create the Single Posts Template
  4. Add Comments to Single Post Template
  5. Add Comment Form to Single Post Template
  6. Style the Comments
  7. Style the Comment Form

Lesson 9 – Create a Custom Skin Package

  1. Reorganize our File Structure
  2. Introduction to Thesis Package Class
  3. Add Options to Thesis Packages
  4. Using Thesis 2 Standardized CSS Options
  5. Add Custom CSS Options to the Package
  6. Refine the Package to Include Width, Height and Float
  7. Combine the Sample Package with the Single Element Style Package

Lesson 10 – Create a Responsive Menu for Mobile Devices

  1. Introduction to Responsive Menus
  2. A Tour of the Menu We Will Create
  3. Create an HTML Box for the Menu
  4. Add the jQuery Plugin to the Skin
  5. Add the Sample CSS & Test
  6. Modify the Horizontal Dropdown Menu package to Style the Responsive Menu

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
2 Comments… add one
2 comments… add one
  • Michael Kocher June 30, 2013, 4:20 pm

    Hi! I’m in the process of starting a new website. Would you suggest that I begin modifying the Thesis 2.1 responsive them, or will this course create a better responsive theme?
    Will this keep the Golden Ratio typography?

    • Rick Anderson July 2, 2013, 10:14 am

      Michael, this course is designed for someone who wishes to create their own skin from scratch. It may or may not be better than Classic Responsive. That is entirely dependent on what you want it to do and and what you want to do with it. You can’t redistribute the Thesis Classic Responsive skin as your own. This class teaches you how to create a skin that can be redistributed and sold.