In this session, we discuss how to style a block of text as a link. The first thing to do is to wrap the block of text in a div tag and assign a class to that div. Next I show how to add styling to that class such background color, border, margins and padding.
Juan asked a question about how to create this kind of a link and I gave a short answer on the forum but I’m going to give the long answer here tonight. And essentially, what you do is you hover over this and you can click off to that and it’s actually a link that takes you to the whole page, right? You select click back so it looks like this entire box is a link. Well, this is actually quite an easy thing to do in WordPress and so that’s what we’re going to do here together next.
And I have this little site here essentially prepared to do that. We’re going to take this box of text and this block of text and we’re going to make that happen with these 2 things here. And so the first thing I need to do is once I have my text, I need to wrap the text in a div tag and then assign a class to that div tag and then we’ll add styling to that class.
So let’s go to edit the page. I need to go into the HTML view and just before the h3 here, we’re going to create a div and we’re going to say class equals and then opening quotation marks. And I’m going to say box link, closing quotation marks and greater than sign. So there’s the opening div tag and now I’m going to come down here to the end of that text and put a closing div in. So there’s our closing div tag and then we’ll just do that one more time with the next box. Add a closing, opening div with that class in front of the h3 and add the closing div at the end of the text. So now we’ve got 2 divs with the same class and we’ll apply styling to the class. And when we apply that styling to the class, it’ll take.
So if we hit update here and then let’s go back and view the page. Obviously, it didn’t change anything yet because we haven’t done any styling to it yet. So we’re going to start off our styling here in Firefox and we’ll edit the CSS here. Custom CSS is blank and if we inspect this element, it will remind us of our class which is box link. So we’ll just copy that over to our custom CSS file and type div .boxlink and then opening brackets and closing brackets. And then the first thing we’ll do is we’ll… let’s see, let’s give it a background color. Let’s give it a background color of… I don’t know. Yeah, let’s open up… let’s see, I want to open up in a new page, open a new window. There we go, that’s what I want to do. And while that’s opening up, we’ll come over here and we’re just going to steal this guy’s style.
Okay so we want to get… the first thing we want to do is get the color here. I can’t get that color without hovering over it. Well, yes I can. But we’ll start off… actually, let’s do it that way. Let’s inspect this element and this is div class service and the background color is that ffff5b so we’re just going to copy this. And then come back over to our… let’s see, come back over to our other page and paste that there. So there’s our background color, okay.
Now we need padding so that the stuff, the text steps away from it. So let’s say padding colon… let’s say 15 pixels. Not 25… 20 pixels. Okay, let’s say padding: 10 pixels. And then let’s give this a bottom margin of 20 pixels. Okay so in fact, if we did 10 pixels, if we do top and bottom as 10 and left and right as 20, we’ll just say 20 pixels here. So we get a little bit more on the sides… you know, I’m totally messing this up because it’s actually not supposed to be a div. It actually should be a link, not a div. And yeah, because we want it to link off to someplace. And you know what? I just got ahead of myself here on that.
So the a will be inside the div, not outside it. So we’ll have the a inside the div but the class will refer to the div, not the link. So now it is… if I haven’t confused everybody too much, it’s div class = boxlink a href equals and then the h3 and then the paragraph stuff. And then the a should go inside of the div, not outside of it. Starting right is always best, words to live by.
Okay so there we go. We’ve got a div with that. We’ve got the link on the inside and we hit update. Then we come back over to our site again and we say div… we’re going to copy this, refresh it, come back over to custom CSS then paste it. Okay, there we go.
Now, we are doing a little bit better. We want to… let’s see, get rid of our… let’s see, let’s… I want to figure out what’s going on with that. It’s giving me that br there anyway. But let’s see. So h3 has got a great, big margin, top margin. So we’re also going to just copy this boxlink h3 and then we’ll say margin top: 0 px. Okay, that brings that down a little bit better.
We may as well also say text align center. Okay so now I’ve got 2 boxes here. We don’t need to display block anymore but let’s give it a border and we’ll give it 2 px solid green. Let’s make it 4 px. We may as well make it dashed, 4 px dashed and green which is kind of similar to what that guy did.
Now we don’t want the text to be underlined here. So if we come down and paste that there and instead of h3, now we’re a. And here, what we’ll do is we’ll say text decoration none. Okay so that got rid of the underlining the text.
Okay so there’s our 2 boxes. Now the thing to do is to make it so that it hovers when you hover over this and makes the whole thing click. So the way to do that is to take div boxlink and we’ll say colon hover. Let’s go ahead and get rid of everything but the background color and let’s go get that other color that this guy uses. It’s that color there and let’s see, I’m not sure I actually caught that though, did I? Yeah, okay we’ll copy that, come back over to our page here and replace that with this.
So now you can see when we hover over it, we get that appearance. And you know, we could do a little bit of animation on this too. For example, we could do our div box link h3 hover and instead of doing this background color, we could say font weight bold. So now, when you… oh, isn’t that interesting? Yeah, okay. Actually, maybe I should say display block for that. Div box link… you know what? I think I’m going to take the h3 out of this, hover and then h3. Yeah, that’s it. We do the hover first so this is the hover action of the box but the h3 gets bigger.
And then maybe we’ll make the font size larger. Font size: 125%. So that’s 125% of its current size. That’s what happens when this happens. Yeah and then obviously, you can change colors up and you know, change stuff that’s going on here.
And anyway, that’s how you accomplish or that’s how you can create these things. I’m just going to copy this code here for a second. Copy that because now, you can click on this and it’ll obviously takes me back off to where I want to go, right? It takes me to my website. Of course, I lost everything once I clicked away. Yeah, I think that’s probably good enough.
That’s how you can do something similar to this. And I’ll go ahead and post this code on the forum here in the morning so you can have that code available to you.