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.

Lesson 11 – Part 6 – Add Styling to Widgets Using the BYOB Thesis Widget Styles Plugin

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

BYOB Thesis Widget Styles Plugin

The next thing we’re going to do is style this widget using another plugin that I’ve written called the BYOB Thesis Widget Styles Plugin. We have to download this plugin yet. If we come over to the Widget Styles Plugin, it does have a lot of videos about how to use it.

It talks about padding and margin, the relationship of different containers and there’s a whole bunch of videos in here. I’m not going to actually repeat the information that’s in these videos. If you choose to download the plugin and use it, I strongly suggest that you come and look at these videos because they give a full instruction on how to use this plugin.

In any case, what we’re going to do is to download it and with it being downloaded, we’re going to upload it to the site. Activate it, and like the rest of the plugins, when you hover here, the widget styles would be an option for you.

What the Widget Styles plugin does is it allows you to create styles and then apply them to specific widgets. For example, these Attention Boxes here were styled using the Widget Styles Plugin. This is styled using the Widget Styles Plugin, this drop shadow here is styled using it. If we come back over to that Thesis Toolbox Site, these widgets are styled using the plugin and if we look at plugins, each one of these widgets is styled using the Widget Styles Plugin.

Add Custom Styling to a Widget

The Widget Styles Plugin is a very powerful and versatile plugin that allows you to add a great deal of custom styling to a widget. If you open it up, you see you can customize its background with either a background color, background image or background gradient. You can customize overall border,  you can customize the drop shadow, rounded corners, padding and margin. In fact, widgets have three different pieces to them. You can probably see the 3 different pieces better on the Home page.

Three Different Parts of Widgets

The first piece is the one that wraps all the way around the widget itself and that’s the overall widget. Then you have the Widget Heading and Widget Body. So you have the overall widget, the widget heading and the widget body that can be styled and styled independently.

That’s what’s going on here, you can style the overall widget or you can set the same kind of styling for the heading, change the heading font, the background with the color or image or gradient. You can customize its padding, you can give it a border, you can give it a drop shadow, you can round the corners and exactly the same thing is the case for the body.

In addition to the body, there’s a few other customization options most specifically the Lists Style. You can customize the Lists Style in a Widget and at the moment you don’t really care about that but that’s something else that you can do.

Choosing Different Widget Styles

The way this plugin works is first, you choose how many different styles of widgets you want to create. This allows you to create up to 10 different Widget Styles. For the moment, we’re going to create 2. I’m going to hit Save and our first Widgets Style is going to provide the drop shadow for our slideshow here so that it looks like this.

What we’re going to do is enter Widget Style 1. We want to style the overall widget and all we want to do is configure drop shadow for the overall widget. All the rest of this stuff, we’re going to leave alone and we hit Save. We wanted to customize the drop shadow, now we have the drop shadow dialogue.

Select the Parts of the Widget to Customize

The way this works is essentially you scope out the amount of changes you want to make. This first dialogue here is a scoping dialogue, you just look at the parts of the widget that you want to customize and then you select those. When you hit Save, you end up with the new set of dialogues that allow you to actually make the customization.

Drop shadow has a width and a blur and I’m going to demonstrate what that means. If we had 5 pixel width and no blur and let’s we pick a very dark gray. Hit Save, come back over and look at our page and refresh it, nothing has happened. The reason nothing has happened is we haven’t applied that style to our widget.

Now that it’s refreshed, we can look at our widgets and we have a new setting in every widget. That new setting is Select a Style. In this case, we can leave it as Thesis Theme Default which means the way we style in Design Options is the way it’s going to look or we can choose one of the styles that we’ve created. I’m going to choose Style 1 for the Meteor Slides because that’s the one that it is and hit Save. Come back over, hit refresh and now we have a drop shadow.

Customizing Drop Shadows

The difference between this drop shadow and this drop shadow is that blur, right? The drop shadow here’s 5 pixels wide but there’s no blur to it so it’s a very hard line. If you want a very hard line, it’s the perfect way to do it but we don’t actually want a very hard line. We want a soft line so we’ll make the blur the same width as the shadow width itself and hit Save. Come back over here, refresh this and now we’ve got that drop shadow sitting there.

I think that’s a little bit dark so let’s come back over and lighten up the color. I pick a different color and hit Save, refresh and we have a lighter shadow. We can apply this style to as many widgets as we like.

If we come back to Feature Box Row 1 Column 2, we could pick Style 1, hit Save and refresh. Now we’ve got that drop shadow happening right around this one. Obviously that’s not what we want so we have to create a different style.

Creating a Different Widget Style

The next thing we’re going to do is create the widget style for this so that rather than looking like this, it instead looks like that. We’re going to do that again from this widget panel. If we look at this for just a second, we’ve got a rounded corner, a border, a drop shadow, a stylized text, a stylized link and we’ve got a stylized heading. The next thing to do is to go in and select those options.

What we’re going to do is in widget Style 2 we are not going to customize the background but we are going to customize the widget border or configure a drop shadow, configure rounded corners and configure widget padding but we’re not going to configure widget margin. We’re also going to customize our heading but we’re not going to customize the background.

I don’t think we’re going to customize the heading padding, assuming we’re not going to do the border or drop shadow or round corners for the heading. We’re not going to set a fixed height for the widget body, we are going to customize the typical widget font although we’re not going to customize the list style. I don’t think we’re going to do body, padding, margin or background or body border or drop shadow around the corners.

Those are the things that we’re going to change. If we hit Save, we’ve been given a bunch of choices then. You can choose to allow each side of the border to be different, hit Save and then what happens is you’ve got a top border with the width, a color and a style and so on and so forth but we’re not going to do that. We’re going to make the border the same all the way.

We’re going to make it 2 pixels wide, we’re going to pick a darkish gray for it and we’re going to make it solid. We’re going to do the same drop shadow thing we did before so that is 5 and 5 but we need to get the color right. It’s this color so we copy that because we wouldn’t want those to have a different drop shadow color sitting side by side. In our rounded corners, we’re going to give ourselves a corner radius of 20 pixels, let’s save that and see what happens.

We’ve applied Style 2 to it and hit refresh. All my text is white, that’s why you can’t see it and looks like it’s empty so we need to work on that. We come back over to our body text style and that’s a nice light gray. That’s Arial and I think it’s probably about 15 pixels.

Adjusting Text Settings

We’re not going to style Line Height although the font color is going to be darkish gray. We’ve got a couple of links and made those links specific color, I made the main link text this dark green, the hover text a lighter green and I underlined the hover text. If we Save this and we refresh it, there we go.

You can see our heading is still light so it needs some attention. You can see why we need padding because the margin pushed this away from the edge of the slideshow and we need padding to push the text away from the edge of the border. That’s what we’re going to do next.

When we look at overall padding, I think we’re just going to put 20 pixels all the way around or we could configure each one differently but we’re just going to say 20 pixels all the way around. In terms of our heading font style, we’re going to stick with Arial, we’ll make this 22 pixels and we’re going to use our red color that we have on the site for it.

By default, Thesis puts 2 pixels of spacing in between each letter for those sidebars. I don’t like that, I don’t often like that so we’re going to take it down to normal spacing, we’re going to get rid of the all caps thing that it’s got. However, we are going to center the heading text and we’re going to make it bold.

Now we can hit Save and refresh this. We are much closer to what we want this to look like. We want to change out the line height so we’re going to give ourselves some space here on either side of this thing. We are going to use padding for this and that means we’re going to come back over to the widget 2 styles and come down to our Heading, padding and hit Save.

Heading Padding

Under Heading Padding, we’re just going to give it 20 pixels bottom padding, that should move that phone number down, hit Save again, refresh it. I guess it needs some body padding too. What we’re going to have to do is to improve it a bit because I definitely want more room here.

The down and dirty way of dealing with this is to add a bottom margin to that h4 tag so margin bottom colon 20px, semicolon and hit Save. That’s my one cheat. It’s not really cheating, it’s actually the right way to do it but it feels like cheating since I said I’m going to teach you how to do this without using code. I might refine the plugin to allow that to happen.

Obviously, this widget got bigger based on its content. We could actually set the height of the widget if we wanted to but I actually want to use the same style here and the only way I’m going to be able to use that same style repeatedly is if I don’t actually set a fixed height. Let’s come over to our widgets and let’s look at Sidebar 1, let’s give it a Style 2 and hit Save. Come back over to that About Us page and hit refresh. Here’s the form that we created last week.

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