Widget areas – change background color and weight of font

internationalmountainconnection · Member · Jun 30, 2013 at 11:17 am
Copy link

Add topic to favorites
Hello, I have two questions regarding the widget areas in the Responsive theme.

1) How can I change the background color of each individual widget area (home left, home center, home right) ? Is this possible? And,

2) How can I change the weight of the font to be heavier in all of the widget areas mentioned above?

Thank you so much for your help! I really appreciate it!!!

The blog I need help with is: (visible only to logged in users)
raincoaster · Member · Jun 30, 2013 at 11:34 am
Copy link
Do you have the Custom Design upgrade?
internationalmountainconnection · Member · Jun 30, 2013 at 11:55 am
Copy link
Yes! I forgot to mention that. I apologize! :)
designsimply · Member · Jul 2, 2013 at 12:21 pm
Copy link
1) How can I change the background color of each individual widget area (home left, home center, home right) ? Is this possible? And,

To change the background color of widgets in the Responses theme, add this to your Appearance → Themes → Customize → CSS panel:
```
.widget-wrapper {
	background-color: #ffc;
	border: 1px solid #ccc;
}
```
Adjust the color codes as needed.
designsimply · Member · Jul 2, 2013 at 12:21 pm
Copy link
2) How can I change the weight of the font to be heavier in all of the widget areas mentioned above?

To turn all the fonts inside Responsive theme widget areas bold, you could do something like this:
```
.widget-wrapper * {
	font-weight: bold;
}
```
internationalmountainconnection · Member · Jul 3, 2013 at 8:02 am
Copy link
Thank you!

Just one more question! For the background colors, is it possible to have a different color for each widget area?
designsimply · Member · Jul 3, 2013 at 9:01 pm
Copy link
For the background colors, is it possible to have a different color for each widget area?

To do that, you would need to look up the specific class or ID for each widget and then add a new CSS rule to adjust the background color for each one.

I’ll walk you through one example.

1. Go to http://internationalmountainconnection.com/
2. Right-click on on a widget you want to target (I chose the one with “English Lessons for Guides” in it for this example) and select the “Inspect Element” option
3. That should pull up a panel with the HTML highlighted for what you clicked on, read back through the HTML until you find the tag that has a class name like “widget-wrapper” like this:
<div id="text-2" class="widget-wrapper widget_text">
4. Copy the ID value, “text-2” in this case
5. Then go to Appearance → Themes → Customize → CSS panel and add a new rule that uses the “text-2” identifier with a “#” in front of it and it will target just that container:
```
#text-2 .widget-wrapper {
	background-color: pink;
	border: 1px solid red;
}
```
You’ll want to remove the “.widget-wrapper” rule first since that might override the new ones if you don’t.

Here is a complete example for your current widget setup:
```
#text-4.widget-wrapper {
	background-color: #ffc;
	border:1px solid #ccc
}

#text-2.widget-wrapper {
	background-color: pink;
	border: 1px solid red;
}

#text-5.widget-wrapper {
	background-color: lightgreen;
	border: 1px solid green;
}
```
Change the color codes as needed.

If you change the widgets later, then you will need to follow the rules above to update the CSS to match the new widget identifier codes.
internationalmountainconnection · Member · Jul 9, 2013 at 8:24 am
Copy link
Yay! Thank you so much!!! I appreciate your help!

And thank you for the explanation for finding the right ID value. I had tried using the “inspect element” option to see if I could figure it out on my own, but I have to admit I was a bit lost after that. It’s definitely becoming much clearer, thanks to you!!!

I will definitely keep this information nearby so I can remember how to find the new widget identifier codes if / when I change the widgets later.

Next step… find the right color combination!
designsimply · Member · Jul 9, 2013 at 2:26 pm
Copy link
I had tried using the “inspect element” option to see if I could figure it out on my own

Did you get it working?! Maybe try the keyboard shortcut which is Ctrl + Shift + I for Chrome on Windows. Also, check this out: https://developers.google.com/chrome-developer-tools/

Here are some fun color picking sites I’ve used in the past:
* http://color.aurlien.net/
* http://0to255.com/
* http://www.visibone.com/colorlab/
internationalmountainconnection · Member · Jul 9, 2013 at 2:47 pm
Copy link
Yes, I got it working! Thank you!

You are completely spoiling me with the color picking sites. I am definitely going to check them out!!! :) Yay! This is the fun part! :)
designsimply · Member · Jul 9, 2013 at 7:43 pm
Copy link
The first one, Piknik, is mesmerizing. :)
internationalmountainconnection · Member · Jul 11, 2013 at 7:03 am
Copy link
Yes it is!!!
internationalmountainconnection · Member · Jul 12, 2013 at 11:47 am
Copy link
FYI- I found this site very helpful for picking colors. If you have one color in mind, you can enter the code and it shows you all of the options that go with it. :)

http://www.colorsontheweb.com/colorwizard.asp

They also have a color contrast analyzer.
designsimply · Member · Jul 12, 2013 at 7:46 pm
Copy link
Very cool! Thanks for the link!

No items found.