Build Your Own Business Website header image

How to Style Typical Phone Number 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.

Let’s take a look at how to style the typical phone number in Agility 3.2 for the Thesis Theme 2. You’ll find that phone number is up here and the way you style it is over here, under font options just like everything else we have been styling in Agility so far. Then just scroll down to phone number.

What Can Be Styled

You can see that the phone number actually has three different sections that can be styled. It has the container, the link style and the heading.

Container Options

Let’s start with the styling for the container. You can customize the background color for the container. You can give it a background image and, in fact, what you see here is the typical background pattern.

All the typical background elements are also available here. You can customize the top and bottom margin and you can customize the border and add a border to the phone number container.

Link Style Options

The next thing you can do is style the link. The link style is the thing that you click on, the link that the phone will click on if they want to use it to call. So again, it has the typical link type of pattern and that you get linked text decoration, hover text decoration, a link color and/or the hover color.

Heading Options

The final part of that is the heading. The phone number heading is something you can choose to add when you’re setting up the phone number box. If you choose to add a heading, then you can choose the full range of font styles. You can choose colors. You get the whole set of font options or phone style options. And you can change the top and bottom margin. Those are the kinds of changes you can make to the heading if you’ve chosen to use it with the phone number.

Font Size of Phone Number

One thing to note is that the phone number itself takes its font size from the container that it’s in. In this example the font size comes from the fact that it’s in a one half column. That’s how the phone number, the phone number link itself is styled. It gets its size in particular from the location that it’s in so that it matches the size of any other elements that are in it.

0 Comments… add one
0 comments… add one

Leave a Comment