Support » Themes and Templates » twenty eleven: Custom Menu color change failing

  • Resolved peteraloha

    (@peteraloha)


    I edited the color for the custom menu color from a black to a blue (see code in child theme below). It worked well. Then, after switching back and forth to another theme, suddenly that color change seems to only work in IE, but no longer in FF and Chrome.
    Any input is appreciated. THANKS!

    #access {
    background: #110976; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#252525, #0a0a0a);
    background: -o-linear-gradient(#252525, #0a0a0a);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
    background: -webkit-linear-gradient(#252525, #0a0a0a);
    -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    -moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px;
    clear: both;
    display: block;
    float: left;
    margin: 0 auto 6px;
    width: 100%;
    }
    #access ul {
    font-size: 13px;
    list-style: none;
    margin: 0 0 0 -0.8125em;
    padding-left: 0;
Viewing 5 replies - 1 through 5 (of 5 total)
  • Your first background declaration:

    background: #110976; /* Show a solid color for older browsers */

    is being overridden by your later background declarations:

    background: -moz-linear-gradient(#252525, #0a0a0a);
    background: -o-linear-gradient(#252525, #0a0a0a);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#252525), to(#0a0a0a)); /* older webkit syntax */
    background: -webkit-linear-gradient(#252525, #0a0a0a);

    The first one is blue, but all the others are gradients from gray to darker gray. In all browsers that understand gradients, the later declarations take precedence. Because Internet Explorer is the only browser you tested that doesn’t understand gradients, it is the only one that displayed blue.

    Either remove the gradient declarations or change them to blue.

    THANKS, pd!

    Excuse my ignorance, how much of the code block I have entered on my child theme would I remove: The 6 lines starting with “background”?
    Is there an easy way to state what a linear gradient declaration does? (very basic explanation?)

    btw, removed the background linear gradient declarations, and BINGO!…………your comment has met their educational goal!

    Glad that worked for you. In answer to your question, gradient declarations create gradual changes from one color to another. It’s very subtle in TwentyEleven, so the effect is difficult to see. If you click on some of the examples (the square boxes of colors) at http://www.colorzilla.com/gradient-editor/ , what the effect does should be more clear.

    Yes, followed the link you posted and got it now. THANKS for your great help!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘twenty eleven: Custom Menu color change failing’ is closed to new replies.