Support » Themes and Templates » Widget background colors

Widget background colors

  • I want to change the background colors of the widgets in the navigation pane on the right but I can’t seem to find this location in the CSS files. Can you please point me in the right direction?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator Andrew Nevins


    Forum moderator

    Do you have a section of the dashboard named, “Custom CSS”?

    Under “Appearance” I have an “Editor” option. But I can’t find the correct CSS item to configure. I tried adding the background-color code in a few place but it did nothing at all.

    First, please know I am a rookie with a Twenty Twelve Child Theme, so I do not know whether this can be of any use to you at all. Also, I do not believe the Editor you have mentioned is going to let you add custom CSS. To do that, you either need to be working within a Child Theme or possibly a Custom CSS Plugin such as I believe is available from within JetPack…and now with the disclaimers and cautions out of the way, I began here…
    …and that is where I got this:

    /* =Widgets
    -------------------------------------------------------------- */
    /* style widgets */
    .widget {
    	    background: #c0cef7; /* light blue: http://www.colorhexa.com/6699cc or lighter: http://www.colorhexa.com/c0cef7 */
    	    background: rgba(192, 206, 247 0.4);
    	    border: 4px double #ffffff;
    	    -webkit-border-radius: 7px;
    	    -moz-border-radius: 7px;
    	    -o-border-radius: 7px;
    	    border-radius: 7px;
    	    padding: 5px;
    	    -webkit-box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
    	    -moz-box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
    	    box-shadow: 5px 5px 12px rgba(64, 31, 31, 0.5);
    	    list-style-type: none;
    .widget h3 {
    	    font-weight: bold;
    	    /* font-style: italic; */
    	    color: rgba(0, 0, 0, 0.6); /* black: http://www.netgfx.com/RGBaZR/ */
    	    text-shadow: 0 1px 1px #fff;
    .widget a {
    	    /* text-decoration: none; */
    	      color: #000000;

    …and you can see the result here:

    Welcome to NoNameYet A.A. Chat!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Widget background colors’ is closed to new replies.