Build Your Own Business Website header image

Styling the Agility Skin for Thesis 2 – Part 13 – Styling Widgets in Agility

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.

The next thing we’re going to do is set widget styles in the Agility Skin for Thesis 2. There are 3 built-in widget styles. You have the main sidebar widgets, you have the footer widgets and the header widgets.

The 3 Built In Widget Styles

The main sidebar widgets are the ones that are in this sidebar here, these are the main sidebar widgets. Header widgets would be if you had chosen to use a header widget in your header and the footer widgets are these widgets down here.

Supplemental Widget Styles

In addition to that you also have the ability to set up supplemental widget styles. We have 2 different versions. We have Supplemental and we have Supplemental 2 and we’re going to be using Supplemental here in a minute for styling this widget but first, we’re going to style the main widget area.

3 Sections of the Widget Area

A widget area has essentially 3 sections. It has the text, it has the links and it has the headings and you can set each of those independently.

Styling the Main Sidebar Widget Area

Let’s come over here. We’re not going to put the border and everything around these but we will set our heading color to that dark red. We’re going to set our link color to the green and we’re going to set our text color to this gray, 888.

So we do that over here in the main sidebar widget. We’ll actually start with headings. Main sidebar widget headings and we’re going to use the Arial font and at the moment we’ll leave the font size alone but the color was that red color which is that 84200 color. We can leave all the rest of that alone for the time being and just say okay to that.

Then our widget text, we’re going to make that text the 888 color and otherwise we’re going to leave the rest of those options alone. Then the widget link was going to be that green color and that was our link color. Then we’ll use the red as the hover color and when we hover over it we’re going to underline it. Say okay to that and save our design options.

Let’s go look at a regular widget. There’s one on the About page. So here’s what our regular widget styles look like. They were bold so let’s make our main sidebar headings 24 and let’s make them bold and see how that looks. Here we go, that looks a little bit better, little bit bigger.

Then you can see when we hover over them, it turns that color. Is that what we did on the original site? No, we turned it to light green, okay let’s do that too. So link hover color is that green there. It’s harder to see that. What else was happening over here that made it easier to see? The text is Arial also so our sidebar widget text was Arial.

Main Widget Styling Applies to All by Default

You can see that these changes actually affected this widget area in the sidebar and it affected this widget area in the footer because that widget definition applies to all widgets by default. So if we want a different style elsewhere, say in the footer or header, we are going to have to create a different style.

Create a Separate Style for the Footer Widgets

Then what we’re going to do is style our footer widgets and our footer widget is going to have a whole different color style. Let’s come down and look at our footer widgets. You can’t even see them now because we changed the heading color. So we’re going to select our footer widget headings and the heading is this light color that we were using.

Let’s say okay to that just like it is and then our footer widget text had another light color. It was kind of a brown gray color. Our footer widgets links will get this color, it’s very light. Say okay to that, save our design options and refresh this. Now, the footer widgets standout quite a bit more. You’ve got the text, you’ve got the heading and you’ve got the link.

0 Comments… add one
0 comments… add one

Leave a Comment