How-to: Add drop glow to the “widget-shadow” class

[Terry Hale]

In the practical How-to: Pad the “widget-shadow” Widget Class tutorial, we learned how to add bottom padding to any widget on your page that uses the “widget-shadow” class.

This information is more for fun than practicality, but if you are using only one or two Preferential colors, this might be for you!

How about adding a colored drop shadow to your widgets? But, since by definition a shadow has no color, we might want to call this a drop .

If you haven’t already, make sure you set up your Preferential Child Theme before going any further! If you make changes to your parent’s style sheet, those changes will be lost if there is a Preferential update released.

You also need to have the Widget CSS Classes plugin installed on your site. You can search for this from the Plugins>Add New menu on your WordPress admin screen.

Since this process involves opening the parent style sheet, I’m just going to provide the CSS for these drop glows that you can safely put into your child style sheet. If you do not know how to access your child style sheet, see the link to the padding tutorial at the very top of this post.

From the parent style sheet, I got all the hex color values (e.g. “lightblue” is #8db5d9) for the color set Preferential provides. Those were then converted to RGB values with an alpha value as well for opacity.

After pasting the code at the end of this post into your child’s style sheet, you will be able to add the following classes into the CSS Class: section of a widget you add to a widget position.

• glow-darkblue
• glow-blue
• glow-lightblue
• glow-orange
• glow-green
• glow-red
• glow-brown

Make sure you are also including widget-shadow as a part of the CSS Class: field!! There needs to be a space between each class.

Here is an example of drop glows in the right sidebar on a default WordPress setup.

Except for glow-darkblue, the colors are a little weak, even with the alpha set all the way up to 1.

(Think of alpha as a % of visibility or opacity. So an alpha of .9 is 90% opacity and an alpha of 1 is 100% opacity.)

You can experiment with the box-shadow: 0 0 40px settings to get different effects. You can create your own colors as well. If you are like me (totally clueless about setting up related colors) you can use an online palette generator.

Make sure you are doing this in your child theme style sheet! Unless you swear you will never, ever update your Preferential theme if one becomes available. 😛

Here’s the code to paste:

.widget-shadow.glow-darkblue:after  {
	-webkit-box-shadow: 0 0 40px rgba(57, 78, 99, 0.9);
	box-shadow: 0 0 40px rgba(57, 78, 99, 0.9);
}
.widget-shadow.glow-blue:after  {
	-webkit-box-shadow: 0 0 40px rgba(91, 153, 197, 1);
	box-shadow: 0 0 40px rgba(91, 153, 197, 1);
}
.widget-shadow.glow-lightblue:after  {
	-webkit-box-shadow: 0 0 40px rgba(141, 181, 217, 1);
	box-shadow: 0 0 40px rgba(141, 181, 217, 1);
}
.widget-shadow.glow-orange:after  {
	-webkit-box-shadow: 0 0 40px rgba(222, 181, 56, 1);
	box-shadow: 0 0 40px rgba(222, 181, 56, 1);
}
.widget-shadow.glow-green:after  {
	-webkit-box-shadow: 0 0 40px rgba(158, 178, 91, 1);
	box-shadow: 0 0 40px rgba(158, 178, 91, 1);
}
.widget-shadow.glow-red:after  {
	-webkit-box-shadow: 0 0 40px rgba(203, 85, 68, 0.9);
	box-shadow: 0 0 40px rgba(203, 85, 68, 0.9);
}
.widget-shadow.glow-brown:after  {
	-webkit-box-shadow: 0 0 40px rgba(153, 124, 88, 0.9);
	box-shadow: 0 0 40px rgba(153, 124, 88, 0.9);
}

[Author]

Posts