Adding color to widgets.

• 

  lynnawiensmd · Member · Jul 5, 2013 at 4:16 pm

  • Copy link
  • Add topic to favorites

  I would like to add color to my 3 bottom widgets, “nothing to sneeze at.” “cant get enough” and “everyone in Oklahoma has allergy”
  I would like your suggestions for the color..they could all be different. I will need some help with the CSS language. Thanks much.

  The blog I need help with is: (visible only to logged in users)

• 

  justpi · Member · Jul 5, 2013 at 9:53 pm

  • Copy link

  Please be more precise. “Color” might refer to the color of the background and/or the titles and/or the links. “Different” is also vague: for instance, color A for the title and the links of the first widget, color B for the title and the links of the second widget? or same color for the titles but differently colored links? or the opposite?

• 

  designsimply · Member · Jul 8, 2013 at 6:06 pm

  • Copy link

  In case it helps, here’s an example that will change the background color for the “Can’t get enough….” widget on http://tulsaallergynews.com/ using the Twenty Thirteen theme:

  #linkcat-173284609 {
  	background-color: rgba(250, 128, 114, 0.5);
  }

  I found the “linkcat-173284609” identifier by right-clicking on the widget in my browser, selecting the “Inspect Element” option, and then looking at the “id” value for the “aside” HTML element. Note that you must be using a browser that has a web inspector built in to do that: http://browsehappy.com/

  Once you know how to figure out how to find the identifier for each widget, you can add CSS for each different one with three separate CSS rules just like the one above.

  In the “background-color” property, you can change out the first three values in rgba() to change the color. I used “salmon” in this example. The last value in rgba() is the opacity which is set to 50% in the example above. You can adjust that as well. Here is a color chart with some RGB values for common colors: http://en.wikipedia.org/wiki/Web_colors#X11_color_names