Build Your Own Business Website header image

Part 21 – Set Up the Feature Area Content Styles

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.

The last time we met for this convert an HTML website to Thesis 2.2 we set up the page templates and got the menu styled. Now what we want to do is style this content section. It will look reasonably close to this.


Some of these styles we can take from the Thesis Classic Styles. Some of them we don’t have to use this new system, we can use the Skin Design for. That’s the case with the first one here, the headline.

We chose the text color last time but now I’m going to pick a font size which is 27 pixels and save those options. Come back over here, reload this and I’ll reload this as well to make sure that we don’t have any change here.

Using the Golden Ratio Typography

Probably the reason we don’t have any change here is because Thesis Classic uses this class called GRT. That stands for Golden Ratio Typography. The GRT is a class that Thesis classic uses to style text.

In order for GRT to kick in for us, we actually have to add that class to our box. The typical thesis postbox has GRT added to it but this is a query box and is not inside of the post box. The post box is down here so we need to add to the class GRT to this column.

To do that just click in here to edit it on the front page. Come to our featured area here, column 2. What I’m going to do is add the class GRT to that and save the template. Come back over and look at it and now you can see that the text adjusted to match the styles that we created earlier.

I’m going to get rid of this edit button which also kind of irritates me. So back under featured area column 2, featured content. Oh I must be inside the headline area in the byline and there’s the Edit link and I’m just going to get rid of the Edit link altogether.

Font Style Options

Now when we look at our example it’s bold and it’s centered. Let’s go over to our additional styles and go to our page titles. This is under Thesis Classic style options. Go to page titles and we’ll check this box to show the font style options.

Our font weight will be bold and our text align will be center. And I want to change the line height also to 32px because we’ve got the line height for the larger font size. Having those things in place I can save Thesis Classic styles. Let’s come back over and take a look at this and now we have it centered and bold and all the rest of that.

Styling the Text

The next thing we have is this block of text. Let’s take a look at this. We’ve got this section of centered text that has a larger font style which is 21 pixels and it’s got font weight of 700 which is bold. So we want to take this text which has a pretty large bottom margin to it and style it separately.

Add Text Styles

The way we’re going to do that is to use some of the custom styles available. We’re going to start that off by coming back over to our front page template and giving ourselves a class in this area. So we’ve got GRT and I’m going to add emphasis.

Now we have two classes there and with that done I can come over here to these different style options. Go to text style options. I’ve got an unnamed text style which means I actually have to come back over the boxes and go to style manager. I’m going to add text style and for the time being we’ll just add one text style.

Emphasis Paragraph

Actually, we’re going to do two because we’ve got the telephone text style also. So this one is going to be emphasis text and this is for emphasis paragraph text. We’re going to make a little bit of change in the media queries for form phone portrait. So we’ll include that style but otherwise we’re going to leave it alone. Save that.

Telephone Text

While I’m here the other one we’re going to work on is telephone text. And this is for the front page telephone. We won’t add any media query to that for the time being, we’ll just see how that shapes up. So we can save that.

List Text

And while we’re at it we will add the list style too. So we’re going to create a list style. I think we’re only going to need one of those so and the name of this list style is going to be emphasis list style. Again, this is on the front page clinic locations. It just helps me remember where I’m using it and we’ll save that.

Additional Styles-Text Style Options

Now that we’ve got some things to work with we can come back over here to additional styles and scroll down to text style options. Look at our emphasis text. We’re going to call it dot emphasis p. That’s the emphasis class and it is going to be the paragraph tags inside the emphasis class. The font family is fine, the font size was 19.

Are we happy with the font color? I guess in this case we want this dark purple font color. So use that dark purple font color. If we look at our color scheme there’s our dark and then we want those additional font style options.

We want it to be bold. We want text align to be center and right now it’s got a bunch of bottom margin, Let’s give it 0 bottom margins, 0px. When you use zero you have to add px to it because if you add just zero PHP thinks that means false or empty. It doesn’t read a zero all by its lonesome like.

Let’s save those text options now. Come over here and reload this. and reload the CSS file. That’s text styles down here and that’s working. We’ll reload this again and there we go. We’ve got all of that and really that looks about right except for our phone call.

Actually, “helping you live a better life” we want to change that out too because that’s supposed to be a larger one. I think needs to be turned into an h2. It’s a different page, isn’t it? It’s on the above the fold area. We’re going to make that into an h2.

Add a Box Around Text

While we’re at it I’m going to put a box around this and I’ll do that box by saying div class equals center-box. Then I’m going to add another class telephone, div class equals center-box telephone.

So those are my two classes that I’ve added this div and then down below this I’m going to add another, I meant a closing div. I’m also going to the very same thing here, I’m going to wrap a box around the list. So it’s going to be div class equals center-box.

Obviously I’m not going to add the class telephone. This will let me create a reusable class or container for center box and then additional styles for the telephone box.

Sub Headlines

Let’s update that and now we can go back to our site. “Helping you live a better life” that now needs to have its new style added to it. We’ll start off with sub headlines and again this is going to be bold and text align is going to be center.

Save those options and then we come over to skin design. Let’s grab that color there and then we can go here to sub headlines and the only thing we want to do is set the color. Save design options there, reload this, reload our CSS file and we’ve got that.

Clinic Locations

And then we’ve got our clinic locations, what happened to the clinic locations? Let’s go back over to pages and see if we can figure out what happened to them. It’s there but it’s not there, isn’t that funny? Let’s update that and then this and see if it shows up now. Nope. Why are we losing the text? We are missing this div and I’m missing my closing double quotes there.

Make Telephone Number Clickable

My mistake. It’s crazy how those little types of errors can mess everything up. Let’s reload this again. You can see this is starting to come together. Now for our free telephone consultation. That has a box around it with not quite as much space and it’s kind of centered in the space. Also I think this should be this should be linking.

The first thing we’re going to do is come to this telephone. Switch over here, grab that, add the link. Here’s what a link tag really looks like. It has tel: and then it has the + for the global designation. It has the country code, which in our case is the UK so it’s 44. Then the rest of the number.

We need to add the +44 to this telephone number in order actually make it clickable. So we are going to say tel: and then the plus symbol 44 and then the rest of that number. There are no spaces, it’s going to be just straight numbers. We’ll apply it.

Add Container Styles

Now that we’ve got that as a link, let’s update it and come back over to our style. That’s additional styles. We need a couple container styles which means first we need to come back to the style manager.

We’re going to create two container styles. The first one is a centered box and this centers a box in the space. I don’t think we need to do anything with this, we’re just going to leave it like that. Hit save.

Next we’ll name the second one and that’s going to be telephone number. It’s going to have a description of this container and this is the wrapper for the telephone number. And I don’t think we need any media queries for that so we’re going to save that.

We have a couple of containers styles so now we can come over here and set the them up. Our centered box container style is going to have the selector dot center-box which is what we used. We’re not going to do anything with that but we are going to say this is 300 pixels wide.

Our box sizing will be border-box, we’re going to customize the margin and we’ll have 0px. We don’t even have to worry about the top and bottom margin. All we have to do is say auto for the left and right margin and that will center our box.

We don’t want to do anything about the padding on this. We’ll leave that alone for the moment. So center box. Save that and let’s see what we end up with here. Let’s reload our CSS file then reload this. And that’s a 300 pixel box. Well maybe we want to be a little larger because we’re not quite getting everything in here.

Let’s see what we get if we do that center box and make it 350. That messes up the centering of the other ones so we are going to leave the center box alone but we’re going to go to our telephone box.

Telephone number and it will be dot telephone and we’re going to change that width to 350 px. We’re going to make that content box. We customize our padding so that we have five pixels everywhere and we’ll add a border, solid and width will be 2 pixels. Border color will be purple so let’s grab our color scheme. I’m going to use the lighter color around that.

We don’t use a border radius or a drop shadow so I think we’re good here. It’s going to automatically get its margin from the center box so let’s save that container. This gives us an all-purpose container and we have of customized version of that container, right?

Let’s reload this and there’s that. Let’s give it a bottom margin though of say 36 pixels. We also don’t want to do that. Actually I think I can set that text align to be center also as I recall… no, I can’t. I have to do that width, is that right? Okay I was going to add that to this but evidently I didn’t, so there’s no text alignment set inside of containers.

So did I say we’re going to have a telephone text style? I think I did, so this will be dot telephone. Let’s take the font size down to 17 pixels and 0 px. We’re centering it and making the line height 24 pixels. Save our text options. And there we go.

Although I don’t think the bottom margin works there. So go down to my container styles, telephone, margin bottom 36px. I definitely should have a margin bottom there. Telephone, margin bottom… I see I have to take out that 0px there or make this apply to telephone p instead of telephone.

Let’s go down to our text and delete that no margin. We’re good because it’s getting its bottom margin setting from emphasis anyway. Okay, free telephone conversation, clinics in and that is now centered.

Telephone Number Layout

Kurt asks “if the telephone number would only be used in the local situation, is the plus and the rest necessary?”. Well, it’s not strictly speaking necessary but it is proper procedure and you may get HTML errors if you don’t have it. If you check your site against errors, I believe that that phone number without the plus and without the 00 for US or 44 or whatever the number happens to be will show. if you don’t do that then I think that standards checkers will build in but otherwise no, it’s not necessary.

List Style

The last thing to work on here is our list style. Looking over here we’ve got this list style with these triangles and she’s linking this off to the clinic’s page. We could do that too. So we link this off to the clinic’s page and make this list style like that and we should be good to go.

Let’s go back to the page and edit it. Make that a colon clinics in, link in a link, click the link. Let’s search for our clinic locations page. Okay use it, update this.

And then let’s go back over Thesis where we need to create that list style. Go to the style manager. Oh no, I did make a list so we can just go to additional styles. Come down to our list styles and we’ve got this emphasis list.

Font Awesome Icon

Say dot emphasis. That’s the class selector that we’re using here. Our list style is going to use a font awesome icon. We’re going to choose Arrow, Double Angle, I don’t think any of these actually are matched so we’re going to add our own icon.

Come over to font awesome. Go to icons and let’s look for a triangle. We could use Caret, that’s close. Let’s take a look at some others. Oh, play, excellent! We’re going to use the play icon and it has this unicode number f04b. All we have to do is copy that unicode number, come back over here and put that in this. Let’s give ourselves single spacing on the list items and save that.

In order for this to work we have one more thing to do and that’s to come back over to the style manager and load the font awesome styles. If you’re not going to use these font awesome icons then it doesn’t matter you don’t want to load this. But if you’re going to use font awesome icons, you can save this and it will add all of the font awesome icons to the site.

You can then use the font awesome icons in any way a font awesome icon can be used. It doesn’t just have to be used inside this context. You could add the home button to a menu item for example. In fact, we should just do that just for fun.

I’ll show you what that is. Come back over here now and go to home and in this case we’re going to add it to the menu. We need it just like this. Grab that and then we can come over to appearance and menus. Put it right next to home and now let’s reload this to make sure we get our font awesome icons there.

I can just get that class name. I forgot I have this setup so that the class name has to be applied to the the list item. So we come back over two pages and edit the front page. Then flip back over to our test and say ul class equals emphasis and now we’ll probably get what we’re looking for. Maybe we should reduce that line and make the center box a little bit wider than 300 pixels.

Come back over to our additional styles. Emphasis style, we are going to have no spacing and see how that looks. Again, let’s reload this. Okay here we go. We just need to make that box a little bit wider rather than 300. If we make it 320 it will fit in there, just fine.

Actually, that’s probably true for this too. So let’s come back over here to our centered box, make it 320 and for telephone number we’ll just get rid of the width. Save our container styles, reload the css page, reload this and there we go. We’ve got most of the content that’s above the fold centered and structured.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 comments… add one

Leave a Comment