How To Change Background Color In Recent Post Widget

Quite often website owners need to change the widget background colour of their WordPress site. It can go quite tricky if your theme does not have that functionality. In this post, I will show you how to change the widget background color in WordPress.

Let the states get started!

There are two methods to accomplish this goal. Both methods make apply of CSS.

1 method requires the use of a plugin and the other one can be carried out without a plugin. The method which makes use of a plugin is easier and beginner-friendly.

Method 1 – Using Widget CSS Classes Plugin

Footstep one – Download, Install & Activate the Widget CSS Classes from your WordPress Dashboard. It is a widely used plugin currently having over 100,000 active installations.

Step 2 – Get to Appearance >> Widgets

Step 3 – Click on Chief Sidebar or Footer or wherever the widget whose background colour you lot desire to alter, is located.

Pace 4 – At the bottom, yous will meet an boosted field named CSS Classes. Hither you tin can add together a distinct CSS class for the particular y'all want to edit. I accept named information technology recentfor the Recent Posts widget as shown in the screenshot below.

Pace v – Add together the following code to Boosted CSS option in the Customizer of your theme. Alter the hex lawmaking (#858585 in this instance) to the one you similar.

                .contempo {  background-color: #858585; }

Step half-dozen – Publish and that'southward it! Relish the new groundwork color of your widget in WordPress.

Method ii – Without using Plugin

In this method, nosotros tin can accept reward of the fact that WordPress assigns classes to widgets by default. Our job is to find out the name of that class and use custom styling to information technology using CSS.

Footstep 1 – Find out the class of the widget whose background colour needs to be changed. You tin exercise this using the audit element tool in most browsers. Right-click on the widget you desire to edit and click on inspect element.

Pace 2 –A panel as shown below will open at the lesser of your screen. As you can see beneath, at that place are two classes assigned to the contempo posts widget namely widget and widget_recent_entries.Notwithstanding, widgetis a generic class that is used for all widgets, we need to utilise the course specific to the widget nosotros need hence nosotros utilize widget_recent_entries.

You lot can also apply the ID to select the widget. In this instance, the ID is contempo-posts-1.The selector for ID is different so brand sure to notation the change in code in the next step.

Step 3 –The rest of the steps are like to the previous method. Add the following lawmaking to Additional CSS.

                .widget_recent_entries                  {  background-color: #858585; }

                                  #contempo-posts-one                  {  background-color: #858585; }

Pace 4 –Click on publish and yous have successfully inverse the background color of the widget as desired.

Conclusion: How to Modify Widget Background Color in WordPress

Experience gratis to endeavor out various colors to find a suitable match for your site. Also if you need more than information almost CSS selectors and then you can read about them hither.

In instance you are facing whatsoever specific issue on your site, feel free to comment below.

Also read

How to Minimize Redirects in WordPress?

How to Change Font Size in Genesis?