Remove BuddyPress bar and CSS on some themes

Hi there,
I'm using the Buddypress community theme on my main site but what I would like to do is configure certain themes so that they do not display the Buddypress admin bar at the top. I've added the following code to the functions.php file:

<?php
remove_action('wp_footer','bp_core_admin_bar',8);
remove_action('admin_footer','bp_core_admin_bar',8);
remove_action('wp_head', 'buddypress_global_adminbar_css');
remove_action('admin_head', 'buddypress_global_adminbar_css');
?>

The result is that the Buddypress admin bar is removed but the global CSS file is still there, so the site has an empty 25px of padding at the top of the screen.

Any ideas how to remove the CSS from appearing?

Cheers,
Stuart.

  • Mason

    Hiya Stuart,

    Again, that's where a link would be helpful. :smiley:

    Did you try the code I posted? I tested the solution above on a local install and the code I gave ya works fine.

    If you open up style.css you'll see where it pulls in each of the stylesheets. You can either add the code I submitted to the very bottom (which will override all changes above) or you can comment out the reference to the admin bar completely by adding "//" to the front of line 84 like this:
    //@import url(_inc/css/adminbar.css );

    Thanks.

  • stuartm

    Hi again.
    Here's the link as requested: http://amanzi.blogtown.co.nz/ perhaps it will help you understand the issue.
    The solution you posted doesn't work because the Buddypress adminbar CSS is inserted into the document through a global plugin and the wp_head hook. So it will always take precedence over previously declared CSS files. Also, because it's being inserted through a plugin, you can't just comment it out like you recommended.
    The best solution I can think of is to use the "remove_action" function but as this isn't working, perhaps it's not possible?
    Stuart.

  • Mason

    Hiya Stuart!

    Cool! Now we can both see what's happening! :smiley:

    the Buddypress adminbar CSS is inserted into the document through a global plugin and the wp_head hook.

    Sorry, but that's incorrect. Take a look at the bit of code in question with firebug. You'll see it's referencing this theme file:
    http://amanzi.blogtown.co.nz/wp-content/themes/bp-community-child/_inc/css/adminbar.css

    The main point here being that it's in the themes directory as part of your BP Community Child theme.

    If you'll grab a new copy of the theme you'll see that the original child theme has the references I mentioned above and makes it easy to comment things out such as the adminbar.css that's giving you trouble here. The cleanest solution would be to go back and implement these lines into your code and then follow with the custom CSS you have currently.

    Alternatively, you could go into bp-community-child/_inc_css_adminbar.css and delete or comment out any code there you're not happy with.

    Finally, you can always overwrite CSS through the oft ill-advised '!important' property. In your case that would look like this:
    body {
    padding-top: 0px !important;
    }

    Once again, drop it into your style.css. This'll take care of the issue. Promise. :smiley:

    Also, if you haven't checked it out yet, Tammie has put together a great video on getting firebug up and running and how it works:
    http://buddydress.com/2010/06/firebug-installing-discovering-and-using-the-tutorial/

  • stuartm

    Hey, I do appreciate the time you're spending on this, so please don't think I'm being ungrateful, but you still don't quite understand what's going on here.

    The css file you referenced (http://amanzi.blogtown.co.nz/wp-content/themes/bp-community-child/_inc/css/adminbar.css) is being inserted into the page with a plugin. The plugin is called "bp-global-adminbar-css.php" and it resides in the "mu-plugins" folder. This is the line of code which puts it into the page:
    add_action('wp_head', 'buddypress_global_adminbar_css'); // init global wp_head

    What this does is add the CSS file to every blog in the network. Any changes I make to the CSS file will affect every blog on the network. What I want to do is to stop the plugin from loading on one of the sites running a specific theme. Using the "!important" declaration in the theme's stylesheet may work, but as you said it's ill-advised and I'd rather not do it that way as I can't be guaranteed that all browsers will respect it in the same way. Also there are a lot of other styles in there which are useless without the adminbar so I would rather not have them load in the first place.

    Does this make sense yet?

    Cheers... Stuart.

  • Mason

    Hiya,

    Once again, I can only explain that the CSS file we're both linking to is located in the bp-community-child directory. It comes packaged with BP Community. We designed it to function this way.

    The code you posted in the original post does away with anything the plugin would add. As you so aptly point out the plugin uses:
    add_action('wp_head', 'buddypress_global_adminbar_css'); // init global wp_head

    Which is removed by this:
    remove_action('wp_head', 'buddypress_global_adminbar_css');

    You seem to have an understanding of how WordPress plugins work, but in this case the plugin is not the cause of the code, the theme's own CSS files are responsible. Because of this, the normal CSS (cascading style sheets) flow is in effect - The last property referenced will take control.

    Any of the options I mentioned above will work for you.

    I'm attaching two images. The first shows when the stylesheets are being pulled in (the second being the theme's adminbar.css) and thus why you have a problem.

    The second uses firebug shows how the problem easily goes away if we remove the code from the stylesheet.

    Hope this helps clarify things a bit!

  • stuartm

    Hey thanks again. I know how Firebug works - I use it all the time, along with the Webkit developer tools that are included with Chrome/Safari, and I also use the IE8 developer tools when troubleshooting the IE compatibility.

    In your Firebug window you are removing the body padding from the adminbar CSS file - I don't want to do this as it affects every site on the network. I just want the CSS file to not be applied to one particular theme.

    You just posted this statement:

    The code you posted in the original post does away with anything the plugin would add. As you so aptly point out the plugin uses:
    add_action('wp_head', 'buddypress_global_adminbar_css'); // init global wp_head
    Which is removed by this:
    remove_action('wp_head', 'buddypress_global_adminbar_css');

    But therein lies the root problem! The following line does not work:
    remove_action('wp_head', 'buddypress_global_adminbar_css');

    If that line of code worked, the adminbar CSS file would not be inserted into the theme. So my original question still stands: why does the following line of code not work?
    remove_action('wp_head', 'buddypress_global_adminbar_css');

  • Tammie

    @stuartm: Hi there MasonJames has asked me to look into this one for you. I'm a theme designer here so hope to provide you with some assistance.

    First up lets make sure I'm on the same page as you so to speak. You are using BuddyPress community and you want only on some themes to not show the BuddyPress admin bar. Is this correct? You've got the bar gone but in some themes you still get issues where there is padding showing as the child theme is calling the CSS. Is this correct?

    You're going to have to forgive me if not on the right page so to speak but I've reviewed this thread and comments and have some suggestions.

    Assuming both of these is correct I have looked at your site: http://amanzi.blogtown.co.nz/

    Now part of your issue will be the cascading nature of CSS - last one in last style you pay attention to so to speak.

    You can get rid of the padding or white block at the top using 3 methods:

    1. In the child CSS just change the padding to 0:

    body {
    padding-top:25px;
    }

    becomes

    body {
    padding-top:0px;
    }

    2. In the child CSS in child-style.css put the following:

    body {
    padding-top:0px;
    }

    3. In header add the CSS - easy to do in any theme want to have it.

    <style>
    body {
    padding-top:0px;
    }
    </style>

    You may need to do a !important but you also may not need to in all cases best to try without one first. !important is used to override the cascading nature. You've probably already seen what happens in firebug as you seem very capable with that so won't give a screenshot to show.

    The add / remove isn't dealing with child themes therefore never will remove that padding declaration so my advice would be assuming I'm on right track the routes outlined. With CSS it's the last thing you call ie; cascading hence your issues I'm fairly sure.

    This to me is just a pure CSS issue. I can confirm changing child CSS will NOT effect every site UNLESS it uses that theme and in that case yes it will but you could always create a with admin bar and without admin bar child theme version - easy to do and the best method.

    You seem fairly used to things so I won't tell you how to do a new child theme as you probably know already but just shout if you want me to take you through that - I think it would give you the best results.

    Hopefully that has resolved the matter or at least made things clear. Just let me know if I can assist you in any other manner.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.