Build Your Own Business Website header image

Styling the Agility Skin for Thesis 2 – Part 4 – Agility’s Built in Background Style Areas

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

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

The next thing we’re going to do is talk about something really interesting which is the background in the Agility Skin for Thesis 2. We have a whole bunch of backgrounds that you can style in Agility.

We have the main body background which is the whole body of the site. We have the header area background and header area page background.

Header Area Background and Header Area Page

Let’s begin with the header area background. If you recall from the earlier presentation, the header area spans all the way across here and header area page spans from here to here. So just for grins, we could take this header area background and give it one color and then take our header area page and say make it white. Sometimes and I’m not sure why this is the case, but sometimes the ability to choose a color kind of disappears around you and essentially what you have to do is refresh your screen here.

We should now be able to pick a color. Oh, that’s really odd. So sometimes it works and sometimes it doesn’t I’m not sure what’s going on there but usually that does work. Anyway, we’ve saved those design options and if we refresh this, you can see the header area background got the green color and then the area page got the white color. So you can set background colors for both the part that spans the whole width of the page and the part that just defines the page width itself.

So we’ll come back over here and get rid of those for the time being now. Okay, you can also do the same thing for the menu so the top menu area background and the top menu area page background again for the feature box so the feature box area background and feature box area page background. Same thing is true for the content area, top footer area and bottom footer area.

5 Custom Background Styles

In addition to that, we have 5 custom background styles and I’m going to show you here in a little while how can they be applied. These ones automatically apply to those sections that exist in the skin. These extra styles don’t automatically apply to anything so you have to assign this background style to a specific element in order to make it actually work.

The other thing about it is that this extra background style has one other design element and that is the height. It does allow you to specify a height for this style whereas all the rest of the background styles don’t allow you to have a height. It doesn’t make any sense to add a height to some of those other backgrounds because the height should be set based on its content not based on some arbitrary setting but there are some instances where you want to do that for this so I do give you the ability to set a specific height there.

0 Comments… add one
0 comments… add one

Leave a Comment