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.
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.
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.