Build Your Own Business Website header image

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.

Style the Footer Widgets

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to -

The final thing we are going to do in this lesson, Understanding and Using Plugins and Widgets, is to style the Footer widgets. Obviously, this isn’t what we want it to look like. And so the first thing to do is set up the style of the headings.

Style Widget Headings

And we’re going to do that over here in Thesis and Skin Design. Come down to the Widget Areas and we’re going to choose the Footer Widget Headings. I’m going to choose the light text hover as the color. And otherwise I think I’m good with those settings. So let’s save the widget styles and see how that turns out. That’s good.

Change Colors

And then I think what we want is to change this white color. Let’s come over to our Widget Area and our Footer Widget Links. My link color is not going to be white. Let’s make our link color, light text. And let’s make our hover color the hover. And style that. There we go, okay. We’re going to make our text the text hover color.

Change Typical Text

Come back over to Footer Widget Text and here I want to increase the font size. I want to take it up to 18 pixels. We’re going to say the typical column width is 1/3 width. And the typical text color is going to be this light text hover, like that.

Review the Widgets

That looks a little bit better. Although our widget title went down in size. Isn’t that odd. Footer Widget Headings. Okay, I guess we’ll take that to 28 pixels and see how that looks. Okay, that looks pretty good.

Style Lists

And then the only other thing I want to do is style this list. Come over here to widget areas and go down to Footer Widget Lists. Something we haven’t talked about yet is using Font Awesome icons but in fact I want to use a Font Awesome icon in my list. And I am going to select the double angle as the one and add a little single spacing to the list item.

Let’s see how that works. No, I’m not using a double angle on that am I? Our example shows that we are using an arrow/circle. And if we wanted to use one that’s not already there we can come over here to Font Awesome and go to Icons. Scroll down here and pick an icon. Let’s pick Fighter Jet and all we have to do is come grab this FA Fighter Jet and come over to Footer Widget Lists, other icons.

Actually we need the unicode from that. And this is unicode right here, FOFB. That’s what we need for this. And then hit Save widget style options. There you go, you’ve fighter jets instead of the other kind of bullet.

Anyway, you can use this for all kinds of lists. We’ve got lists over here that you can do it with. We’ve got list inside of your content that you can change as well.

This is how you customize the styles of these widget areas. Again, what we are going to do now before we quit for the day is to go back over to the Skin Editor and Data Manager and create a new backup. We’ll call it After Lesson 12. That’s the Skin backup.

Then we can also come over here to BackupBuddy. Go to backup. Complete a backup. And we will have our starting place for the next lesson.

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