Black strip under header/twenty eleven

  • Author
    Posts
  • #723678

    browndirt
    Member

    I am using twenty eleven w/ CSS upgrade and wondering if there is a way to remove the dark strip under the header? Or change color?
    Thanks!

    The blog I need help with is browndirt.wordpress.com.

    #723799

    micahcooksey
    Member

    Hi there,

    It looks like you were able to figure this out. Did you mean to remove the navigation as well?

    #723800

    That “dark strip” is the navigation menu. The color is actually a CSS3 gradient rather than a single color, but that takes about 5 separate background declarations and the CSS tidy thing used here will strip them out if you try and edit all of them, so I recommend going to just a single color.

    #access {
    background: #252525;
    }

    If you want to hide it, then do this

    #access {
    display: none;
    }

    Not though that then no one will be able to get to your “about” page, or any other static pages that you create unless you add the pages widget to your sidebar, or create a custom menu and then add the custom menu widget to the sidebar.

    #723803

    browndirt
    Member

    Oh wow, now I don’t know where it went. You are right, the navigation bar is gone. But the only CSS changes I’ve made are:

    #branding hgroup,#branding #searchform {
    display:none;
    }

    .entry-meta {
    display:none;
    }

    Hmm. Any idea why it might have gone away? Eeeps.

    #723808

    micahcooksey
    Member

    I tried reverting your changes and still no menu. For one thing, you don’t appear to have any pages in your menu. As a first step, try adding some in Dashboard -> Appearance -> Menus.

    Then we can go from there.

    #723810

    browndirt
    Member

    Ah, that was the problem with the disappearing bar. I put some random pages up.
    I tried stripping to single color but that didn’t seem to change anything?

    #723811

    It could be that the other background declarations for the menu (there are about 5 different gradients) are causing issues. Give this a try instead and edit the hex color code to your liking.

    #access {
    background: #252525 !important;
    }
    #723813

    micahcooksey
    Member

    So, to clarify, you changed the #access {background:xxx;} in your stylesheet to #access {background:#FFFFFF;} or similar?

    #723814

    browndirt
    Member

    is the #FFFFFF a hex color code? So i use that change with the number that I like?

    #723815

    micahcooksey
    Member

    @thesacredpath – It worked when I simply changed to a hex color code in Firebug without the !important declaration, but it’s worth a try, I suppose.

    #723817

    browndirt
    Member

    Bingo! Got it! Thanks a ton!! I really appreciate it!

    #723819

    micahcooksey
    Member

    No problem, glad to help!

    #723829

    Yep, #FFFFFF is a hex color code. Check out the Wikipedia page on web colors for excessive-but-good amounts of details: http://en.wikipedia.org/wiki/Web_colors :)

    #723852

    I would suggest if you keep the bright green color, that you change the color of the text (non-hover) to pure white for more contrast.

    #access a {
    color: #FFFFFF;
    }

    Or perhaps to the brown from your header image: #554422 .

    #723944

    browndirt
    Member

    Thanks so much!

    #723955

    You are welcome.

    #724047

    If you want to a tool to pick out colors from existing web pages, ColorZilla is a browser add-on for Firefox that I’ve always liked. Check it out: https://addons.mozilla.org/en-US/firefox/addon/colorzilla/

    #724054

    browndirt
    Member

    Thanks! That will help a lot!

    #724085

    I’ve read this thread with great interest. I’m also trying to change the color of the nav bar in twenty eleven and have tried various things but IT’S NOT WORKING!

    The code I see in my Stylesheet is this:

    /* =Menu
    ————————————————————– */

    #access {
    background: #222; /* Show a solid color for older browsers */
    background: -moz-linear-gradient(#D7D3D3, #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(#222, #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%;
    }

    I’ve tried changing the color code on this:

    #access {
    background: #222;

    But nothing changes.

    Can anyone help??

    NB I’m using this theme on wordpress.org – would that make any difference?

    Grateful for any tips.

    Thanks!

    Alda

    #724086

    timethief
    Member

    @lettersfromacademia

    lettersfromacademia.wordpress.com is no longer available.
    The authors have deleted this blog.

    That’s the result of clicking your username. Will you please provide an active link starting with http:// to the blog you are attempting to edit the CSS on?

The topic ‘Black strip under header/twenty eleven’ is closed to new replies.