How to Change Background Color of Text Widget – WordPress

In this Post I will show how you can quickly change the background color of a WordPress Text Widget.  Here are the instructions

Change the Background Color of all Text Widget

Use the following CSS rule to customize the background color of all text widgets.

.sidebar .widget_text { background-color:yellow; }

This rule will ensure that all text widgets have yellow as their background color. You can use the Simple Custom CSS plugin to add this style rule to your wordpress site

2. Change background color of a specific widget

In order to change the background color of a specific widget, you will first need to get the widget id. For that you will need to use firebug tool.  Using the firebug tool, just inspect the respective widget to get the id. Refer to the following screenshot

Here you can see that the widget id is text-2.

Now that you have the widget id simply modify the css rule to target the particular widget. Here is the rule

section#text-2 { background-color:yellow; }

This rule will only effect the text widget with id text-2.

Take note that we are targeting an element with id text-2 hence we have used a different CSS syntax.

Further Reading

WordPress Text Widget a really awesome. If you know a bit of CSS you can really make them sing. Here is a  short guide on customizing the WordPress Text Widget. It covers various use cases like adding Google Maps to Text Widget , adding images to widget etc.

no