Build Your Own Business Website header image

Styling the Agility Skin for Thesis 2 – Part 14 – Create a Custom Widget Style 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.

You have seen how easy it is to style widgets in the Agility Skin for Thesis 2 but now I want to show you how to create a custom widget style.

Create a Supplemental Widget Style

Let’s go back to our home page and we’ll make some changes to our text widget. We could make this strong and we want to center align all three of these items. So what we’re going to do is create a supplemental widget style.

We’re going to say supplemental widget headings and we’ll leave it alone except that we want to align it to the center. So now we’ve got a supplemental widget style.

Two Ways to Set Supplemental Styles on Each Widget or Widget Area

Something I’ve not mentioned to you before today is that Agility gives you the ability to set this supplemental style based either individually on each widget or on the widget area.

Set Style for an Entire Widget Area

Let’s come over to our skin editor and go to the front page template. In our feature box widget area right here, we could add the class supplemental and that’s all it takes to apply the supplemental to every widget that’s in that widget area. Let’s refresh this page and now you’ve got this text centered in the space.

Set Style for Individual Widgets

However, instead of doing it that way we could also do it on a widget by widget basis. You can do this by coming over to Appearance and Widgets and then to our right feature box widget area. If you scroll down, you’ll see there is the section that says, “Add a class to this widget”.

Well, if we add the class supplemental to that widget and hit save we’ll have applied that styling to this specific widget. It still looks the same but if we put another widget in there, that style wouldn’t apply to it.

So that means we could come over here and take this one and we’ll also give it the style of supplemental. Obviously I have this “Hide on checked pages” turned on inadvertently. I don’t want to hide anything. This is another plugin that’s why I couldn’t see it.

Now what’s happened is that style has applied to this one but not this one because this has that supplemental style applied to it.

Add a Background Using Extra Style Backgrounds

Well, the next thing we want to do is add a background to it, that is we want it to look like this. If we want to add a background to this, we can use one of the extra style backgrounds. Let’s come back down to our backgrounds and we could take extra style 1 background.

We’re going to give it 20 pixels of padding all the way around and then we’re going to give it a solid border that is 2px. The border color will be that 888 color. We’ll give it a border radius of 10 pixels.

We’ll give it a drop shadow color of 888 and in terms of drop shadow we’ll say 5px, 5px, 5px. In fact, let’s make it 444 yes, there we go. Say okay to that, save those design options and then let’s refresh this page. And, of course, nothing happens because we still have to add the class to that.

Add Class Style-1 through Style-5

Let’s come back over to our Appearance and Widgets, we’ve added that class supplemental and we can also add the class style-1. So to apply the supplemental widget style you use supplemental or supplemental-2, to apply the background styles, you use style-1 through style-5 and there it is.

Let’s monkey around with that just a little bit. We’ll get rid of that and then in this h4, we will add a strong tag to this. There we go. And maybe we reduce the top and bottom padding a little bit. So let’s take that down to 15 and 15, top padding and bottom padding.

So that’s how you can apply this supplemental widget style and the extra background style to a widget. Use the supplemental style to give it a definition and then add supplemental to the widget itself, create a background style you want to follow and then add it to that widget.

Apply a Background Style to the Slideshow

In fact, we’re going to do that one more time. We’re going to create a background style-2 and the only thing we’re going to do with it is give it a drop shadow. That was 444 that we used next to it and then we’ll say 5px, 5px, 5px. Say okay to that, save it.

Then we’re going to come over to our meteor slides widget and add style-2 to that class which will add a drop shadow to the slideshow. The slideshow is slightly the wrong size, that’s a mistake on my part. The slideshow should have been the full size of this area so it showed up more but having said that, that’s how we sort of apply a style to something like this.

You’ve got to make sure things are sized correctly but when it is sized correctly, you can apply a style like that to it and accomplish something different. I think it’s pretty cool.

Wendy asks, “How would you create an extra style that would be the color behind the header of a widget only?”. Yes, I don’t think this will do that. See those had style-1 applied to them so they got the box around them too. I don’t think that will do that because this applies to those background styles and those text styles apply to the full widget not to a specific element in the widget although that’s an interesting feature to ask for.

I get what you’re talking about, so it looks like a band of color. I’m teaching a class right now on basic CSS and we styled widget areas like this so that they had that big block of color behind the headings of the widgets and so that’s definitely a possibility and is something I will consider adding to this. It can’t be added currently but it’s a clever idea.

0 Comments… add one
0 comments… add one

Leave a Comment