Build Your Own Business Website header image

Lesson 11 – Part 7 – Add Text, Images and Links to the Attention Boxes

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects - ,

Applies to -

The next thing we’re going to do is add content to these attention boxes. And so we’re going to come back over to the widget area and let’s expand widget box 1 and attention box.

Add Black Studio TinyMCE Text Widget

We’re going to drag a Black Studio TinyMCE widget over to this. And for a title, we’re going to say link to a service. And for the content, I’m just going to copy this content for the time being.  And then I’m going to enter here and we’re going to put an image in.

Add an Image to the Text Widget

This is the first time you’ll put an image in a text widget using this Black Studio TinyMCE widget. We just hit add media and in this case, we’re going to select upload files. Actually, I’ve got the file here I want in the media library so let’s look at the media library. Because the one I want is the people looking at drawing, that’s this one here. I’ve already included it.

Image Settings

You can see it’s 275 by 150 pixels and I’m going to center align it. I don’t want it to link to anything and I’m going to use that full size image. So we just insert it into the post. Now I’m going to link this to the services page so I select it, click link and then look for my services page. Here’s my services page so add a link and now, it links to that.

Using Class or ID to Style the Widget

I could add a class to the widget but I’m not going to. I’m going to use the id that we used to style it instead so we just hit save here. Although this little thing here will let you create styles for any widget. I mean, you can add that action call class to any widget and it would adopt that same style that we created earlier. But we won’t use this on this one. Hit save.

Add More Widgets for a Total of 3 Attention Boxes

If we come back over and refresh this, now we’ve got a title, the picture, the text and a link. I’ve already created these two widgets so I’m just going to drag those in here real quickly. So open up box 2 and 3 and we’ll drag the one widget there and we’ll drag the other widget here. And we’ll refresh our page and we should have all 3 sitting in there.

Styling the Attention Boxes

Now that we’ve got all of those, we are going to style them. And if we take a look at this, we’ve got a background color we’re going to style. The title is going to be styled and our link is going to be styled.

Create Another Agility Widget Style Package

Let’s come back over here. Remember in the Thesis Skin Editor, we gave this an id of attention box? I’m just going to copy that, come over to css, create another Agility widget style package, call it attention boxes, give it the reference attention box.

Add ID

In this case, the widget is inside of a container with the id of attention box. So I’m going to say shift # and paste that id that we did. And we have to have a space now because the container called widget is inside of the container called attention box. That’s the way this thing works.

When you use the id in that smart widget columns box, if you create an id in there then it needs to be separated from whatever class the widgets are called by a space because this is a container that contains this. If there was no space, it would mean for the container that has the id of attention box and the class of widget. But that’s not what we have. We have a container called attention box that holds a container called widget.

Add Background Color

And so just right off the bat, if we come over here and go to our widgets and let’s give it a background color. First, we need to create a background color variable. So right now, I’m just going to put the right number in there, F0EEE2. That is the color that we’re going to create a variable for and that’s the color that we’re going to use as a background for that.

Let’s hit save to that and then come back over to… let’s see, widgets call to action call and then say attention boxes or attention box. Okay, save that CSS, come over and refresh it. Okay, let’s refresh it again.

Review the Changes

So now we’ve got that background color here. Now looking at this, you can tell the difference between this and this. Well, first off, we need the padding around it. Secondly, we need a bigger font, needs to be centered, needs to be Arial, needs to be that green color. Font size, a little smaller so let’s try that again.

Add Padding, Font Style and Color

Let’s start off with this by giving it padding all the way around. We’ll go to our options and our widgets and padding. And add 20 pixels everywhere. Okay, color should be TC1. Widget titles, needs to be Arial. The font size is going to be 24 with a 28 pixel line height. We’ll make the font weight bold. We’re going to align it to the center. We’re going to make the text color that BC1 which is that dark green color. And let’s just set the typography for 320 again and let’s save it. And let’s see how close we are to what we want.

Review the Styled Attention Boxes

We’re quite a bit closer although we want some margin below link to service so I’m going to give that 20 pixels of margin, bottom margin. So we come back over here, open up attention boxes, go to widget titles, margin bottom… make it 20 pixels. Refresh it one more time.

I must have done something wrong. Widget titles, margin bottom, 20 pixels. So let’s save it and the css and let’s refresh it. There we go, okay. It must not have saved it properly the first time. But now you have these attention boxes with a link off to the page, with an image there and styling that is different from the rest.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment