Build Your Own Business Website header image

Part 23 – Setup the Footer Styles

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

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.

Now that we have set up the widget styles for this new WordPress site the next thing we’re going to do is set up the footer styles.

Footer Widgets

We’ll start with this footer widget. I thought this would give me a choice to choose a different image. It doesn’t so we will delete that image and delete this image. I’m going to edit this float left, link to none and that looks right.

This one is float left, link to none, float left, link to none. Let’s update these. I want to put these other ones in between those two so image and now we add another media image. This one is 238×150 that one is 238×150.

Let’s insert that one into the post and then right beside it we’ll add another media. This is 238×150, insert into post. Flip back over to visual, back over to text view and we’re going to create a container for this one. That’s div class equals ”footer-box” style equals ”clear:both”. Let’s save that now.

I think we may as well give these guys some padding on each side. I think 25 pixels of padding on each side should do. Edit, advanced options. Hmm… so I don’t have the option of adding margins in line any longer but I can add a class for the image. I’ll add a class to each one of these.

John says there’s another GHR image in the library which has more white space. So let’s try that. I see, you’re saying this one here, 238 x 150 is in full size. Let’s insert into post, come back over to visual and yes, you’re right, that’s much closer. Add footer image and then save.

Add Text and Container Style

This is going to seem weird but we’re going to come back over here to the style manager and I’m going to add another text style. This will be the fourth one and it is footer image. Add padding around and let’s call it margin. Let’s add a phone portrait one to that.

Save it then come back over to additional styles. Down to our text styles and our footer image style. We’re going to customize the margin. Oh, whoops no that doesn’t work. Text isn’t going to work, we need to use a container.

Let’s go back to style manager. We can just leave it like that for the time being. It’s a container style we want to add because that makes more semantic sense for footer image. Add a margin and do a phone portrait one. Save and then come back over to additional styles and go to our footer image style.

We’re going to call this img dot footer-image. That’s going to be the selector and all we’re going to do is customize margin. We’re going to put 25 pixels of margin on the left and right side. Reload this first. Where’s my container style? Menu styles, container styles, center box image, .footer-image. Okay and there we go, it’s another spread across.

And then what we should do is style that too. So let’s look at what it looks like in this case. It’s nice and big everything is centered and those are all links. What have we got? Automatically add paragraphs. Go to top of page, this is actually a link. Copy link address, and where did that go? Here we go, add the link. Okay, use it. Let’s save that, with that saved what just happened?

Create Footer Widget Style

Everything went to the left so let’s go over to our footer, additional thesis styles and we can also style the typical footer. Let’s add the class emphasis to this widget. That might actually get us all we were looking for anyway. Except for the link and the bottom margin because you really want a little bit of bottom margin.

This doesn’t need to be that way so I guess emphasis is not the right thing. So we’ll get rid of that but let’s see what we have for widgets styles here. Okay, let’s just create a widget style. Give it 2 and back to widget styles and this one’s going to be Footer Widget.

We don’t care about the widget heading, do we? I guess we really only care about the main text in this widget. So then hit save. I believe this is going to be inside of footer. So it’s footer and then the widget.

So we’ll go back over to additional styles, down to our footer widget style and we’re going to call dot footer space dot widget. Font size is going to be 19 pixels. Let’s use our typical color, our main color. We’re going to text align file on center and I think that’s just about it. Save our widget styles.

We could make this one bold. And they wanted the links too so let’s come back over here to box and style manager then widget style configuration. We want the links added to that and save that. And let’s just make this bold. Save that. There we go and then all we really need is that there.

So we’ll go back to additional styles and to our widget style, footer widget links. Let’s make the link color our contras. This is our link color and our hover color will be darker. So, save our widget style options. Reload that. Is that pink or is that grey now? That’s pink I guess. Maybe I just need to reload this. Widget styles, footer widget a. Yeah we just need to reload it. There it is, perfect.

Add the Attribution

And then all we have to do is fix this. We can close that and go over here to skin content and go to attribution. What does she want in attribution? She wants us to say © Annie Greig 2008 – 2016. We’re very close to 2017. Save that and then we can come back over to additional styles. Come to our attribution style and the only thing we really want to do here is center it. So font text align center. Save the Thesis Classic Style. Reload it and there it is.

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