Need help? Check out our Support site, then


Widget areas - change background color and weight of font

  1. 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 internationalmountainconnection.com.

  2. Do you have the Custom Design upgrade?

  3. Yes! I forgot to mention that. I apologize! :)

  4. 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.

  5. 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;
    }
  6. Thank you!

    Just one more question! For the background colors, is it possible to have a different color for each widget area?

  7. 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.

  8. 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!

  9. 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/

  10. 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! :)

  11. The first one, Piknik, is mesmerizing. :)

  12. Yes it is!!!

  13. 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.

  14. Very cool! Thanks for the link!

Topic Closed

This topic has been closed to new replies.

About this Topic