In this session we show how to style Thesis teasers so that they display in a single row taking up the full width of the content area. We customize the display using both settings in Thesis Design Options and custom CSS to make the teasers full width.
Right. I’m with you, okay.
What I’m going to do here is change my settings on this page. I’m going to go to Design Options, come down to my Features and Teasers and make my features 0 so all I have is teaser elements. And then come back over and refresh this and now I have teasers. Was a critical part about this the one, the full width teaser?
I quite liked the way that was set up.
Okay. Then we come back over here to this site and refresh it. Actually, I guess, in order to really get something similar to that, I have to change the teaser images too. Let me just go back to that real quickly.
I think the measurements of those teasers was 284 in width and 295 in height.
Okay well, I’m just going to make them 150×150 at the moment.
And it’s going to go flush left with text wrap before the post and page content and we’ll just leave it all like that for the moment. We won’t put a frame around it and hit save and then refresh this. Okay and so the next thing to do then is to make the teaser full width and that’s when we get back to the custom CSS. So we refresh this, okay. And then in order to make this full width… where did my layout CSS go? Okay, come back down here to the bottom. What we’re going to do is we’re going to say .custom and this is .teaser. So we’ll say .teaser and then we’ll say width: 640 px because that’s how wide the column is. Okay so now, it spans the whole distance, right?
Then the next thing to do is to give it background itself so we’ll say background color: white. Okay and then let’s give it margin bottom 20 pixels. Okay, let’s say, padding: 20 pixels. Actually, we need to make its width a little bit narrower, I forgot. So that takes it down to 600 pixels. Okay, there we go. Let’s see, make margin bottom 40 pixels. Okay, we need to also put that body .custom rule back in there so now you can see it scrolls up past, right? So the image stays in place.
It looks amazing.
Now the other thing we have going on here is that you know, well maybe you want to put a little border around this. So you could say border: solid 2 px and then say #888. It’s a dark gray, 888. And so actually, it probably makes sense then to make this 596 pixels because that also takes out a width. So now we’ve got a padding around this and then we want to equalize this space in between these two and the reason why we’ve got a space difference is because one of these things has post box top setting and the other one doesn’t.
And so if we look at our… let’s see, so teaser box top… okay, teaser box and then which one is this? Okay, let’s see. So then div id is that and then teaser box and then teaser box top. Teaser box top has this bottom padding, I think. Padding, teasers box and then teaser box… where is teaser box top? Oh no, okay where is this extra… padding bottom is to… okay. I’m trying to find the one place where we’ve got…
I know the feeling.
Something extra and that something extra is sitting right in that space right there and it’s got to be that top. I just don’t see tops sitting over here saying anything. Menu after content after format after previous after…so many afters… post box, image box, okay… teasers box then post box, teaser box, full width top. It’s the only top I see but clearly, there’s got to be something else in there that is giving us a… that extra padding. Actually, I wonder if I do that… okay, what is it in here? It’s right here and it’s actually not top or bottom. It is teaser… okay, still not there yet.
Will that have anything to do with the design option elements or not?
No. This is an automatic thing that is created by Thesis. You don’t really have any…
Oh, it’s Thesis, not WordPress.
Yeah. You don’t really have any control over it. So if we take margin bottom out of teaser for just a minute, maybe that’s the thing to do and instead, give teaser right top margin of 40 pixels. So if we say .custom .teaser right and then if we get rid of the bottom margin and we just say margin top… you have to spell it right though, don’t you? Okay, that’s better. Okay so here we go. What I did was I gave a margin top to teaser right which then gives you that 40 pixel spacing in between each of those. So this little tiny bit of code, that fixing that background attachment, giving the right hand teaser a top margin of 40 pixels and then just making… then just giving some padding and border and background color to teaser to give you that appearance.
Now these things like the size of this can be set inside of Thesis Design Options and the size of the text and all that kind of stuff you know, all the rest of the stuff that you saw on that other example can be set in Thesis Design Options and can be styled in custom CSS. So for example, I mean, let’s just take this one example and say that we really want more space there. Right now, it has a margin right of 0.75 em. So what we would do is we’d say .teaser format teaser img. Yeah so let’s do that. So .custom .teaser .format_teaser img and then we just say margin right: 20 pixels. Okay, that didn’t do it quite yet so… because what’s really… image .align left… okay, so we had to you know, grab that class for that image in order for that to really work. But now we’ve given ourselves a little bit more space there on either side.
So how close does that come to answering your question?
It’s exactly what I needed to know. The next stage for me is going to be the sidebars.
Well, the sidebars are easy because you can set a background color for the sidebars in the Widget Styles plugin. Are you using the Widget Styles plugin?
No, I’m not.
Okay well, I mean, in the absence of that, if you’re not using the Widget Styles plugin, we could probably do that here too, let’s o back down here and say .custom and then I would say .sidebar. That’s the class and then UL LI which is now the widget because each widget is an LI element inside of UL inside of class sidebar. So we could even say UL .sidebar list which is probably what I would do actually. UL .sidebar list .LI and then again, say that background-color: white. And so now they all have a background color.
Well, these were all styled using the Widget Styles plugin so you’d be better off, in this case, using the Widget Styles plugin to give it the background color of white rather than doing this because it gets applied everywhere. And obviously, you don’t want it to be applied in the footer here. So really, custom .sidebar is not really the right way to do it. You’d really want custom and then you’d say, not .sidebar but say #sidebar_1. That way, it applies to all the widgets in sidebar 1 but not anywhere else.
But you wouldn’t have to worry about that. If you use the Widget Styles plugin to style your widgets then you can just assign it the background color of white. By definition, in Thesis, all those things don’t have a background color. They’re all transparent. But my plugin will let you give them all a background color.
Okay, lovely. No, that’s wonderful stuff. I can’t wait to get started. The other thing I want to… sorry. I wanted to ask was the Web Developer tool that you mentioned earlier. I have a Mac.
It works in FireFox and it works in Mac as well as Internet Explorer. Web Developer is an addon for FireFox.
Fine. I will have a look at that.
And if you first watch the Tools of the Trade videos…
Yes, I’ve watched quite a few last night that peaked my interest. And this morning, I started from the beginning because I need to set it up correctly.
Sure. Well, but I do talk about how to use Firebug and Web Developer in the Tools of the Trade videos and Firebug and Web Developer are two addons for FireFox that work both in the Mac and the PC.
Okay, lovely. Thank you so much.
You’re welcome. So what I’m going to do is I’m going to copy all this code here and I’m going to put it in the forum under…
Oh, lovely. I was going to… I’ve been taking notes but it would be lovely to have all of that.
Yeah. I’m going to put it on the forum here. Any code I use in the Live Answer session, I generally put in the forum under Live Answer code which is here in the first section, Live Answer… Live Question and Answer code.
And I’m just going to add it right now so it’s going to be fixed background image with transparent page background. I’ll just paste the code there.
One last question, Rick, while you’re doing that. Will that only appear on one… the post page with the teasers? It’s not going to appear anywhere else, is it?
The background color?
The way it’s been styled.
Yeah, that only affects… that’s only going to show up in a place where teasers are being displayed. So the homepage, archive pages, that kind of stuff.