Build Your Own Business Website header image

How to Style Typical Lists in Agility 3.2

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.


Next in this styling the Agility Skin 3.2 for Thesis Theme 2 lesson we are going to look at the styling of typical lists. They can be found here, this is the typical list. It’s the list that’s inside the content area of a page. That’s where the typical list exists.

Where to Find the Styling Options

You can style the typical list over here in Thesis Skin Design and then under font style options and typical list. This typical list has one of those patterns in Agility I was talking about earlier.

Styling Options

You’ll have a choice of the default setting. The default setup has a bullet, the square bullet on the outside with no indentation and no spacing.

Ordered and Unordered List

You have multiple bullet options within both the ordered list and unordered lists. You can use a disc, you use a circle or a square. The decimal, decimal with leading zero, lower alpha, lower Roman, upper alpha, upper Roman options are all ordered list styles.

Font Awesome Icons

Then you have the choice of a Font Awesome icon. If you choose the Font Awesome icon you can choose any one of these sort of normal icons. Let’s choose Thumbs Up! for just a moment so you can see an example of this.

Let’s indent the list and we’ll give it say, 26 pixels. Then we’ll give it a single spacing. Let’s save those font options and come back over to the site and look at it. First, we need to reload the page again. There we go. The browser was caching that. So now you can see what a list would look like with a Font Awesome icon.

You can also choose your own Font Awesome icon. If it come over here to Font Awesome, go down to icons and let’s say we want to use a bathtub. All you have to do is grab this fa-bath. That’s the only part that you need for this. Now come back over here to typical list style and choose other icon.

Oh I see, it wants the Unicode not the typical list style. The Unicode is this right here. That’s the Unicode, so we just put the that code there. Let’s turn off the indent and see what happens there. Then you just need to save the font options. Let’s take a look at the page. And, there you go we now have bathtubs there as bullets.

That’s how you set your typical list style using the typical list function and you can use Font Awesome icons or standard list options for this.

0 Comments… add one
0 comments… add one

Leave a Comment