Build Your Own Business Website header image

One Hour Website Makeover DJ Sean Denard Part 14 – Add and Style Footer Widgets

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.

This is Part 14 of the One Hour Website Makeover for DJ Sean Denard’s site and in this session we show how to setup the Footer widgets, then add some text and styling using the BYOB Thesis Footer Widgets plugin.

Video Transcript

Actually, I guess the last thing we have to do here is set up the footers. And we’ve got 2 footers already… we’ve got the 2 footer widget columns already created so now what we’re going to do is add some text to them and apply styling to that text.

So if we come over here to our… let’s see, widgets again, and we’ve got our footer widget up here. We’ll add some text. I think I’m just going to say, “designed by Rick Anderson”…actually, designed by Kim Carney because actually, Kim designed this and, . Okay so that’s in the one text widget and then in the other text widget or the other widget area, I’m going to add a text widget and I’m going to say, “Plugins by Rick Anderson”. And then yeah, plugins by Rick Anderson, and hit save. So now I have those 2 widgets in there. If I come back over and refresh this, you can see there are 2 widgets, designed by Kim Carney and plugins by Rick Anderson.

And so there are a couple of things I want to do to this, first one is to add those paragraphs again so that automatically add paragraphs, which one of these is a line break? That’s what this does is it adds a line break when you add the line break. Refresh that. Okay now I’ve got those 2 things. See, I want to get rid of the Thesis attribution and so I’m going to do that down in the Footer Widgets plugin. I do have a license so I’m going to remove the Thesis attribution. And then I’m going to specify a footer row text style. I don’t have any headings on those widgets so I don’t need to specify that. But I’m going to decrease the size of that text, footer row text style. Actually, I’m just going to do something completely different. I’m going to grab a Google font here and for font size, I’m going to say 12 pixels. And at first, I’m not going to do anything with the font and link colors. I’m just going to let it sit there but I’m going to refresh this. Okay, that is 12 pixels so let’s take that down to 10.

Okay and then what I want to do is I want to move this over. Actually you know, what I probably should have done is done this as an unordered list rather than a paragraph because I’ve got a lot of space there. By choosing unordered list, these things will be closer if each of these were list items. But what I want to do now is I just want to make this…this is left aligned. I want to make this right aligned. You know, I also might be able to do that simply by adding a p tag here. No, yeah I think we’re just going to let that go for the moment. But I am going to… what am I doing here? Oh yes, I want to left align this.

And so my footer column 1 settings which is the left one, right? I’m just going let it alone. The footer column 2 settings though, I want to right align the text. So if I hit save and refresh this, now that text is right aligned and this text is left aligned. You know, I think I’m going to… let’s change that font color though. So if we come back to our row text style and we’ll check this and we’ll make it the color efefef, so a lighter color. And then the hover color, I think we’re going to make yellow. You know, I should just grab that yellow someplace. I don’t actually have any links there yet but… and I’m going to underline the link text and underline… yeah, I’m just going to underline the link text which will also underline the hover text. Actually, I’m not going to do that. I’m not going to underline the link text but I will underline the hover text. We hit save and we refresh.

Okay there’s that. Now what I want to do is let’s turn those into links. So here, now you can do this using your… actually, I am going to do that. I am going to do this using the sandbox page. Delete that, paste this, visual… okay. The first thing I’m going to do is I’m going to make that an unordered list and then I’m going to make this into a link and it’s Add the link, back over here, copy that text. So now I have it as a list instead of as paragraph text. Hit save, refresh and now I can actually increase the size of this stuff. And I may as well just say plugins by Rick Anderson. Okay, copy that text, come back over to my other widget and paste that so the styles can be the same. Okay, back over to the Footer Widgets plugin. Let’s reset that text style. Let’s take that text style back up to 12 and I think… let’s just go back to Arial. Save.

Okay so there we have… I have it laid out now where we have our links, our white… hover over only becomes yellow with underline. The text is a different color. These things are set to the left and right and that’s got it all set up.

0 Comments… add one
0 comments… add one

Leave a Comment