How to Change Widget Background Color in WordPress? Here you can add a distinct CSS class for the particular you want to edit. You can create multiple custom styles of your own. 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. This gives each widget a light gray background color, with 10 pixels of padding around it, to prevent the text from bumping against the edge of the widget. #secondary .widget { background-color: #fff; } 2. .widget-2 { background-color: #858585; color:#FFF; } .widget-2 .widget-title { font-weight:bold; } You could specify the same background color as the page, but if you set the background color as transparent, then you don't have to worry about changing this line of code should your page's background color ever change..widget selects a number of children, but you need to get the parent. You can use a color picker like this if you need help finding a hex code. Change background color of a specific widget Hi all Custom Widgets are a great way to customize HABpanel. Quite often website owners need to change the widget background color of their WordPress site. The default background color in the WordPress Twenty Twelve theme is white; however, with the Background options in the Twenty Twelve theme, you can change the color. When you click on this Background Color option you’ll see two slider bars to the right of the color picker box. So to do this with only one widget, you’d only insert the HTML, the first section of code, into the first widget. It’s easy to say “Change the menu color”. To solve this, you can adjust the color of the bottom bar at “Extra > Theme Customizer > Footer Settings > Bottom Bar > Background Color”. Right-clicking anywhere on it and s… However, widget is a generic class that is used for all widgets, we need to use the class specific to the widget we need hence we use widget_recent_entries. Here’s how: On the WordPress Dashboard, click the Background link on the Appearance menu. Unfortunately, each theme has a different way of referring to its elements. Creating awesome looking styled widgets quickly. Step 6  – Publish and that’s it! Copy & paste this CSS into the Additional CSS section in your Customizer (Appearance > Customize). You can do this using the inspect element tool in most browsers. Now go to your theme’s stylesheet and add your custom style rules. Adding background color to WordPress Widget - … I used method 2, which worked for all but a sliver under the widget title. We will use 2 plugins. Smooth background color change effect allows you to automatically transition between different background colors. You can change the background color, the title color, and the text color. WordPress Text Widget a really awesome. .widget-2 { background-color: #858585; color:#FFF; } .widget-2 .widget-title { font-weight:bold; } Now, click on the Decoration tab. You can use it to color the names of… Here is the rule. Hello everyone, i would like to know if its possible to make the consent message background to be transparent. As you can see in the screenshot above, the widget we want to customize has widget-2 class added to it by WordPress. So it’s not something that applies to Text widgets, you’re actually inserting a div with a class into a Text widget and then using Custom CSS to manage that class. Here you can see that the widget id is text-2. Then, at the bottom of your browser, a link will appear. You’ll use this ID for your CSS class that is needed to change the background color of the single page. Click on the blue ‘Save & Publish’ button at the top & you’re good to go. This rule will only effect the text widget with id text-2. For example, you could use basic HTML to set the background and text color, such as: Now to use this style in your widget use.ctw-custom in the Colorful Text Widget’s widget style option. I used chrome inspector, copied with the selector and then pasted Both methods make use of CSS. Step 4 – At the bottom, you will see an additional field named CSS Classes. Well, you can add some CSS to fix it by defining a custom class whose name you can add in the widget. 8. We may earn referral fees when you buy services from companies that we recommend. You can also use the ID to select the widget. Before we can change anything, we have to get a handle on what we want to change. 5. 7. Alternative You can also find the CSS classof that specific page by: 1. For more code for WordPress see http://boomerempowerment.com/wordpress101/basic-html-codes-wordpress/ Step 1 – Find out the class of the widget whose background color needs to be changed. Go to Pages > All Pages and hover your mouse cursor over the Editlink of the page. in this case my wordpress theme was setting my link color and my background colors to be the same so i could not win for losing! Hi, I am Melba Brewer, a WordPress Enthusiast. Widget Customizer is a simple WordPress plugin which will enable you to style your own widgets in seconds! Just click on the element you wish to change (like the page background color, for example), and you will see the element’s name added in the top left corner of the control panel. In this post, I will show you how to change the widget background color in WordPress.eval(ez_write_tag([[468,60],'wpintensity_com-box-3','ezslot_5',108,'0','0'])); There are two methods to achieve this goal. Edit the background property’s values. Can you help? Here is how it will look. active / inactive). Step 5 – Add the following code to Additional CSS option in the Customizer of your theme. Method 1 – Using Widget CSS Classes Plugin, Conclusion: How to Change Widget Background Color in WordPress. Just change the #D0C2B2 part to the hex value of your desired color. In this method, we can take advantage of the fact that WordPress … I’m seeking for a solution like in the button widget, where you easily can change the background (e.g. It is a widely used plugin currently having over 100,000 active installations. The background directly behind the text in a widget does not change colour now. The topic ‘Change background color of search widget’ is closed to new replies. You might also need to change the text color and links, depending on the background color you choose. Click on the “custom” then the color box will appear where you have to add the color code on the “hash (#) box “ and Click ”OK” button. If you know a bit of CSS you can really make them sing. You can use the Simple Custom CSS plugin to add this style rule to your wordpress site. Hello everyone, i would like to know if its possible to make the consent message background to be transparent. Here is a  short guide on customizing the WordPress Text Widget. Method 2 – Without using Plugin. Step 2 – Go to Appearance >> Widgetseval(ez_write_tag([[300,250],'wpintensity_com-medrectangle-3','ezslot_4',109,'0','0'])); Step 3 – Click on Primary Sidebar or Footer or wherever the widget whose background color you want to change, is located. I used chrome inspector, copied with the selector and then pasted The Custom Background page opens on your Dashboard, displaying all the options for the […] As an example, I have changed the background color of the footer on just this page by adding the following CSS to define a class example-footer that produces a background gradient..postid-4206 .example-custom-footer The whole surface of the website pages One method requires the use of a plugin and the other one can be carried out without a plugin. Support Forum Instructions Use the search box below to search for your answer and also check out theme instructions at Theme Instructions before posting question here. The Category Color plugin lets you easily set a custom color for your categories. I tried using custom css code to my theme but i guess i cant make it to work. 1. It covers various use cases like adding Google Maps to Text Widget , adding images to widget etc. We hope this quick tip will help you make text widgets more fun and prominent. Your email address will not be published. Now that you have the widget id simply modify the css rule to target the particular widget. The Widgets CSS Classes Plugin gives us the ability to add custom CSS classes to widgets. The topic ‘Change Sidebar Widget Color Background’ is closed to new replies. Hi Guys. Also if you need more information about CSS selectors then you can read about them here. Step 3  – The rest of the steps are similar to the previous method. Now go to your theme’s stylesheet and add your custom style rules. You can use the Simple Custom CSS plugin to add this style rule to your wordpress site, In order to change the background color of a specific widget, you will first need to get the widget id. and so on. Just copy the css, rename.ctw-custom to something else and change the background-color and border values. 2. Here are the instructions. How to add a background color to a text widget. You can change color for: 1. If you want to change the background color of your theme, follow these steps: In the WordPress Dashboard, click the Editor link on the Appearance menu. From the Select Theme to Edit drop-down menu, choose the theme you want to change. Use the following CSS rule to customize the background color of all text widgets. Step 2 – A panel as shown below will open at the bottom of your screen. Colorize your widgets, set their background color, title color, text and links, with or without borders. Right-click on the widget you want to edit and click on inspect element. In fact, you probably don’t want to change the sidebar color, but the color of the constituent elements – the widgets. Thank you for contacting us about changing the background color of a footer widget. Although closer to the edge of the widget it does change colour. Just click on the element you wish to change (like the page background color, for example), and you will see the element’s name added in the top left corner of the control panel.