Skip to:
Content
Pages
Categories
Search
Top
Bottom

How do I clear the menu bar?


  • bmg1227
    Participant

    @bmg1227

    I’m trying to figure out a way to clear the admin bar – what I’m saying is that I’d like my body to start after the admin bar, as it is messing up the background image I have and the spacing.

    I guess what I want to know is there a way for the body to start at the bottom of the admin bar, rather than having the admin bar overlay the body? I am trying to line up my background image and logo, and when logged in and the admin bar shows, it pushes the logo down, but not the background image.

Viewing 17 replies - 1 through 17 (of 17 total)

  • John James Jacoby
    Keymaster

    @johnjamesjacoby

    At the risk of over simplifying things a little bit…

    body {
    margin-top: 26px !important;
    }


    bmg1227
    Participant

    @bmg1227

    Forgive my ignorance, would this go in the home theme’s base.css or the admin bar’s css? I put it in the base.css, but it didn’t really work, What I’d like to do is have the admin bar just be at the top, and then just have everything start below it. Another question, is what file is the admin bar actually called?


    John James Jacoby
    Keymaster

    @johnjamesjacoby

    Well, it could really go in a few different places. Let me take a look when I get to work to see where will work the best.

    Here on BuddyPress, the “admin bar” has been nick named the “buddy bar.” It actually replaces the typical “admin bar” from a normal WPMU install.

    The files for it can be found in the bp-core directory if you needed to modify it for any reason.

    The buddy bar is actually loaded very last in the DOM, and it is absolutely positioned to top 0, so its essentially hovering over the body contents. Because there are at least two active themes at any given moment (home and member) you could either throw the css into homethemedir/css/site-wide.css, or all of the base.css for each theme.

    But let me double check for certain. :)


    bmg1227
    Participant

    @bmg1227

    Can you tell me which file specifically calls the admin bar? I see the bb-core-admin.php file in the directory, but can’t find the file that actually calls it.

    I have the same question.

    My site is 960px wide, and the buddybar looks great on the site (so far) as it sits centered right above the content. But, I’d rather have the buddybar span the entire width of the site (think 100% or min/max) while the rest of the site is still 960px wide. This will allow the bar to properly appear on the members blogs and the blog admin screens.

    http://www.mmaopinion.com (looks good, right?)

    http://brandt.mmaopinion.com (see how the bar moves to the left?)


    Burt Adsit
    Participant

    @burtadsit

    /mu-plugins/bp-core/bp-core-adminbar.php but the css gets enqueued in bp-core-cssjs.php in the same dir.

    There’s a bug in RC-1 that sends out the admin bar css after the site-wide.css so including your mods in there won’t do much good. Patch in : https://trac.buddypress.org/ticket/555

    The wp_footer action ‘calls’ the admin bar.


    bmg1227
    Participant

    @bmg1227

    Ok, so where can I hack the wp_footer – what I was hoping to do was drop a <div class=”clear”></div> after it so that the <body> can start AFTER the menubar. My issue is that with a background image that sits up top, the logo won’t align with it when the admin bar exists. When not logged in and there’s no admin bar, it’s fine. But the admin bar showing will push down my logo and therefor not align with my background image.


    John James Jacoby
    Keymaster

    @johnjamesjacoby

    Well, by giving the body a padding-top, it shouldn’t be happening like that.

    Crap I said margin above didn’t I?

    Try padding-top. That should push the background image also.


    Burt Adsit
    Participant

    @burtadsit

    The admin bar gets triggered on every ‘wp_footer’ action that your theme triggers. Which is on every page load. There is no function call from a php file that does it. bp is almost completely driven by wp ‘actions’. Everything gets loaded, defined and ready for the events that are defined to make things happen.

    Everybody is posting around each other here.

    The ‘wp_footer’ action is triggered by your theme’s usage of (normally) get_footer()

    which calls wp_footer()

    which does do_action(‘wp_footer’)

    which triggers bp_core_admin_bar() in bp-core-adminbar.php

    which gets you the admin bar.

    *deep breath*, let it out slowly now… :)

    So how can I split the buddybar away from the body? The body has a width of 960px…I want the buddybar to align left and span the entire width of the page. Is this possible?

    My question is more CSS-based, but it’s the same general idea around the Buddybar…how can we seperate the bar from the body?


    bmg1227
    Participant

    @bmg1227

    John, I tried your technique, but when not logged in, it leaves that space that would normally be occupied by the admin bar just blank space. I wish there was a way to call the admin bar like a navbar, put it in it’s own <div> and then not have the admin bar overlay everything.


    Burt Adsit
    Participant

    @burtadsit

    We haven’t met. I’m Burt and this is my partner John. Perhaps you’ve heard of us? Our professional tag team wrestling stage names are Ren and Stimpy. I never get to play with the pretty css stuff. :(


    John James Jacoby
    Keymaster

    @johnjamesjacoby

    lol Oh Ren… haha!

    @brandtd, this is certainly possible. As a matter of fact, this should happen as default unless you change the width of the body or html elements themselves. This is because the “Buddy Bar” isn’t contained by anything that has a relative position attached to it.

    In bp-core/css/admin-bar.css – Try…

    #wp-admin-bar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1001 !important;
    height: 26px !important;
    color: #fff !important;
    text-align: left !important;
    background:url(../images/admin_bar_back.gif) #818181 repeat-x !important;
    }

    @brian, duh I get what you’re saying now. If I can give some feedback about the Buddy Bar for a moment, I feel that it should be an all or nothing kind of deal. Either it’s always there for people to use, or it’s never there and people have to naturally find their profile area and do things from there. Toggling a whole new set of what are essentially just short-cuts and adjusting the entire layout of the screen, even if by 26px, provides for a moment of awkwardness from a user perspective. For the 3 seconds it takes for someone to think to themselves “Hey what’s that? Do I need it? What does it do? Oh gosh there’s tons of menus now? What is this stuff?”

    Now if you’ve used WordPress.com or signed up for a Gravatar before, then the bar idea isn’t new. But for what I consider the core crowd we’re catering to by using BuddyPress as a social networking platform, if it isn’t uniformly worked into the design of the site from the beginning, it only serves to confuse.

    Again, this is just my opinion. Not saying it’s right, and certainly not saying that there is a better way. Just saying… :)

    /rant

    Back on topic. In theory you could put a…

    <body>
    <?php if (is_user_logged_in()){ ?>
    <div id="buddy-bar-buffer"></div>
    <?php }?>

    In your header file, and attach the CSS to that, rather than to the body itself? That would then only show that buffer when the user is logged in, and once they are logged in, that buffer will push the body down (as styled by the CSS you will give it in your base.css).

    Does that make sense?

    @bmg1227: The admin bar CSS adds: body { padding-top: 28px !important; } to make space for the admin bar.

    Have you tried putting your background image on the html element?


    benny148148
    Participant

    @benny148148

    “Have you tried putting your background image on the html element? “

    Andy, when you refer to the “html element” what exactly do you mean? Adding the background image into the Admin Bar’s stylesheet?

    Thanks


    benny148148
    Participant

    @benny148148

    I’ve included a couple images to show my problem. In the first image, the admin bar is not displayed because a user is not logged in.

    In the second image, the wrap and header div id’s shift downward (along with the rest of the page), but the background image stays fixed, which causes an unpretty distortion.

    I’d like to have the background image flow perfectly at all times, including when the admin bar is showing. Where should I hard code the background image?

    Image when users not logged in (looks good)

    http://www.screencast.com/t/5HLrC1WH

    Image when users ARE Logged-In (distorted)

    http://www.screencast.com/t/pm4q54te6

    I apologize if this is a simple question, I’ve been trying for hours to get it to work.

    Thanks


    John James Jacoby
    Keymaster

    @johnjamesjacoby

    No apologies necessary… :)

    What Andy meant was applying the background image to the html instead of the body, like so…

    Instead of…

    body {
    #EEEEEE url(images/bgbp.png) repeat-x scroll 0 0;
    }

    use…

    html {
    #EEEEEE url(images/bgbp.png) repeat-x scroll 0 0
    }

Viewing 17 replies - 1 through 17 (of 17 total)
  • The topic ‘How do I clear the menu bar?’ is closed to new replies.
Skip to toolbar