Build Your Own Business Website header image

Styling the Agility Skin for Thesis 2 – Part 5 – Agility’s Built in Background Style Elements

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.

Now that you understand how the background style areas work in the Agility Theme for Thesis 2 that brings us to the style elements that exist in these background styles.

Background Images

Obviously right off the bat you had background color but you can also assign a background image.

Position, Attachment Property and Repetition Property

If you’re assigning that background image you can give it a position, you can set its attachment property and you can set its repetition property.

Padding and Margin

You can also add top and bottom, left and right padding to these backgrounds and you can also add top and bottom margin. It doesn’t make a lot of sense to add left and right margin to these kinds of backgrounds so that option is not available.

Border Styles

Then you can also add border styles. You can select from the drop down list for the border and then you can set width, color and border radius.

Drop Shadow

You can also set a drop shadow and if you’re setting a drop shadow you can set offsets and blur. I’m going to show you what that means here in just a minute but if you can always read up on those kinds of things at w3schools. Anyway, it’s just a function of defining how the drop shadow looks.

Style the Top Footer Area Background

So the first thing we’re going to do with this is to take our top footer area background and change it to that dark red color, 842000. So we’re going to set top footer area background color as 842000 and then we’re going to add a drop shadow to the top of that section.

Drop Shadow, Horizontal and Vertical Offsets

If you look down here, this is light little top drop shadow along at the top. We’re going to do the same thing here with that. That drop shadow color is going to be aaa and then it’s going to have 0 pixel horizontal offset, a -3 pixel vertical offset and then a 3 pixel blur. This makes the drop shadow actually go vertical, that’s what that -3 does.

The horizontal offset is offset to the right in the positive direction . So if you gave it a negative horizontal offset it would offset to the left and the vertical positive offset offsets to the bottom and the negative offset offsets to the top.

So any of the designations for drop shadow offsets and blur can be used here. All we have to do now is save our design options. Come back over and refresh this and now we’ve got the green bottom still and the red top and there’s that little drop shadow now because of our changes.

Add a Border Under the Menu

I don’t know if you notice it on this menu but, there is a little border right here under the menu. So what we’re going to do is create that here and we can do that using the top nav menu background style.

So we’ll take our top menu area background and we’ll come down to our border style. It’s going to be solid, the border width will be 1 pixel. If we just enter a 1 here, what’s going to happen is it’ll have a border all the way around it. Of course, we don’t want a border all the way around it, we just want a border below it.

Border Width

So this will take the standard designation for borders which means that you set the top border width, the right border width, the bottom border width and the left border width. If we said 0 and 1, it would be nothing on the top and bottom and 1 pixel on left and right.

If we just said 1, it would be 1 pixel all the way around but this is 0 pixel on the top, 0 pixel on the right, 1 pixel on the bottom and 0 pixel on the left.

Border Color

Now, since we set the border width that way, we can go ahead and set the border color and we’re going to go 888 here. We want kind of a grayish color but since it’s only 1 pixel it shouldn’t be too light or we won’t see it.

Let’s go ahead and save that. Save design options, reload it and we get a little tiny border there. Now that I see it, instead of a solid let’s try a double border. Back to border style and do it as a double. That’s a little more subtle. Maybe 2 pixels is right. There we go. So we’ve got a little bit of offset there, it just sets the menu off just a little bit and gives a little sense of depth.

0 Comments… add one
0 comments… add one

Leave a Comment