Build Your Own Business Website header image

How to Customize the Post Box in Thesis 2.1 – Part 3 – Style the Post Title

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.

So what we’ve got is our image floating here to the left in this Thesis 2.1 Post Box and these elements essentially doing what we want them to do. There is a little bit of work we have to go to yet but this is all possible because of float, right?

We floated this image to the left so these things jump up and if you want to see what it looks like responsively, this left float works until there’s not really enough room and then the text drops down and it goes vertical, okay?

I’ve been teaching how to identify selectors in Firefox and I think this is probably the best way to do it. Let’s take a look at the elements here. So to start off we’ve got our header with our headline area, we’ve got our link which is our image link. We’ve got this image right here and article is like that.

Identify the Post Title Selectors

Let’s begin by styling the title. So we’ll inspect the element and we are looking at h2 headline. If we look at our rules, we can see it’s our .home_archive.post_box h2.headline that gives it margin and h2.headline is giving us font size and line height.

I think what I’m going to do here is use .home_archive.post_box.h2.headline because that means that the rule that we create here will not affect say the main page titles.

Add the Class to the Title

If we did h2 headlines we might be affecting other things so we’ll just say .home_archive.post_box.h2.headline as our class and we may as well just test this here in our style editor.

We’re just going to come down to the very bottom here and paste that and then I think I want to say font-size:24px. Why didn’t that work? .home_archive.post_box that should have automatically made that smaller right off the bat. Where did font size come from? Ahh, that’s what it is.

Assign Font Size, Line Height and Text Style

For whatever reason it’s h2.headline a okay. Maybe 24 pixels is too small, maybe 30 pixels. Yeah, so we’re going to keep it at that. Then in terms of line height, it is still 53 so we want the line height to be smaller and I think I’m just going to say 42px.

The other thing I want to do is make it all uppercase so we’ll say text-transform:uppercase. Now that gives us a better look at this and 42 pixels is too tall, let’s say 38 pixels. Actually, that’s not firing. Let’s see what’s happening there. Inspector, line-height: 53px is still being applied to that, line-height.

Something is not allowing this. We’ll remove the “a” here and that works. So let’s take line height out of this. I would probably make that 34px.

You asked the question, “Can we limit the text to be kept on the right and not wrapped to thumbnail?” Yeah, we’re working on that here. We’re not there yet but we’re working on it.

I think we’re pretty good with this, font-size:30px and text-transform:uppercase. Let’s see what happens if I do that? No. Obviously I need to say that twice for some reason or another. I don’t know why that is but okay.

Add Margin and Bottom Border

So we’ve got our heading styled, now we want a line under this Title and if you recall that’s called the “headline_area” right here, “headline_area”. Now, come back over to the style editor and we can give our “headline_area” which is .home_archive.post_box .headline_area a right margin.

Say margin-left: and then this is about 220px. Then we can say border-bottom:2px solid and for the moment I’m just going to say 888 as my color. So now I have that style similar to our other style.

Let’s check in with our example here for a moment. I guess it’s just 1 pixel, not 2. So we’ll call that 1px. Now we’ve got that part of it. Let’s see how that works over here on our neighbor’s site. Yeah, it also has the underline so we’ll just leave that alone then.

I think what I’m going to do is just copy this CSS that I’ve written here and I come over to custom CSS and paste that. Save it and see how it looks in Chrome. Okay, it looks fine.

0 Comments… add one
0 comments… add one

Leave a Comment