Changing The Background Colour Of A Widget

ilsanite · Member · Feb 17, 2017 at 4:19 pm
Copy link

Add topic to favorites
Hi, I’m customising a premium blog where you can style the CSS. I want to change the background COLOUR of the widgets to add my personal touch. Is there any way I can do this using HTML or CSS!
it is not my site but I am designing it at :
https://ipunablack.com/

The blog I need help with is: (visible only to logged in users)
staff-loquaciousloon · Staff · Feb 17, 2017 at 7:22 pm
Copy link
Hi @ponderingpossibly!

If you want to change the background color of all widgets, try this CSS:
```
.widget {
	background: #B8F8D4;
	padding: 10px;
}
```
That’s a light green color, you can swap out a different HTML color code of your own :)

You could also use .widget-area instead of .widget if you wanted to make one large background block instead of separate ones for each widget. :)
ilsanite · Member · Feb 18, 2017 at 12:26 pm
Copy link
Hi,
I copied and pasted that into the site https://ipunablack.com/CSS sheet on the CUSTOMIZER and changed the hex code to #FE9E95
and nothing happened. Slightly confused?
thesacredpath · Member · Feb 19, 2017 at 2:03 am
Copy link
Hi @ponderingpossibly, there is a missing ending curly bracket on your second custom CSS rule. If you put in that missing bracket, the color will show up.
ilsanite · Member · Feb 19, 2017 at 11:56 am
Copy link
Thank you! That worked perfectly! Is there any way to change the colour of a SPECIFIC widget?
thesacredpath · Member · Feb 20, 2017 at 7:00 pm
Copy link
Yes, you can do that by using the unique CSS id assigned to the individual widgets. As an example, this would change the background color of you bio text widget to salmon.
```
#text-38 {
  background-color: salmon;
  padding: 10px;
}
```
Here is a screenshot of my browser inspector window showing where the widgets are and the above text widget is highlighted in blue: https://cldup.com/D1AGFimJXa.png.
ilsanite · Member · Feb 20, 2017 at 8:04 pm
Copy link
Okay. Thank you, trying that out now and I’ve found all the widget id’s! It’s worked for what I wanted it work for so thank you!
thesacredpath · Member · Feb 21, 2017 at 7:41 pm
Copy link
You are welcome.

No items found.