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
- Course Introduction
- What is Responsive Design?
- Skins in Thesis
- Mapping out the Thesis Blue Masters Skin
- Setup the Skin File Structure
- Create the Skin Files
- WordPress/Thesis Constants and File Locations
Lesson 2 – Create the Typical Page Template
- HTML Structures for Responsive Design
- Collapsing column configurations
- Assembling Thesis Boxes
- Setup Primary Structural Elements
- Setup Structural Packages
- Add Content to Structure
- Add Content Packages
Lesson 3 – Create the Responsive CSS
- Introduction – Mobile Devices and Responsive Behavior
- Understanding Media Queries
- Set Up the Media Queries
- Tablet Landscape Responsive CSS Rules
- Forcing Device Width on Mobile Devices
- Tablet Portrait Responsive CSS Rules
- Smartphone Responsive CSS Rules
Lesson 4 – Create the Typical Styles
- Map Out the Site Background
- Create the Background Images from the PSD File
- Style the Background
- Style the Typical Page Content
- Style the Typical Sidebar
- Style the Footer
- Style the Main Nav Menu
Lesson 5 – Create the Front Page Template
- Map out the Front Page
- Understanding WordPress Image Sizes
- Create a Helper Box for the Responsive Slider
- Setup the Feature Box
- Construct Home Page Attention Boxes
- Add additional Responsive CSS
Lesson 6 – Complete the Front Page Template
- Update to the Box Method Options in 2.0.3
- Update to the Box Method HTML function in 2.0.3
- Update the Orbit Slider Box to Best Practices
- Create the Feature Box CSS
- Create the Front Post Box CSS
- Create the Widget Styles
- Make The Front Page Template Responsive
Lesson 7 – Create the Custom Blog Page and Single Post Page Templates
- Understanding Thesis 2.0 Post Box Configurations
- Map out the Blog Page
- Exclude Categories from Posts Page
- Restructure the Headline Area
- Modify the Excerpt
- Setup Ending Post Meta
- Add Custom Body Class
- Create Misc Styles
Lesson 8 – Create the Archive and Single Post Templates
- Add Post Navigation to the Home Template
- Create the Archive Template
- Create the Single Posts Template
- Add Comments to Single Post Template
- Add Comment Form to Single Post Template
- Style the Comments
- Style the Comment Form
Lesson 9 – Create a Custom Skin Package
- Reorganize our File Structure
- Introduction to Thesis Package Class
- Add Options to Thesis Packages
- Using Thesis 2 Standardized CSS Options
- Add Custom CSS Options to the Package
- Refine the Package to Include Width, Height and Float
- Combine the Sample Package with the Single Element Style Package
Lesson 10 – Create a Responsive Menu for Mobile Devices
- Introduction to Responsive Menus
- A Tour of the Menu We Will Create
- Create an HTML Box for the Menu
- Add the jQuery Plugin to the Skin
- Add the Sample CSS & Test
- Modify the Horizontal Dropdown Menu package to Style the Responsive Menu