How to style custom widget areas using CSS

Sometimes your WordPress theme just doesn’t have enough widget areas and you may need to add some additional custom widget areas to your WordPress theme and then style them using your stylesheet. This WordPress tip will show you how to style your newly added custom widget areas using CSS.

First, you will need to register or add your custom widget areas. If you are using a StudioPress Genesis Framework theme, you can click here to find out How to add more custom widget areas to StudioPress Genesis Framework themes.

After your widget areas have been registered, you can then style those new widget ares in your stylesheet using CSS. You will need the widget_area_id that you used when you registered the widget in your functions.php. For the example below, I am showing you how I styled the part of the Home Top area on the home page of WPSnacks. The id for my Home Top area is home-top. Keeping your widget area simple will come in handy later on.

#home-top {
	background-color: #fff;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
	overflow: hidden;
	font-family: 'Cuprum', arial, sans-serif;
	margin: 0 0 15px;
	-moz-box-shadow: 0 0 4px #fff;
	-webkit-box-shadow: 0 0 4px #fff;
	box-shadow: 0 0 4px #fff;
}

#home-top a {
	color: #FF6600;
	font-size: 18px;
	font-weight: normal;
}

#home-top a:hover {
	color: #28b5f0;
}

As you can see above, the first command sets up the Home Top area itself and the next two commands deal with links. This is just an example, there are endless customization possibilities using this method.