Build Your Own Business Website header image

Customizing Thesis 2

Thesis 2.3 Developer Tools Box

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

So the very last thing I want to teach is the Thesis Developer Tools Box. Let’s pretend you’ve finished this website job now and you are ready to deliver it to the client. Well, there are a couple of things that you want to do to this. We started this project as if you were

Change the Responsive Header Behavior for Tablet Devices

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

We’ve created the 2 column responsive header in Thesis Classic but this may not come as a surprise to you, it’s doesn’t look that great responsively. Let’s take a look at it in the responsinator in the incognito window. You can see that this is tiny and this has shrunk over. It just doesn’t look

Create a 2 Column Responsive Header in Thesis 2.3

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

So we’re going to start off by creating a 2 column responsive header in Thesis 2.3 using the Classic Responsive theme. We’re going to do this on the front page. And we’re going to continue this process of using the Thesis default stuff. We’re not going to replace these defaults we’re going to just add

Understanding the Thesis Classic Responsive Media Queries

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Let’s move on to looking at the Thesis Classic Responsive Media Queries in Thesis 2.3. We are going to take a crack at changing up the header and writing some new media queries rules. That starts really in just Skin CSS. Classic Responsive has 3 different media queries. It has the non media query version

Restructure the Layout of a Skin

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

What we are going to do give the default Thesis Classic Responsive an updated look. This is the customization that we have done so far to date on Classic Responsive. It has a page width look. What people are doing much more often these days instead has horizontal appearing strands that span from one edge

Template Specific CSS with Thesis Body Classes

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

The next thing I want to talk about is template specific CSS using the Thesis body classes. In the last seminar we added this background color to the sidebar but we did it in such a way that it actually applies to every single instance of that container class. We actually have some places where

Creating and Using Variables in Thesis 2.3

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Next we are going to talk about creating and using variables in Thesis 2.3. Let’s go over to the Skin Editor. The first to say about this is you don’t want to change these variables. Because if you make a change in this variable it’s just going to get thrown away the next time you

Using the Thesis 2.3 Code Editor

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

We are going to take a brief look at the Thesis code editor before we move on to working on creating and using variables in Thesis 2.3. But before we go over there I would like to draw your attention to this Resources menu item on my website. Under Resources/Articles if you scroll down here

Thesis 2.3 File Structure

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

We are going to start at the very beginning by looking at the Thesis 2 file structure because the Thesis file structure is somewhat different than a typical WordPress theme structure. And I’m going to show it to you here in an FTP client. This is the FTP account for the site that we’ve been

Style the Thesis Classic Responsive Menu

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The next thing we are going to do in this Thesis 2.3 for DIY Website Builders seminar is to add styling to the Thesis Classic Responsive menu. Right now that menu spans all the way across. If you hover your mouse over this you can see that spans all the way across. We are going

Add Background Images and Color to Thesis Classic Using Custom CSS

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

Now I want to add some background images and color to the Thesis Classic Skin. So we’re going to start off in Skin Design with this. I’m going to take this interior backgrounds out of here. And then let’s really, really lighten it up. Save design options. Let’s take a look at the site, flush

Remove Borders From all Pages In Thesis Classic Using Custom CSS

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The next thing we are going to do in This Thesis 2.3 for DIY Website Builders seminar is to remove all the borders. We are going to get rid of these borders here on the pages. I have some code snippets for you that work in Thesis Classic Responsive. Come over and click on Resources

Advanced Thesis 2.1 Box Development – Part 7 – Setup a Standard Query Box to Display Slides

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now that we’ve created the HTML method that outputs the content for the Thesis 2 Accordion Slider box, we need to go back to the template where we’re displaying it. So we’ll go to the Home Template and come down to our Accordion Slider. Now what we're going to do is add a Query Box.

Advanced Thesis 2.1 Box Development – Part 6 – Create the HTML Method

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

We now have the image size function completed for the Thesis 2 Accordion Slider Box that we’re creating. So the next thing to do is to create the HTML method. This is the thing that outputs the content for the box. So I’m going to add public function html. Again, this is a helper method

Advanced Thesis 2.1 Box Development – Part 5 – Create Slide Image Size

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

We've added CSS to our stylesheet for the Thesis 2 Accordion Slider Box we’re creating. And the next thing we need to do is add the image size. Essentially, you tell it the width of the space that's available that the image should display in. In this case, my element is 1032 pixels wide and

Advanced Thesis 2.1 Box Development – Part 4 – Adding CSS to the Main Stylesheet

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

As somebody rightfully just noted, I've only added one of the two CSS files for this Thesis 2.1 responsive accordion slider box we’re creating. Well, it's very common for plugins and skins to load multiple CSS files but it's generally not good practice. There are some exceptions to that and I’m going to be showing

Advanced Thesis 2.1 Box Development – Part 3 – Adding Scripts and Styles to the Box

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Now that we’ve got the base Thesis 2.1 box set up with its folders and files, the first real thing we have to do is to add these scripts and styles you see here correctly to WordPress. There have been and still are a ton of very poor tutorials out there that tell you to

Advanced Thesis 2.1 Box Development – Part 2 – Create the Box Base and File Structure

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The process of creating this advanced Thesis 2 box starts off obviously with PHP. We're just going to start off in the regular file system. We've got wp-content, thesis, boxes and we're just going to create the code from scratch. So starting with boxes I'm going to add a new folder and this is the

Advanced Thesis 2.1 Box Development – Part 1 – Introduction – The Box we are Building

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to -

Good morning everybody and welcome to this special seminar entitled Advanced Thesis 2.1 Box Development. This is actually going to be a two-part seminar because of the extent and complexity of what can be taught in a 2-3 hour time period. So today we're going to do half of it and we'll do the other