Build Your Own Business Website header image

How to Create HTML Attention Boxes in the WordPress Content Area

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 create HTML attention boxes with text and an image in the WordPress content area using various HTML elements in order to accomplish the desired style. This system of styling is dependent upon all of the pictures being the same height so they go to the same position in the box when floated. We also assign the box a border, font family, height, various paddings and apply styles to h2s and h4s inside of the box.

Video Transcript

Rick: So we are creating a style for a box in HTML that you can add to any content page that will
take an employee’s picture, their name, their title, some kind of information, a brief paragraph and a link off to some other location. Is that correct?

Tom: Correct.

Rick: And so our objective here then is to make this as easily repeatable as possible. So what we’re going to do is we’re going to create a one style name or one class that will apply to all of this and then we’ll use various HTML elements in order to accomplish that style here.

So I’m going to mute your microphone again here just to get rid of that echo and if you need to chime in, just feel free to raise your hand there and jump on in.

So before we really dive into this, I want to take a lok at you know, its various elements. Because what we have here is this box and the box has a border around it with a widget bottom border. It has an image that’s right aligned and it starts at the bottom of the box. And then it has this text, right? And so the objective here is going to be to wrap this stuff in an HTML div tag and give that div a class and then let that class definition style all the rest of the stuff.

Now, the system that I’m going to demonstrate this morning is dependent upon all of these pictures being the same height. If all the pictures are not the same height, you’re not going to want to do it exactly this way. But this is going to assume that all of the pictures are the same height and that way, we can float this picture to the right and set an explicit height for this box so that the image is always down there at the bottom of the box. Now if the images are not always the same height then I think you probably want to give up on this always being at the bottom of the box or you’re going to have to come up with a different style system. But in this case, all the images are the same height and we’re just going to take it from there.

So I’m going to open up a demonstration site here. Actually, let’s start off by doing that in Filezilla.
And so wp-content and themes and right now we’re working in Thesis 1.85 so I’m just going to download that real quickly. And then while that’s happening, we’ll come over to the site.

Okay so here we are in the demonstration site. I’m just going to create a new page for this at the
moment. And I think we will just call it attention boxes. That’s what I’m referring to this as I’m not really sure if there’s a real good technical name for this but attention boxes go over to the visual view. And then I created a bunch of text here to demonstrate this. So name, title, contact information, a little bit of descriptive text and something we can use a link. So we’ll just go ahead and publish that real quickly.

And then the very first thing that we want to do with this is to insert our image. And we’re going
to have the image float off to the right but we want everything else to be up beside it. So in fact, what we’ll do is we’ll stick the image in at the very top of this document. So right up before Rick Anderson, we’re going to insert that image. So I do upload and insert, select a file. What’s the name of that file? Example employee photo. Okay, we’re not going to link this thing off at all 20 things so we’re just going to insert the image but we want to float it to the right and we’re going to put its full size in. Okay, float it to the right, it’s full size. Notice that its height is 312 pixels tall. So we’ll insert that into the post.

And then let’s just go ahead and add some styling here. So this, I’m going to make an h2 tag. Well, let’s stop there for a second. Okay now, I’m going to make this an h2 tag. I’m going to make this one an h3 tag. I think I’ll make it an h4 tag actually and then I’m going to make this into a link. Just link it off to byob website.

Okay and then so h2 and then… except I don’t want that. I don’t want the image to be an h2 so I’m going to take the image out of there, put it just around Rick Anderson. And then I also don’t want a space into my h4. So that looks about right. If we update and view this you know, without doing anything special, we have something that looks you know, approximately like what we want it to look like.

Now I think I’m going ot need to do this in a no sidebars template here just because my content isn’t wide enough to really accomplish what they want to accomplish with this. So we’ll refresh this again. Okay, there we go.

And so you know, simply aligning this off to the right got us very close. Now of couse we want to wrap a thing around this. We want to put that… we want to put this around it and put the bottom
thing and then we want to style these a little bit differently. So that’s what’s next.

And the way we accomplish that then is to add this HTML structural div. So that is div and then we’re going to give this div a class, a class that will say class equals and then employee bio. Let’s say that. Or not bio, info… employee info. Okay so we’ve opened this up with the div class employee info and then we’ll come down here and close it. Okay so we’ve got an opening and closing div and then our content is inside of that. And this opening and closing div with a class is the thing that we’re going to… is the class that we’re going to use to style the h2 and the h4 and the link plus give it the wrap. If we refresh this again, obviously it doesn’t… it’s not going to really change its appearance at the moment. Okay so we’ll copy that and I’m going to run over to Firefox here and do this work in Firefox.

Okay and Brian asked, “Do you align right or do you float right?” Well, the real answer to that is that when you’re inserting the image, you’re going to pick a line right. But the class, when the Class image align right essentially is floated right. So… but when you’re inserting the image, you
are… you’re making the choice that it aligns right. So you can see image class equals align right.
Well, that align right floats the image right. And it’s because WordPress has this… or Thesis, in this case, has defined the class align right to make it float right. So that’s why it does that.

So we’re going to come back over here and edit our CSS. And we’ll just go to… you would use custom CSS but I have this thing set up and developed… developer mode is turned off so my custom CSS isn’t showing up here. But it doesn’t really matter. So now we’re going to say .employee info because we’re going to define this class. Employee info and the first thing we’re going to do is give it its border. So border colon and what we’ll say is solid 1 px and then I think that’s… what color gray is that? We should just check that just to get it right. What is that gray color? Okay, let’s see pick a color from the web page. It’s not going to let me pick it from the image. So I’m just going to assume that it is 888 is what I’m going to assume. Yeah, it looks about right.

Okay now obviously, we dn’t want the line up against all of this and we do want this thing down
against the bottom of the line. So… well actually, let’s get to our bottom border. I think that’s about 5 pixels. So we’ll say border bottom width: 5 px. Okay, it looks like it’s a little more than 5 px. Call it 8 px. That looks like that’s about right.

Okay then we’re going to give padding and I think we’re going to give padding about 20 pixels. That’ll move everything to the inside. Padding… let’s see, yeah padding 20 px. You know, that’s
not quite as much as they want. They want a little more than that, 30 px. Okay so we have 30
pixels of padding.

Now although we don’t really want any padding on the bottom so what we’re going to do then is we’ll make it… the top is going to be 30. The left is going to be 30. The bottom is going to be 0 and the right is going to be 30. Okay so far, so good.

And let’s give it an absolute height of the height of that image so 312 pixels. So now we have an absolute height and then we just want to pull this stuff up. So now we start styling these other
things here.

So we’re going to style the h2 tag and so we’re going to take employee info h2 and you know, I
think this has got a major top margin going on. Let’s see, inspect the element. I think we’re going
to find it’s got a huge top margin. It does. So I think we’re going to… if we just turn the margin off entirely… yeah, that’s what we’re going to do. We’re going to remove the margin colon 0… just 0 actually. And then we want a color. You know, I think I’m going to have to open this up in Photoshop so bear with me here for a moment so I can get the right colors for this image.

Okay, let’s just get the colors right. So first off, we want to know what that color is and that color
is DOD1D3 so we’ll come back over to this and do that. Okay and then we want to get the color of that. So FF1DC so come back over here and say color colon… so it’s getting its color from employee info so I need to extend this a little bit, make it more specific. I need to say format text and I guess I need to say .custom. Okay, why isn’t my color working here? Oh, pardon me. I didn’t have the number… the pound sign in front of it. That’s obviously not the right color. Let’s go back to that. Let’s see, there we go.

Let’s see, will this have worked all by its lonesome? Yeah, it would have worked just like that. Okay so we’ll do that. So we’ve got Rick Anderson and now the color of our other thing… well actually, let’s make this whole thing Arial for a second.

So here, what we’re going to do, try to keep this alphabetical. So font family: Arial. Okay, that looks… or maybe it isn’t Arial that they’re using. Yeah well, I guess it does kind of look like Arial.
Maybe it was done in Helvetica or something.

Anyway so then we want to get this color which is this blue color. That’s not right. We’ve got to zoom in on this thing. Okay, there’s our blue color. And so… and this was h4 and our color is going to be that color. And then I think we need to do the same thing with the a tag in order to get it the right color so we’ll just do that one more time. Copy that and instead of this being… we’ll make it an a. Get rid of that margin. Okay so there is the blue color.

Now let’s see, we’re close to what they want it to look like but not quite. Let’s see, I think they want a little bit of space there, don’t they? You want a little bit of space there so we’re going to give it some bottom margin to that h4 tag. So h4 margin bottom and we’ll call that one 20 pixels. Well, I don’t know. Maybe not. Well, I think we need to reduce that top padding a little bit there. So maybe we’ll do our top margin or top heading. So let’s take that down to 20. Yeah, I guess 20 is probably what we want to do. That looks about right. It almost looks like we still have some margin. I guess not.

Okay so now what we do is we just obviously, we always do it when we’re doing this kind of thing,
we come down here and copy the CSS that we’re using. Open up that custom CSS file, come down here to the bottom, save it, upload it and presto change-o… oh right, I forgot. I need to… because we’re in… we’re not in development mode here, I need to change that yet. It must be Site Options. And so design mode… actually, we’re just going to have to hit save. Since we were not using design mode, what we have to do is force Thesis or ask Thesis to rebuild the layout CSS page. And there we have it.

Okay, Tom I’ve just unmuted your microphone again. Tom?

Tom: Perfect. It looks absolutely perfect. Impressive. And you can capture that code and send it to me?

Rick: Yeah, I’m goin to post this code in the forum under the Live Answer Code section here as soon as the class is over with.

Tom: Fantastic.

Rick: So any questions about that?

Tom: It is… it looks pretty straightforward to me. I didn’t quite understand how to create the div tag and everything. But it all makes sense.

Rick: Well, a div is a piece of HTML structure and you can think of it as a box. And what we did was we assigned that box a class so that we had this you know, thing to style. And then we wrapped the rest of the HTML in that box so you had the opening div before and the closing div after it. And then when we started writing this CSS, the dib was named… was given the class employee info. And so we upsigned to that box this border and the font family and we gave that box a height and we gave this box various paddings. And then inside of it, we said, in the h2 inside that box is going   to have this style and the h4 inside of that box will have this style and any link inside of that box will have this style. And so all we need to do was every time you want to do this is you wrap that content in a div with a class employee info and then you make sure that the title… the name is h2, the title is h4. And this style will automatically be applied every single time you do it.

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