How-to: Pad the “widget-shadow” Widget Class

[Terry Hale]

This tutorial will show you how to add a little bit of bottom padding to the widget-shadow class that Preferential allows you to assign to your widgets.

(When you are done, be sure to also check out How-to: Add drop glow to the “widget-shadow” class. 🙂 )

We will do this in such a way that this effect will only be added , and not to every widget-shadow styled widget. This allows you to keep styling in areas that are the way you want it, and modify it in areas that you might want to style a little differently.

Before we begin, make sure you have already

• Set up your child theme
• Installed the Widget CSS Classes plugin

A default WordPress installation includes widgets like Recent Posts, Recent Comments, and Archives in your Blog Right Sidebar. I really like the effect that the widget-shadow class gives to any widget. We will use those widgets as examples.

I wanted to add a bit of padding to the bottom so that the last link in each widget is not sitting right on top of the shadow. So here’s how you do it!

1. Open up your child theme’s style sheet

Go to Appearance>Editor in your WordPress admin area.

You should see something like the following. If you do not see Preferential Child: Stylesheet (style.css) then you have not set up your child theme yet!

2. Add a new class

Paste the following code into your child stylesheet: (make sure you do not insert this into the middle of another style section! Start a new line, then paste.)

/* Add some bottom padding to a widget */
.widget-bottom-padded {
	padding-bottom: 5px;
}

Adding a new class insures that we do not affect the styling of any widget-shadow class widgets that we don’t want to. This styling gives us a bit of space at the bottom, in a 5px size.

3. Add this class to a widget

When you place a widget into a widget position (and you have the Widget CSS Classes plugin installed) you can assign that widget one or more classes. For this tutorial, you want to add the widget-shadow and widget-bottom-padded classes to the widget, with a space between each class. Do this for each widget you want to apply the bottom padding to.

So, here is a before and after comparison. Experiment and enjoy the fruits of your labor! B)

[Author]

Posts