Build Your Own Business Website header image

Beginner

Example #5 – Create the Gallery

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Our last customization example in this Beginner’s Guide to the Thesis 2.3 Skin Editor is to create a gallery. We are going to create it on the gallery page. This isn’t a traditional WordPress gallery, this is going to be a post image gallery. What we are going to do is create a custom template.

Example #4 – Add the Widgetized Footer

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

The next example that we are going to show is how to create a widgetized footer in Thesis 2.3. And we will be continuing to use the same methodology as we did before. We'll create a column wrapper and then we will create the four columns with widget areas. Then we'll fix whatever CSS isn't

Example #3 – Add a Grid of Recent Posts on the Front Page

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

The next thing we are going to do in this Beginner’s Guide to the Thesis 2.3 Skin Editor is add a grid a grid of recent posts to the Front page. The first thing I want to do with this Front page is make it full width. The easiest way to make the Front page

Example #2 – Create a 2 Column Header

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Let’s go over here in the Thesis 2 Skin Editor to Custom CSS. We are going to start by writing some very basic responsive CSS. I already have some CSS in here and this CSS comes from, again, that Resource articles page where I have the code snippets for Thesis Classic Responsive Skin. So I’m

CSS Selectors – The Link Between Boxes and Styles

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

The next customization that we are going to make in the Thesis 2.3 templates requires CSS. So before we go on to create a 2 column header I want to make sure that you are very clear about the relationship between the CSS rules that we are writing and these boxes. These boxes all have

Example #1 – Modify the Archive Post Box

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to -

Up until this point we have been looking at everything you need to know in order to effectively customize your templates in Thesis 2.3. Now you have a good overview of how to use the Skin Editor, how templates relate to web pages and how boxes work in templates. My first example of really making

HTML – Description of the Thesis Core Boxes

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

Now we are going to take a look at the core Thesis 2.3 boxes. We’ve got essentially core containers, core placeholders, and core skin content boxes. Your core containers are, of course, first the HTML container. Then if you look here in the list the comment form is a core container. The comment list is

Box Inheritance & Persistence

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

The next thing I want to talk about is Box inheritance and Box persistence. There was a question asked about this in a former session and it’s an important thing to understand. Let’s look at the nav menu for an example. Everywhere you place this nav menu, the class of menu and this output control

HTML – Using The Template Editor

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

The next thing we are going to talk about is using the template editor and using boxes in Thesis 2.3. There are three functions of core Thesis boxes. One of the functions is as a container. The container can hold other containers and it can hold content placeholders. The second function is as a WordPress

The Relationship of Boxes to Actual Pages

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

Applies to -

We’re going to talk about the relationship of boxes to actual pages. We just looked at the different types of templates in Thesis 2.3 so now it makes sense to look at what makes up those templates and how that is reflected in the pages themselves. You have the basic Thesis Classic Responsive layout here.

Types of Templates in Thesis 2

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

What types of templates are in Thesis 2? There are two kinds of templates. There are core templates which are automatically applied to the appropriate pages. You don’t do anything to make that happen. You don’t have to intervene or say which template applies to which kind of page. It automatically applies because of WordPress

What is the Relationship Between Skins, Templates and Web Pages?

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

We are going to talk about the relationship between skins, templates and web pages. Some of you may be coming from the traditional HTML web building environment. In that case, a website consists of a whole bunch of documents. Each web page is a single document or documents with other documents imported in. You actually

The Thesis 2.3 Skin Editor Interface

Difficulty Level -

Filed Under Topics - , ,

Listed Under Lesson Subjects -

Applies to -

There’s a very strong connection between this class the Thesis 2.3 class for DIYers and the class for Web Design professionals. There’s a lot of overlap in these three seminars. So I’m not going to re-demonstrate everything that I’ve done so far. We are going to start by taking a thorough look at the Skin

4 Main Concepts You Need to Understand to Effectively Use the Thesis 2.3 Skin Editor

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

There are four main concepts that you need to understand in order to use the Thesis 2.3 Skin Editor effectively. The first is “What is a Skin”. We’ll talk about this more but generally a skin is a collection of templates and a set of styles. And templates and styles are themselves Skin dependent. That

A Beginner’s Guide to the Thesis 2.3 Skin Editor

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

In the Beginner’s Guide to the Thesis 2.3 Skin Editor seminar you are going to learn all of the basics of the Skin Editor. You’re going to learn all about templates and how to edit them. You’re going to learn the basics of the core Boxes and about the link between CSS and your templates. This seminar is intended for beginners, DIYers who need a refresher and there are even some examples of of what can be done in the Skin Editor that will be useful to advanced users. These videos are available to free members.

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