Build Your Own Business Website header image

Community Library Website Case Study – Part 27, Styling the Teaser Using CSS

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.

This is the twenty seventh in a series of live lessons on using WordPress and Thesis as a Content Management System (CMS). In this lesson we change the display of the teaser subtitle, author name, topics and location. We accomplish this with CSS in Firebug and Web Developer.

Video Transcript

So now we need to take this font and we need to make it larger and we’re going to make it gray and we’re going to make it Arial. So I clearly misunderestimated the time it was going to take us to do this teasers thing didn’t I? I said about a half hour and we’ve been at it for a lot longer than that.

Okay so inspect the element and so, let’s see, edit CSS, custom and let’s see… let’s copy this then we’re going to make this teaser display. And so the first one is byob subtitle and do I already have that someplace? No, I guess not. Okay so copy and we’re going to say control D, byob subtitle and it’s going to have… I think actually, what we really ought to do is .custom .teaser .byobsubtitle. That way, this only will apply to the teasers and then what we want is a… let’s see, font family, Arial and then color: gray…maybe a little darker gray than that. And then font size… let’s call that 14 point or 14 pixel and I think you made it italic too, right? Font style: italic.

Okay, let’s give it a top margin… margin top of 10 px. Okay maybe just 5 px. Well in fact, let’s give it a margin top and bottom of 5 px. Okay and I guess we can just say 0 px. So top and bottom is 5, left and right is 0.

Okay let’s see if we can find a nice dark gray here someplace, just to borrow one instead of what I just said. I don’t know, I guess that’s okay. Let’s see, color gray… let’s say it’s eee… nope. 222? Let’s see, aaa…afafaf. Well, I’m just going to put 6 a’s in there and let it sit there like that for the time being. I hope I didn’t delete anything, there we go.

Okay and so then the next thing is to increase the size of our author. And so, that is again, the same thing really. We’re going to… but instead of byob subtitle, it’s going to be byob author name and it’s not… we don’t need the color gray here. We probably don’t need the margin on this one. And so, let’s see… yeah, I think that looks pretty good like that. Let’s go to our sample for a second.

Yup, okay. Let’s go back and look at our real example…yeah, it’s got decent line. Okay so then we need to style this stuff and you know, maybe all we really need to do with this is just give it a little bit of space there. So inspect the element and that is byob teaser location… no. Yeah, teaser location, okay… teaser bottom is what we’ll do. And so, teaser bottom and 1, 2, 3. And then we’re just going to say what? Margin top: 10 px;

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