Build Your Own Business Website header image

Patterns in Agility 3.2 Skin Design

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 we’ve talked about how the Agility Skin color scheme system works we’re going to talk in more of a broad brush way about all the rest of these Skin Design Options.

Agility has patterns. It it has patterns in the page layout. We talked about the feature box area, feature box area page, content area and content area page. Well, those are patterns in the layout of the page. It also has patterns in the groupings of style options.

Patterns and Where They Are Applied

Once you understand those patterns you have half of the task of understanding how Agility Skin Design Options work. The other half of understanding that is understanding where they are applied. So we’re going to talk about both of those things.

I want you to get that there are patterns that get repeated over and over and over again in the Skin Design settings.

Font Pattern

For example, this is a pretty typical font pattern. You’ve got a font family, a font size and font color. Font colors always either pick a color from your skin color list or you can enter your own color. A Font pattern doesn’t always include everything but generally includes font weight, font style, font variant, text transform, text align, letter spacing and line height.

They don’t all include all of these all the time but fonts do include some of those all of the time. That pattern will just become familiar to you and we won’t need to talk about the pattern over and over again because it’s the font styles. You can set font styles here. That’s one pattern.

Link Pattern

Another pattern is the Link Pattern. In a typical link style or link pattern there is text decoration for both the link state and the hover state and then it has a link color. Again, here we are looking at a color pattern. The color pattern has either the color from the color palette or a custom color and then you’ve got your hover color and again from the color palette or a custom color. That’s a typical link pattern.

List Pattern

There’s a typical list pattern because there are lots of places for us to set lists. A typical list pattern sets a list style, a bullet position potentially indents the list and has list item spacing. That is a space between items on the list.

Sometimes in your list style you may be choosing a Font Awesome icon. In that case you have a choice of either some of the built-in icons that I have or you can add your own icon instead. That is a list style pattern that you’re going to see several times today.

Background Pattern

The background pattern is a massive pattern. Let’s just look at our Extra Style 1 Background Pattern. The background pattern has a background color. Anytime you’ve got a background color you can choose it from your list or you can enter your own color. You can also set an opacity. If you want that color to be transparent so you can see what’s behind it, you can add an opacity. This pattern exists every time you’ve got a background color.

Background Image

A similar kind of thing happens with the background image, you can either choose your own custom background image or you can pick one of the background images that are saved inside the skin. It’s always going to have a custom background image position. It’s always going to have an image attachment and it’s always going to have an image repeat. That is the typical background image setting.

Fixed Heights

Sometimes the background will allow you to set a fixed height although that’s rare. Most of the time there’s no setting of a fixed height in the background but this is one instance where it exists.


Sometimes the background allows you to add padding. Sometimes it’s just top and bottom or it’s left and right. Sometimes it’s all four but sometimes it doesn’t have any.


Sometimes it allows you to add margin in the same way and it almost always it allows you to add a border. The border is also a pretty big style because you can choose a border style, the width, color, radius, drop shadow color, drop shadow offset and blur, and a shadow color capacity.

This border setting exists pretty much with all backgrounds and you have pretty much the same border styles all the time. So again, that’s another pattern.

Menu Pattern

We also have a Menu Pattern. The menu pattern has the following color options.

  • Text color
  • Link text color
  • Link background color
  • Hover text color
  • Background color
  • Current text color
  • Current background color

Again every time you can choose a color, you can choose from the list or you can put your own in. If it’s the background you can add an opacity to it and so you see that color pattern existing inside the menu pattern.

You have elements of the link pattern in here because you’ve got link decoration and hover decorations.

You’ve got padding. You can choose a font family, a font size and now you’ve got the rest of your font styles from the font pattern. The menu pattern actually borrows from these other patterns and aggregates them all into one large pattern.

Button Pattern

Then finally we have a Button Pattern. In a typical submit button there is font style options with lots of other font style opportunities. It’s got color and now you’re looking at the part of that menu color system where you’ve got linked text link background and hover text hover background.

Again, every time you pick a color you can choose from the set or you can choose to enter your own any time. If it’s a background color, you can give it an opacity. It’s got a full range of padding.

It also has something that’s completely different which is really experts only. So don’t play with this unless you know what these are and how to use them. But it does include the display property which let’s you use the display property to manipulate the way the buttons work. And then here’s the big border style again so you’ve got all those border elements.

Those are the patterns and you’re going to see those patterns over and over again. I want you to understand that once you get those patterns down, you’ll know what you can accomplish with various elements.

0 Comments… add one
0 comments… add one

Leave a Comment