Build Your Own Business Website header image

Styling the Content Area

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.


We finished adding content on the landing page in Agility with text and video and now it’s time to work on some styling.

Here’s our example, the video sits here, we’ve got a secondary headline and then we’ve got our text. Finally, we’ve got our DO IT NOW! We can actually style this text separately and that might be the way to fix this.

We probably could make that text smaller than it is here at the moment. If we change that to smaller text, we may be happy enough with it how it looks. But that’s really your choice here, it is to either to change the size of this text or reduce the amount of text so the call-to-action matches the size of the video. That’s just one of the logistical things you have to work with.

Agility Skin Text Area Style Choices

Let’s start by working on that now. We’re going to use our Agility text area styles for that. Agility comes with 3 different text area styles that you can use throughout the site and I’m going to show you how to do that here.

I’m going to assume that we’re going to use custom text area 1. Now in order for us to use this custom text area 1 style we have to be able to add this class custom-12 the section for this text. So in this case we’re not going to change the font but we will change the font size. Let’s call it 15px and the column width is going to be half width.

I don’t think we’re going to have to mess with the margins or font style options at all here. Let’s just see what happens with that. So we’re going to save this style.

If you’re using this version of Agility where you’ve got a Design Mode Section and the styles are here under the skin menu then you also need to come back over and save design options before the style changes that you make can take effect. Some of you may be working on a version of Agility that has all of these options down here and in that case all you have to do is save Design Options.

Apply Styling

Let’s go back over to the Skin Editor and apply that custom 1 style to our template. We’re going to do it right here. I think it doesn’t really matter where we do this but I’m going to do it for the Column Wrapper. It could be for the Column Wrapper or you could just do it for the Area Wrapper. All we have to do is type in custom-1 and this will add that class to that section which will then allow the custom-1 style to take effect.

You can see going down to 15 in font size did give us some additional room here but not enough so I think what we’ll do is just get rid of the second paragraph. Let’s update and view the page. Now that I see this I would get rid of that custom style so we can come back over to Thesis home and then text area styles. Now we can make the text size bigger. Let’s change it to 17 pixels and make sure we save Design Options as well.

Once Design Options has written the CSS we can come over here and now we’ve got “Never too late to fix it”, “Fix it NOW” and “Click Here Now”. If we want to give ourselves a little bit of space between the fix it now and click here we can also come over to our Agility call-to-action styles.

The thing that we have, style one, and the thing that we’re styling is the message. It doesn’t have a heading but it’s got a message. So we’ve got our message here and in this case the typical column width is really one quarter which all right. t’s half of a half for this text and what we really want to do is just customize the margin. No, we don’t want to do that.

It looks like the way for us to get our spacing there is to come back over to the skin content which might seem counter intuitive but come back over the Skin Content. Then go back to our call to action. We’ll just give ourselves some spaces like that. Save the option and come back over and reload.

It didn’t really give us much space well that’s something I’m going to work on. It’s okay but having this give you the ability to adjust the space would be useful. But it works for the moment.

But look at the “Fix It” text here. It’s no longer right. This section title got really small because I added a custom-1 to the area wrapper. That’s not going to work anyway so let’s just get rid of that custom-1. In this case we could always could always re-arrange that but I think the easiest most straightforward thing to do here is come over and get rid of that extra style entirely.

Actually, instead of having custom-1 here what happens if we put it in the Column Wrapper? That might just solve it, yeah that’s all of it. So that’s what we do and then make sure that we apply it to the Column Wrapper not to the whole section and that way this title is not affected by that.

Next we are going to set up the supporting documentation section of the landing page.

0 Comments… add one
0 comments… add one

Leave a Comment