Build Your Own Business Website header image

Creating a Full Width Footer Using BYOB Thesis Plugins – Part 4 – Styling the Footer Widgets

Difficulty Level -

Filed Under Topics - ,

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 fourth and final part in a series on Creating a Full Width Footer Using BYOB Thesis Plugins. In this session we show how to style the footer menu using the BYOB Thesis Footer Widgets plugin.

Video Transcripts

And so the one thing I want to do here is I want to change the style of this menu. Now, if you’re familiar with my WP Nav Menus menu you know that you can change things like style from that plugin. However, you don’t have the same… you can’t use that plugin to style a menu that’s been placed in the footer inside of a widget and the reason is because the footer styling for links takes precedence over that.

So what we’re going to do instead here is we are going to style this stuff using my BYOB… the Footer Widgets plugin. And so in order to do that, we’ll come back over here to Footer Widgets and we’re talking about row 2 settings. And so what we do is we change the text style here. So check the box to allow us to change the text style in the first place and then go back to the text style and we’re going to customize the font and link colors. And let’s say that we want the font color to be light grey and let’s say we want the… isn’t that funny? It’s not showing up properly but let’s say we want the link color to be a pretty blue and actually, that’s what I want the hover color to be is this blue. Let’s just make the link color white. And so if we hit save now and refresh this, now you can see that when you hover over it, it becomes this… that color. And if you want to change the font style, let’s see… well actually, we’ll do that later. I want to just make sure that I have this thing centered. Actually, it’s kind of hard to tell whether or not it’s centered so maybe it doesn’t matter anymore. But you can see how the menu itself takes a different color than these things do right?

Okay so the next thing I’m going to do is… I think all I’m going to do is change out the colors for this as well and then change our font and styling for the heading. And then I think this will probably be good. So let’s come back over here and under row 1 settings, let’s change our heading style and we’ll change our text style. And so, let’s go ahead and hit save.

And so our heading style… let’s say we want to make the heading here, let’s make it 24 pixels and let’s make the heading font color… let’s make it that blue color also. Well actually, how about if we make it this bright blue color? You know, that bright blue color, that might not look good there though, now that I say that. Let’s go ahead and just make it a very light grey. Oh no, that’s not what I wanted. This is what I wanted, the very light grey and actually, this I want to be that. I don’t want that to be anything so I’ll turn off background color here. But I do want the heading font color so let’s go ahead and hit save, refresh. Okay let’s see, that is… I didn’t want that to be white so let’s refresh this, grab that color, come back over to here, heading style, put that color in. So now that disappears. We’re not going to have… we’re going to have normal spacing. I’ll make the text bold. Let’s leave the all caps in place so let’s hit save again and then refresh it.

Okay now if we wanted to change the font style for each of these, we could by doing so in Thesis Design Options. Although now that I say that, I think I should add that capacity because I don’t… let’s see, Design Options. And if we look at our footer, the font style, if we say Arial Narrow for a second, yeah okay so that did change that and change that. I did not change this because we didn’t want it to. Okay.

And in a previous lesson, I did show how to… oh actually, let’s change this hover color to this blue. Yeah, let’s change that hover color to the blue, come back over to Full Width Backgrounds… no, not Full Width Backgrounds… Footer Widgets and we look at our text style here. Let’s copy that style, come back over here to footer row text style. We’re going to customize the font and link. The hover color is going to be that and the font color, let’s come back down here and we’ll do the same thing. A3, a3, a3 and hit save. Hit refresh, there we go. And let’s just see how that… footer row 2 settings, footer row background style. Let’s customize it for a second and then we’ll get rid of that customization once we know whether or not that menu is centered. Background style, background color… let’s just do that for a moment.

Okay so it looks like it had been moved over… I don’t know, what, 20 pixels? Something like that. 30 pixels… it wouldn’t be centered in that space. So what we’re going to do is we’re going to give this widget a left margin of 30 pixels. So we come back down to row 2 settings and footer widget column, padding and margins and we’re going to give it a left margin of 30 pixels. Not 60 but 30 and refresh it. Yeah, we may as well right align this text too. Okay so let’s get rid of that footer row background style then. We’re not going to customize the background style. We’re going to come over here to Widgets, we’ll go down to the widget column 2 and we’ll say p and then style = text align: center and then close that with a p tag. And hit save to that… oh not center, of course, right… text align right and hit save. It could have gone the same thing if you wanted to by using a sandbox page to do that. But we refresh this. Okay, there we go.

Now, that’s moved over to the left, this is over to the right, this is fairly more centered. If we had more information on each one of these, those will be nicely populated. And with that, we’re good to go. We’ve accomplished what I wanted to do. You know, I have… I mean, this is probably some other kind of text and if it was just going to be a one-liner, you’d probably make this a little bit bigger and a little bit down you know, or make your background image smaller or something like that. But in this case, I think it works just fine just like that and okay, perfect.

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