Twenty Twelve
Widget background colors (4 posts)

  1. Arneman
    Posted 2 years ago #

    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?

  2. Andrew
    Bawk bawk moderator
    Posted 2 years ago #

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

  3. Arneman
    Posted 2 years ago #

    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.

  4. leejosepho
    Posted 2 years ago #

    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:

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic