Now that we’ve covered the skin content options of the Agility Skin for Thesis 2 the next thing we’re going to take a look at are the skin design options.
Changing Theme Colors
The very first thing that Agility does is it takes advantage of the Thesis ColorScale so you can always simply change out a color here. The ColorScale affects these but does not affect the primary text or the secondary text. I’ll show you an example.
Let’s copy that and make that the secondary text color and then let’s make this one slightly darker color. When we save design options, we’re going to end up with a completely changed color scheme.
There are a number of things you can do with that. Just like in any other version of Thesis you can always swap something out for its complimentary color and change things around a bit and you can also just use your own colors. You don’t have to use the color scheme that comes with Agility at all.
You can just pick your own colors. Let’s do that and end up with our own color scheme here. Let’s see what happens if we pick this scheme. We’ll save that and take a look at the site with a new color scheme. As you can see in skin design options you have a lot of control over the colors.
Layout, Fonts, Sizes & Colors Section
The next thing we have is this extended section for Layouts, Fonts, Sizes & Colors. We’re going to talk about this extensively tomorrow but you have a lot of things that you can change especially for things like the site title.
For example, you can change font style, font weight, the text alignment, letter spacing, text transformation and more. You can setup your headlines, your subheadlines that’s your h2s, your h3s. You can do that all separately.
You can style the submit button and that includes background colors and link colors and padding and everything else so you don’t have to just use the style as it comes. What I mean by submit buttons are things like these. You can change them up using the settings here.
Styling Widget Areas
There are extensive widget area styles that you can use. You can style the main sidebar widget areas, you can style the footer widget areas, you can style a header widget area if you’re using header widgets.
Then there’s also the ability to style a supplemental widget area. We’ll talk again extensively about styling widgets in Agility tomorrow but in any case, all of these areas can be styled independently simply by clicking on it making some changes.
Styling the Main Menu and the Submenu
One of the things that is really unique I think to the Agility Skin and to the Carta Skin are the extensive menu styles. This gives you control over the main menu in a lot of ways but then you can also style the submenu entirely differently.
In fact, if you really want to drill down and add things like background images to your menus or borders or drop shadows then you’ve got these supplemental styles that you can add.
All of these extra styles only apply to the main menu or main submenu. If you put a menu in the header then you have sort of the typical menu styles that you can change.
It also allows you to style the footer menu entirely independently and then if you’re going to have even another menu like a secondary menu, you can also style it.
So you really have essentially 4 different styles of menus that you can create on your site and the main menu which most people are using has a huge range of styles that you can apply.
Setting Up Backgrounds
The same thing is true for backgrounds. For example let’s look at the main body background for a moment. You can set a background color, background image, background image positions and attachments. You can do that same thing say for the header area background and you have more controls.
The main body background can’t have things like borders and radiuses and things like that but all the rest of the backgrounds, you can have border radiuses and drop shadows and borders and padding and background colors, background images.
One of the reasons why I wanted you to understand the difference between the area and the area page is that you can style them independently. So you can style the header area one way and then on top of that you can style the header area page another way.
So you have a ton of customization options available to you. You have it for the main body, the header area, the top menu area, the feature box area and that’s on the front page for content area, for top footer, bottom footer.
5 Supplemental Background Styles in Agility
Then this version of Agility provides you with 5 other supplemental background styles. Let’s say you wanted to create more areas on a template, then you can take background style 1 and again, it has all of those kinds of things that you can do to it.
You can set that style for background style 1 and then give that area the class style 1 and then all of these things will style that. You can also use this for styling the backgrounds of widgets and we’re going to look at that tomorrow when we are styling widget areas.
Specify a Height in Background
One thing that the extra styles have is the ability for you to specify a height in the background. If you’ve got a bunch of widgets with the background color or some kind of background and you want them to all appear to be uniform in height then you can set the height in this background. Up until this version of Agility, if you wanted to specify a height for that style you had to do it in custom CSS.
5 Background Styles
Also before today, Agility only had 2 supplemental or extra background styles and now we have 5. In addition to that, if you started with using the very old version of Agility Nude and you have not fully upgraded it, you can continue to use the old Agility design options system for styling those areas.
Custom Media Queries
We also have the custom media queries. Custom media queries allow you to use some custom CSS on your site and then be able to modify that custom CSS in specific responsive conditions. This is way beyond the beginner level task but I still want you to know about it.
What this does is it inserts your media query information so if you write some media query code or if you write some CSS that you want to apply to tablet, landscape devices, etc, it’ll get placed in the right media query.
That’s really what these custom media queries are for is to give you a place for you to add your own custom CSS to these media queries. This way the custom code that you add gets located properly in the media query.
Those are the skin design options and there are a ton of things that you can style using those skin design options. After you make your changes and save those changes are going to show up.
Example: Customize Header Area Background
In fact, what I will do is give you one example of that. Let’s go to the backgrounds and look at the header area background. Actually, let’s make sure we have an image for it first. So we’ll come over to the media library and add new. We’ll select the background image and I’m going to this one. Open that, click edit, copy it, come back over to skin design.
Then I can come to my background, say my header area background, and I can put the URL for the background image there. In this case, we’ll leave the background image position alone for the moment and attachment alone.
We’re going to repeat in the y-direction only and let’s give ourselves a little bit of top and bottom padding, say 50 pixels of top and bottom padding. And let’s take care of repeating. I’m at repeat x, repeat y is down, repeat x is across. I’m at repeat x, repeat y is down, repeat x is across. We say okay to this and save the design options and refresh it.
Let’s just reduce this top padding a little bit. Header area background and take the top padding down to 20 see what happens with that. Hopefully, you’re starting to get the feel for the kinds of things that you can do with this. You can customize just about anything on the site using those kinds of background styles.