Add Full Width Background To Sidebar Widget Title

Lets look at adding a full width background color to your sidebar widget titles.

We’ll use the genesis sample theme and populate the primary sidebar with the categories widget.

You’ll also find CSS at the end of this post which you can use to remove the top padding from your sidebar widgets.

Here’s the default:

And here’s what the CSS code in this tutorial produces:

Remove Left & Right Margin From Widget Title

Here’s the default code for the widget title from Line 694 of the themes style.css file:

.widget-title {
	font-size: 16px;
	font-size: 1.6rem;
	margin-bottom: 24px;
	margin-bottom: 2.4rem;
	text-transform: uppercase;
}

And here’s the modified CSS:

.sidebar .widget-title {
	background-color: #f5f5f5;
	margin-left: -40px;
	margin-right: -40px;
	padding: 20px 40px 20px 34px;
	text-align: center;
	font-size: 32px;
}

The modified CSS:

• includes CSS to add a background color
• removes the default margin for the widget title
• aligns the title center
• and increases the font size to 32px.

Remove Top Padding Above Widget Title

You can also remove the top padding above the widget title background by replacing the default sidebar widget CSS with modified CSS:

Here’s the default CSS for the sidebar widget located on Line 1312 of the genesis sample theme:

.sidebar .widget {
	background-color: #fff;
	border-radius: 3px;
	margin-bottom: 40px;
	margin-bottom: 4rem;
	padding: 40px;
	padding: 4rem;
}

And here’s the modified CSS which removes the top margin:

.sidebar .widget {
	background-color: #fff;
	border-radius: 3px;
	margin-bottom: 40px;
	margin-bottom: 4rem;
	padding-top: 0;
    padding-bottom: 40px;
    padding-right: 40px;
    padding-left: 40px;
}

And here’s what the modified CSS produces if you want to remove the top padding from your sidebar widgets:

Add Background Image To Widget Title

This CSS enables you to add an image from your child themes images folder as the background image to your widget titles:

.sidebar .widget-title {
	background-image: url(images/stripes.png);
	background-repeat: no-repeat;
	background-position: center center;
	margin-left: -40px;
	margin-right: -40px;
	padding: 20px 40px 20px 34px;
	text-align: center;
	font-size: 32px;
    color: orange;
}

And here’s the result the above CSS produces:

Note: The CSS in this tutorial produces exactly what you see in the screenshots when using the Genesis Sample child theme. The code may need modifying for use on other themes.

Pretty simple tips i hope you’ll find useful when styling your sidebar widget titles.

Related Tutorials

• Style Widgets Individually – Beginners Guide