Build Your Own Business Website header image

Using the Agility Skin for Thesis 2 – Part 3 – Overview of the Agility Skin for Thesis 2

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some protected content!

Watch the opening clip of this video to preview it,
the full video is available to free and paid members.

Now I want to give you an overview of the Agility skin for Thesis 2. This is a version of Agility that’s been customized using design options and we’ll be talking about how to do that extensively today and tomorrow but out of the box, Agility looks like this.

Full Width Framework

It is a full width framework type of skin which means that it has big elements that span from side to side all the way across a browser window no matter how big or how small the browser window is.

You can see that in operation here where we’ve got this background image that spans all the way across and the menu color spans all the way across. We’ve got two different footer colors that span across and if we look at this version of Agility Nude, it’s got some big full width widget areas. So this is a full width style skin and it does not have a clearly defined apparent page.

Carta Skin has Page Width Framework

If you want something that has a clearly defined apparent page then the Carta skin will do that for you. The Carta skin has a border around it and it has a clearly defined page width. Everything inside of Carta stays inside of the page and the only thing that spans all the way across is really the body background and that makes it a page width but Agility is a full width skin.

Basic Page Styles

Agility has some basic page styles so it starts off with the front page.

Front Page

The front page is a full width style page which means that it doesn’t have any columns in it. It’s got a full width widget area or feature box area here, it’s got a full width text with larger text. Then there is the header menu and top footer and bottom footer which are the same on all pages.

Typical Page

Then if you go to a typical page it has a 2 column page. You can see the header and the menu are still the same but now you’ve got a content column and a sidebar column that can take widgets and other things. Then below you end up again with the same widget configuration with top footer widgets and bottom footer. So that’s the front page and a typical page.

Posts Page

The posts page is laid out very similarly. Well, it’s got the 2 column layout to start off with but it also displays a thumbnail image for the post and it has the post excerpt with a little Read More button and an indicator of the number of comments that exist for each post and it’s setup to display that way.

Single Post

If we come over here and look at a post, this is the single template and the single template has a column width. So again it’s 2 columns wide but the featured image is designed to span the entire width of the content column with the title at the top, the author and categories and then the content down below that.

It has post navigation so you can go back to the previous post and look at that. If you’re looking at the comments, it has comments then you’ve got the comment form that looks like this.

If you’re not logged in the comment form looks a little bit different so let’s take a look at that. So if you’re not logged in then you’ve got your name, email, website and your comment to submit.

Custom Templates

It also has a couple of custom templates. Let’s take a look at the Finished Projects page on this site since it’s using a custom template.

No Sidebars

One of the custom templates is the no sidebars template and it essentially just provides you with a full width content area that puts the full size featured image at the top and then a full width content making all the headings and the text a little bit bigger so it reads better on a full width page.

There’s one other custom template and that’s called the page template without social media. Now if we come back over here, you don’t see any social media buttons on this page yet because we haven’t activated the DIY theme social media buttons but when they are activated they show up on this page.

No Social Media

It maybe the case that in some context you don’t want the social media buttons to show up on a specific page. If you come over here to edit page and under the Thesis skin custom templates, you can choose the page without social media and that’s exactly the same as the typical page except that it doesn’t have any social media buttons.

We’ll come back and look at that once social media buttons have been added to the site but those are the two custom templates that come with it. The no sidebars custom template and the page without social media.

Agility Nude Resources

Agility does have some resources to help you navigate your way around it. I call them cheat sheets.

HTML and CSS Cheat Sheets

I’ve got an HTML cheat sheet and a CSS cheat sheet. Actually, in the very near future what you’re going to see here is a cheat sheet for design options, for content options and for the HTML layout but at the moment those are combined into these two cheat sheets.

Tom asks, “Are the social media buttons a feature in the Agility upgrade?” Yes, this version of Agility does have styling for the social media buttons and does include an additional box which we’ll talk about in a few minutes. I don’t think it’s going to matter to you Tom because essentially you’ve already solved the social media button problem that this version of Agility solves. But having said that, it is a feature in the new version of Agility and you’ll see that here explained in just a minute.

Anyway, these cheat sheets have a ton of information about the templates, how the templates are laid out, what those different parts of the templates are. Then how each of these colors affects different places on your site, how different design options affect different parts of the page. These are the kinds of things we’ll be talking about as we go through the system.

Agility’s Responsive Nature

I forgot to mention that Agility is also responsive. So if you change the size of the browser window, Agility responds to those changes. So again, when things shrink down Agility responds to those changes so it looks good on any kind of mobile device.

0 Comments… add one
0 comments… add one

Leave a Comment