In this session we show how to align text and images in a text widget using CSS rather than HTML. We assign the class alignleft to the image in the text widget and discuss the use of the position property and how to use floats and the pseudoclass after.
[This post contains video, click to play]
Video Transcript
Member: Great, great. Just one quick question. I know you helped me last time. It’s on my server. I don’t know if you want to make me the presenter.
Rick: Sure. I’ll make you the presenter.
Member: Thank you.
Rick: Okay.
Member: Perfect. So I need help on… you see how my text is on… is not aligning next to the picture. You know, so I want the picture to align left and then the text align next to it. But I kind of want to keep it in that box, in this box right here.
Rick: Sure. So show me your HTML structure. Right click on it and inspect element, yeah. Okay so you’ve got the content area, keep going down or go up or wherever it is.
Member: Okay.
Rick: I don’t think… is it in content area or where is it?
Member: It’s actually right here. I’m using your plugin, the…
Rick: In the feature box? Okay.
Member: The feature box and what I did, I used the 3 rows.
Rick: Okay, perfect. So expand that a little further, a little bit more, a little bit more, a little bit more. There we go. Okay so we’ve got our image. Yeah, okay. What you’re better off doing is you’re better off not using something like align left because that’s not actually… it’s not actually CSS. That’s HTML. And so what you’d be better off doing here is either inserting it using the Media Library and telling it to align left which would then give it the class of align left or give it the class of align left or if you insist on using HTML, you could use style equals float: left.
Member: Oh okay. No, I’d rather use CSS instead of instyle. Right?
Rick: Okay so… yeah so WordPress has these built in styles for images and one of those styles is align left. And so go ahead and open it up in the text widget.
Member: In the text widget? Okay.
Rick: Well yeah, what I really mean is in the back end…
Member: In the back end?
Rick: Yeah, around the… I mean, get in the admin side of it and then open up your text widget.
Member: Oh okay, okay. I’m sorry. So it’s right here.
Rick: Okay so instead of align left, say class equals and then rather than left, it’s align left as one word. Okay and I’m just going to double check for just a moment here to make sure and see built in WordPress CSS classes.
Member: Okay.
Rick: Okay, align… yeah, it’s align left. Right, okay. So you’ve got that right. Go ahead and hit save and let’s see what it looks like.
Member: Yeah, it looks like it. It aligned… well yeah, it aligned left because this one’s a little different.
Rick: Well, what’s the thing up there where it says people love us and then it’s got what going on?
Member: You know what I tried to do here? I tried floating the text…
Rick: Well, let’s go back and look at your text widget again. Okay so you’ve got… oh I see. You’ve got 2 divs and did you put classes with those divs?
Member: I put ids. I don’t know if that’s…
Rick: What I mean, do you have styles associated with w title and w text?
Member: Correct. I do, I do.
Rick: Okay. So I’m guessing that wp title has… or w text has a clear both or clear left or something like that.
Member: So…
Rick: Let’s see.
Member: This is what I was starting with, the…
Rick: Okay. Oh well, you’ve got absolute positioning going on here and then the text is floating right. What I would do is I would get rid of the absolute positioning and both wp title… well, in fact, neither of these… you could, for the moment, delete them both or just delete their contents for both of them and then save that and see what happens. I don’t think you’re going to have… I think, all by itself, that will let both of these things float up side by side… up beside the stuff. Yeah see? Because you don’t’ actually have to tell these things to float as long as what they’re floating beside floats. Now you may want to you know, give yourself some left margin so you may want to give those styles you know, margin left of… I don’t know, what is that? 50 or 60 pixels? And that’ll shove it over. Well, margin left, yeah. That’s a really nice, little autocompletion.
Member: Yeah, I kind of do like it. It makes it a little easier. It’s the code there.
Rick: Okay, give it 60 pixels. Something’s not quite behaving correctly there. Maybe 60 pixels isn’t enough.
Member: No.
Rick: w-text… well…
Member: Okay. I had to put the class on each widget, right? On each text?
Rick: Yeah you would have to put the class on each widget. What are the chances you have misspelled w title, w text… okay let’s… if you’ve saved each widget, let’s go back and take a look at it.
Member: Okay, I think I need to take out that div class though.
Rick: Okay yeah.
Member: Let me take this out.
Rick: Are those all… I don’t think that one has been saved yet.
Member: This one right here?
Rick: Yeah. I don’t think that one has been saved yet. Maybe the net one hasn’t been saved either, I’m not sure.
Member: I’ll save it, okay. Oh perfect.
Rick: Okay so I guess the only other thing you have to do is fiddle around with the margin or padding or whatever just to make it move over more. Because it’s floating… yeah. Right click on the “People Love Us” and inspect the element, just on one of them. Okay so go down to “People Love Us”, hover over “People Love Us”. Okay well hover over the w text then.
Member: w text?
Rick: Yeah. See, no hover over w text. You’re hovering above it. See where it says div id w text? There you go. Okay so you can see the size of the margin there on the left. You obviously just need more margin. If you hover back up over it again, you’ll see… there you go. You can see the margin because it’s orange. So if you change that margin to say 70…
Member: There it is.
Rick: There you go.
Member: Yeah, 80 probably? Or I mean, that’s probably too much.
Rick: But that’s how you’ll get it to work then.
Member: Okay.
Rick: Now the only other thing I would do is right now, you have uncleared floats and so the other thing I would do would be to clear the float. And the way you’re going to clear the float is by adding clear both to the definition of w text so that nothing else tries to float beside that image.
Member: Okay.
Rick: So go do that real quick. Go back to your file and under that… and then just add clear both to that. Yeah and that will… that clears the float for the image. Oh no.
Member: It took away..
Rick: Oh yeah, yeah. Okay go back then and do that. I’m sorry. It clears it before it starts, not after it starts. What you do is w text… you create a new style called w text –after or not hyphen but colon after and use a pseudo class after.
Member: On the CSS?
Rick: Yeah. So create a new CSS rule called w-text and then :after. This is not something that I’ve taught but this is… it’s :after. At the end of the w text, you type a colon and then after. Similar to hover or whatever, right? This is a… it’s a pseudo element but it’s a semi-colon. I mean, a colon. Okay now the other thing somebody noticed is that your w title is spelled with 2 t’s in it, see there?
Member: Oh yeah.
Rick: So any definition that you did there wasn’t going to make any effect anyway. So you need to make sure that that’s not misspelled, there you go. But then… okay and get rid of the space there and now inside of that, say clear both.
Member: Okay.
Rick: Now save that and let’s see what it looks like. That should do that job and if that… yeah, that does, right. So the pseudo class after does… essentially, it says you know, after this class, do this thing. And it’s fairly useful for clearing because you don’t want to clear that div but you want to clear immediately after that div.
Member: Yeah perfect. And so then the title, I just do that same thing I did right now? For example…
Rick: You’re just going to give it the margin and whatever styling you want to add to it then.
Member: Or just keep the margin 70 again?
Rick: Yeah. You need to go back in and get your… put your indentation back into that though.
Member: Okay.
Rick: You don’t have to change anything there. You’re fine there.
Member: Okay perfect. It looks good.
Rick: It does look good. That worked great.
Member: Yeah, alright. Do you have any more tutorials that I can probably take a look at and see if other like case studies that you’ve done so far?
Rick: On what?
Member: Oh on where we… what you just taught me right now, the you know, the line left classes and the pseudo classes? Oh well the pseudo classes, you haven’t taught it yet, right?
Rick: Right. And actually, I haven’t really taught anything about using built-in WordPress classes either. So it should just something that I have… it just occurred to me to talk about it in that context.
Member: Okay, alright.
Rick: So no we don’t have anything on that.
Member: No, okay. S then I just put a margin right so they could… so they won’t touch … this text won’t touch this image.
Rick: Yeah, I would do that inside your widget though.
Member: Inside the widget?
Rick: Yeah you know, you’re using the widget… you’re using the…
Member: Oh yeah, yeah. I see, your plugin, the margin.
Rick: Right.
Member: Okay.
Rick: Yes, in there because here, you can set up widget margins and padding. And so for example, you’re not going to use padding there though because that’s for something else. But check the customize the padding and margin for this column is where you would do that and then you can set it up there.
Member: Okay alright, thank you so much Rick.
Rick: You’re welcome. Anything else?
Member: That’s it for now.
Rick: Okay yeah, perfect. Well, have a great day.
Member: You too. Thank you Rick.
Rick: Bye bye.
Member: Bye bye.