Build Your Own Business Website header image

Create a Responsive Skin

How to Add the Viewport Meta Tag to a Thesis 2.1 Skin

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

In this session we demonstrate how to add the viewport meta tag to a Thesis 2.1 skin by placing the code inside the skin.php. There are some devices that will try to scale the whole page to fit instead of making it change in size to fit the window so we demonstrate how to set

Lesson 9 – Part 7 – Combine the Sample Package with the Single Element Style Package

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now, really what you want to do is add some padding and margin and other things to this as well. By the time you get to this point, what is really easy to do is to just you know, I went to this process of showing you how to gradually add stuff into it because

Lesson 9 – Part 6 – Refine the Package to Include Width, Height and Float

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

The next thing we're going to do is add height, width and float to this so that this box couldn't be someplace else besides where it can sit as an attention box in the middle of content. So that's the next step is, to come back over here and look at our options and we

Lesson 9 – Part 5 – Add Custom CSS Options to the Package

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

The next thing we're going to do is start creating a package. We're going to start off by copying this package and just like the last one, it's going for refinement but now we're going to call this one trbm_attention_box_package and we'll just call this 'Attention Box Styles' and then we're going to take the

Lesson 9 – Part 4 – Using Thesis 2 Standardized CSS Options

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now, what we're going to do is add Thesis 2 Standardized CSS Options to a package and we're going to start that process off by looking at the Thesis CSS API file. The Thesis CSS API file is right here, it's under lib, core, api, css_api and what it does is it simplifies the process

Lesson 9 – Part 3 – Add Options to Thesis Packages

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

We're going to refine this by adding options to it so I'm going to copy this and we're going to call it trbm_options_sample_package and Sample Package with Options. As you may well assume, that means we're going to have a protected function options, let's go ahead and copy that for just a moment and paste

Lesson 9 – Part 2 – Introduction to Thesis Package Class

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

The next thing we're going to take a look at is just an introduction to the Thesis package class. Now, you probably remember our introduction to the Thesis Box class back in Lesson 5 and the packages have some pretty significant similarities to boxes and so we're going to start off just like we did

Lesson 9 – Part 1 – Reorganize our File Structure

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Good morning everybody and welcome to Lesson 9 of our class on How to Create a Responsive Skin for Thesis. I prepared fully forty hours for this class and this morning, what I realized as I was making my final preparations that there was no way we're going to cover all this material in two

Lesson 8 – Part 3 – Create the Single Posts Template

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The next thing we're going to do is create our single posts template. We’ll spend a good deal of time here because styling the comments and that kind of stuff is actually not nearly as fast and easy as styling the rest of this. Let’s refresh our memory of what we’re aiming at. We're going

Lesson 8 – Part 2 – Create the Archive Template

Difficulty Level -

Listed Under Lesson Subjects -

Applies to -

The reason why we did the Post Navigation first on the Home Template is because our Archive Template is going to be a copy of our home template. Let’s go look at what our archive looks like right now; it’s blank. We haven't done anything at all, we haven't included anything in our archive template

Lesson 8 – Part 1 – Add Post Navigation to the Home Template

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Good morning everybody and welcome to Lesson 8 of our How to Create a Responsive Skin for Thesis Class. Today, we are going to be creating the archive template and the single post templates at which point we'll have most of the templates completed. There's one last thing we need to do to our home

Lesson 10 – Create a Responsive Dropdown Menu

Listed Under Lesson Subjects -

Applies to -

Types of menus Top Nav Stacking Boxes Select Menu Vertical Accordian - with button The problem with the standard Thesis menu Criteria for a responsive menu Intuitive Easy for fingers Not dependent on “hover” Contributes to the design Lightweight The tutorial version The Original Tuts+ Tutorial The style The problem with parent menu items Modifications

Lesson 9 – Create a Custom Skin Package

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

In this ninth lesson, Create a Custom Skin Package, of our Create a Responsive Skin for Thesis 2.0 course we introduce the necessary elements for creating custom packages. We start by updating our File Structure due to updates in Thesis 2. Then we introduce the Thesis Package Class showing the minimum requirements and how to

Lesson 8 – Create the Archive and Single Post Templates

Difficulty Level -

Listed Under Lesson Subjects -

Applies to -

In this eighth lesson, Create the Archive and Single Post Templates, of our Create a Responsive Skin for Thesis 2.0 course we finish setting up the final templates for the skin. We start by wrapping up our work from last week on the Home Page Template. Then we move on to creating the Archive Template