Build Your Own Business Website header image

How to Style a Block of Content in Thesis 2.1

Difficulty Level -

Filed Under Topics - , , ,

Listed Under Lesson Subjects -

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.

In this session we show how to style a block of content in Thesis 2.1 using plain ordinary HTML and CSS. We demonstrate how to create an author box where we wrap the text in a div, give it a class, put an image in that div, float it and then add some styling to make it the right colors. We also show how to wrap the text in a p tag to provide the padding around the text but not around the image and make the image float left so that the text will sit beside it.

Video Transcript

Rick: So you want to do a little layout like this without using tables…

Member: Yes, because I understood that tables is not the best for us to consider with responsive design, correct?

Rick: Yes, plus doing this kind of table would be poor practice anyway.

Member: Yeah, well, I don’t think the old one is exactly the best looking but the goal would be to get a picture and some kind of text in a colored-looking box, or in a colored-looking area I should say.

Rick: So, what you’re really going to do, you’re just going to use plain ordinary html and CSS in order to accomplish this. I’m getting ready to teach a class called “Introduction to html for WordPress users” and this is just about like the poster child for that class. I’m going to go ahead and demonstrate it for you so you can see what I’m talking about.

First thing you want to do here is have a copy of that image. So I see that you’ve got it as a background image and what we’re going to do is just download it. The way this is going to work is we’re going to wrap this text in a div, put this image in that div, float the div left and then add some styling to make it the right color. So I’m going to copy that text and demonstrate that in here in this Carta.

Member: Yeah, that’s where I’m going to be putting it in, a Carta site.

Rick: It doesn’t matter, you can do this the same way in any Thesis theme and essentially, the same way in any theme. Whether it was Thesis or Generis or whatever except that you’ll write your CSS in the Thesis code editor. Besides that, it will be exactly the same.

The first thing that you’re going to d… I think let’s get down here at the bottom and we’ll say <div class=”author-box”> and then we’ll paste that text that we’ve copied and close out the div </div> Okay, so we’ve got an opening div, we’ve got Kimber’s submission and we’ve got the closing div.

Then right at the beginning, before Kimberly’s submission, we’re going to click add media and we’ll just upload that file. We’re going to align it to the left, we’ll have it not link at all, we’ll use that full size image and we’ll insert it to the page and so now we should have the image sitting there right beside the text inside this box. So, if we update that and then view the page, we already have now the image sitting there beside the text.

Member: Okay.

Rick: It’s exactly the same way this image sits beside this text except what you want to do now is add some background color in this, right?

Member: Right.

Rick: So, what we’re going to do then is add that background color to this thing called the author box. The one thing we have to do with the author box is also clear its float so that when we’re done with it, it’s going to go all the way down here to the bottom. I’ll show you what I mean by that, but anytime you have a float in this kind of content, you also want to clear it. So we’ll come back over to our dashboard and to our Custom css and let’s say .author-box{, that’s the class we just created right?
Member: Right.

Rick: And let’s say we want this as our background color, background-color:#DAE8D5; so that’s our background color. Then I want some padding, and I want say, 20 pixels on the top, 20 pxels on the right, none on the bottom and none on the left – 20px 20px 0 ;

And then I’m also going to say author-box, this is when we clear the float, .author-box:after, and then we’re going to come over and take the clear fix variable {$x_clearfix} that’s included in Carta…

Member: Okay

Rick: And then save our custom css. This clear fix is included both in Carta, Agility, Thesis Classic and a couple of others. Okay, right now it’s got a bottom padding which we don’t want. Actually, now that I say that, I don’t really want the padding here, what I really want is around the <p> tag. So, I’m going to take that padding out. I don’t think it’s going to look quite right yet.

Member: Well, the old site… I mean, it doesn’t have to look exactly like the old site, just has to get sort of the same concept.

Rick: Right. Okay, we also want to get rid of the bottom margin on that image. That bottom margin is coming from .post_box .alignleft, so post box, author box align left.

So .author-box p{ that’s going to be where our padding goes. padding:15px 0 0 ; And then our .post_box, .author-box, .align-left:{margin-bottom: 0px;}

Okay, so now we have .post_box, .author-box, .align-left:{margin-bottom: 0px;} Now we should have exactly what we’re looking for. Oh align left… I assume that would give us a <p> tag there and it didn’t. So we’ll give it our own <p> tag. Did it retain the <p> tag?… It did.

Okay, but I still have my margin bottom. So .post_box .alignleft, but what I’ve been saying was, .post_box .author-box .align-left:{margin-bottom: 0px;}

Well, obviously I still have… I have that colon there that was killing it, I’m afraid it is… there you go. So, now you have a color box that is the same height as the image or as tall as the text depending upon which way you want to go. I mean, whether or not the text is bigger or not. And you’ve got the colored backgound, you’ve got the image sitting in here and so we’re just going to go back and review that for a second. The way this worked was, we wrapped that in a div and give it a class. Because the image already has that light green wrapper around it, we don’t want a different background color there so we want the colored box to be exactly the same size as the image and we don’t want any padding around that image. So we wrapped our text in a <p> tag so we can still provide padding but we provide padding in the p and not the div.

Then we make this image here float left. Making the image float left means that the text will go beside it, wrapping the whole thing in a div will give us the green color too and wrapping this section in a p, gives us something to give this padding here and here too without putting it around the image.

Member: Could you copy that custom css in the chat window so I can copy?

Rick: Absolutely. There you go. Then what we do is give that wrapping div a background color, we give the p inside the wrapping div a padding, we removed the default margin from the image and then we clear the float so that the box is the same height as the image. Those are the four parts of making this thing work. Now, from now on this is going to be perfectly responsive. As you can see it gets smaller and smaller and at some point there’s not enough room for everything to exist…

Member: It’s stacks…

Rick: And so then it stacks. Exactly.

Member: Okay, perfect. Thank you so much.

Rick: You’re welcome, anything else?

Member: If you wanted to do that same concept where you had the box colored around this text, you’d do the same sort of thing, you would just setup a, instead of now it being called an author box, you could call it something else and create it the same way, correct?

Rick: Yeah, it doesn’t matter what you name it, you could name it fishsticks and all you have to do is apply the class of fishsticks to it. I mean, we could do the same thing here, the only reason we’re clearing the float on this, is because we were floating the image. If you weren’t floating the image, you wouldn’t have to clear the float.

Let’s do a simpler one. It’s not going to be author box, it will be attention. <div”> Okay, this is a simple one and now we’ll come over here and we’ll say, .attention{ and then we can say background-color:light-yellow; padding:20px; font-style:italic; } and then refresh this.

Obviously light yellow is not a color but… I thought light-yellow was a color but… There we go.

Member: Oh, okay.

Rick: And you could say, margin:24px 0px; so you have a big top and bottom margin. You can add any style that you want to this…

Member: Right. Could you take that code and copy it over for me too, please?

Rick: Uhuh. And in the time that get me to get this class prepared is, if you search the site for styling blocks of text

Member: Okay…

Rick: You know I’ve got this in a few places…

Member: Okay, I’ll go in and look at some of those.

Rick: I’m going to go ahead and re-teach this but you can see where it’s coming from because I do…

Member: Right.

Rick: This is taught in Thesis 1.8.5, so obviously your css files are going to be in a different place but the whole…

Member: The concept is the same.

Rick: Yeah, the concept is the same. Css is the same.

Member: Okay, that’s very helpful, thank you very much!

Rick: You’re welcome. Okay, you have a good day!

Member: You too.

Rick: Bye, bye.

Member: Bye.

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