WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] [closed] Admin bar CSS (29 posts)

  1. esmi
    Forum Moderator
    Posted 3 years ago #

    The Admin bar adds the following CSS to all front facing pages:

    body {
        padding-top: 28px !important;
    }

    This can severely disrupt any absolutely positioned elements on the page. A better approach might be to use:

    body {
        position: relative !important;
        top: 28px !important;
    }

    which (in theory) should preserve any existing positioning.

  2. If you have problems with it, you can define your own callback or remove it with
    add_theme_support( 'admin-bar', array( 'callback' => '__return_false') );

  3. esmi
    Forum Moderator
    Posted 3 years ago #

    Thanks. I hadn't realised that the admin bar was being added via add_theme_support. I'll dig a little deeper into this. However, I still think that the default CSS needs looking at.

  4. Andrew Nacin
    Lead Developer
    Posted 3 years ago #

    The admin bar isn't added by theme support -- it's considered supported by default. The code ocean90 posted is designed to allow you to offer your own callback for rendering the CSS for the admin bar, or in the case of __return_false, noop and have no new CSS.

    We actually spent quite a while going over the CSS. Review our work at http://core.trac.wordpress.org/ticket/15851.

  5. SEO Dave
    Member
    Posted 3 years ago #

    I'm rewriting a themes code (theme runs on thousands of sites) for a new release and have it working perfectly in WordPress 3.0.4 and below, wise to test on the beta release and hit a snag.

    The padding was breaking my themes layout, wasn't able to get it to work with WordPress 3.1 and earlier version of WordPress. One div was thrown off.

    I tested Esmi's code with my theme and it looks like it resolves the issue.

    I have a div positioned with this CSS

    .navbar {
    width: 990px;
    position: absolute;
    top: 115px;
    }

    this is not unusual theme code.

    With the current WordPress 3.1 beta code it's obviously not taking the 28px padding into account, so when the admin bar is present it's 28px to high. With Esmi's CSS code (as a replacement for the Admin bars CSS) it's where it should be.

    I didn't want to force theme users to turn the admin menu off by default.

    I've fixed the issue by adding a wrapper div to the whole theme and giving it position:relative; which means the absolute element that was being positioned absolute to the body is now positioned absolute to the wrapper div which is padded down in WordPress 3.1 and not in WordPress 3.0 and below. Really shouldn't have to add this fix when a simple bit of CSS on the admin bar would have avoided it for my theme and presumably lots like it.

    David

  6. krogsgard
    Member
    Posted 3 years ago #

    Playing with the admin bar activated and not activated / logged in and not logged in, I noticed that when activated but not logged in it will take on padding other than 28px from the theme if defined.

    For instance, if the theme padding is set to body {padding-top: 80px;} it will show up as 28px when the user is logged in and the admin bar is displayed, and 80px when the user is not logged in and the admin bar is not displayed.

    Would it be a good idea to make the forced padding to apply (to 0px rather than 28px) even when the user is not logged in? That way theme authors will use margin to achieve what they want and not make the experience different for the user depending on their login status.

  7. Andrew Nacin
    Lead Developer
    Posted 3 years ago #

    We're changing what's in core to another solution we really like.

    http://core.trac.wordpress.org/ticket/16222

  8. ParaGate
    Member
    Posted 3 years ago #

    How can we turn off the admin bar? It is covering my Buddypress menu. Thank you!

  9. Stream The Game
    Member
    Posted 3 years ago #

    How can we turn off the admin bar? It is covering my Buddypress menu. Thank you!

    Same here?

    Is there not an option to simply turn it off.

  10. Stream The Game
    Member
    Posted 3 years ago #

  11. summerchilde
    Member
    Posted 3 years ago #

    @ParaGate

    open up your theme functions.php and add the following:

    /* Disable the Admin Bar. */
    add_filter( 'show_admin_bar', '__return_false' );

    /* Remove the Admin Bar preference in user profile */
    remove_action( 'personal_options', '_admin_bar_preferences' );

  12. Samuel Wood (Otto)
    Tech Ninja
    Posted 3 years ago #

    Or just go to Users->Your Profile and click the checkboxes. No need for extreme code editing when the thing is optional to begin with.

  13. Rev. Voodoo
    Volunteer Moderator
    Posted 3 years ago #

    Buddypress is being updated as we speak to accomodate this

  14. Mike Seifried
    Member
    Posted 3 years ago #

    I've got one theme where the admin bar background appears but none of the menu items. I found one theme element (the nav bar) with a z-index of 99999. Thinking this conflicted with the z-index of the admin bar, I changed the z-index of the nav bar to 9999. That didn't help. Any ideas?

  15. mexicanNewbie
    Member
    Posted 3 years ago #

    HI !!
    HOW CAN I ADD SOME CSS STYLE TO THE ADMIN BAR TO CUSTOMIZE IT ????

    PLEASE HELP !!!!!

    Ive just founded information about turn it off, but no to style it. Its suposed you can turn it off with

    addfilter('show_admin_bar', '__regurn_false');

    but... Aren't filters a way to manipulate the html content??? How can I style or add some html to the ADMIN BAR???

    THANKS FOR YOUR HELP AND ATTENTION !!!

  16. Add HTML: http://sumtips.com/2011/03/customize-wordpress-admin-bar.html

    Customize is just CSS. View the source of your page with the admin bar and add your changes to your theme's CSS :)

  17. mexicanNewbie
    Member
    Posted 3 years ago #

    Hey THANKS A LOT IPSTENU !!

  18. mexicanNewbie
    Member
    Posted 3 years ago #

    YES YOU'RE RIGHT !! BUT ....

    YES you're right... i searched the code and the ID is wpadminbar so i applied a red border with solid style and 2 px and IT WORKED !! BUT .... i tryed to set a "fixed position" and it didn't worked out !!!

    HOW CAN I SET THE ADMIN BAR TO THE BOTTOM APPLYGIN CSS ??? I think wordpress apply the position dinamically ... so It's just possible via JQUERY???? or HOW ??? Sorry I'm newbiew ... and barely starting keeping up with jquery too jeje

    THANKS EVERY BODY !!!

  19. mexicanNewbie
    Member
    Posted 3 years ago #

    IT'S PRETTY WEIRD TOO

    BECAUSE i tried searching for the string "wpadminbar" in ALL WORDPRESS FILES (sending all files to my notepad++ - sometimes it really helps me) but THE STRING DOESN't appeared !!

    NOTE:Now I don't know if that's because now I have too much files (because I working now with tortoise - the svn client ) and notepad++ just ignore many other files wich could have had that string

  20. astromono
    Member
    Posted 3 years ago #

    Actually I just want to know how to globally edit the wp-admin css for a WordPress multisite. I recently activated Buddypress on the network and the admin bar it comes with is overlapping all my dashboards.

  21. astromono, same way, but put it in a plugin file in mu-plugins.

    I have a file called adminbar.php in my mu-plugins folder with this:

    <?php
    
    /*
    Plugin Name: Admin Bar
    Plugin URI:
    Description: Admin Bar stuff
    Version: 1.0
    Author: Ipstenu
    Author URI: http://www.ipstenu.org/
    */
    
    /* Stylesheet */
    function link_to_stylesheet() {
            ?>
    <style type="text/css">
    #wpadminbar .quicklinks a {font-weight:bold;}
    </style>
    <?php
    }
    add_action('wp_head', 'link_to_stylesheet');
    
    ?>
  22. astromono
    Member
    Posted 3 years ago #

    Thank you very much for the reply, however I would like to know what's the selector for the body in the wp-admin?

    That way i can just put in a "padding-top:25px;" on it and it'll move the body down so that the admin bar is no longer overlapping anything.

  23. That made no sense to me for a moment until I realized you're saying 'On the ADMIN side of WordPress, the BUDDYBAR is overlapping dashboards.'

    Which it shouldn't, since the buddybar's not supposed to show on the admin side. Have you posted about this on buddypress.org?

  24. astromono
    Member
    Posted 3 years ago #

    yup, I did, but got no answer. If you install WordPress Multisite you can run the Buddypress plugin as a network plugin, and it will replace the default WP Admin Bar both in the wp dashboard and the sites as well (depending on your settings.

  25. Yeah, sadly that's gonna be a BuddyPress specific answer. I mean, I swapped mine out to only show the WP admin bar and it works fine.

    define( 'BP_USE_WP_ADMIN_BAR', true );

    From http://buddypress.org/community/groups/how-to-and-troubleshooting/forum/topic/bp1-2-8-and-the-wp-3-1-admin-bar/

    But ... what you're seeing is abnormal behavior and it's on the BP side so you really need BP specific help :/

  26. tarmentano
    Member
    Posted 3 years ago #

    @Ipstenu

    Do you know how I could add facebook, twitter, and youtube buttons to the wordpress admin bar via the plugin you suggested:

    [Code moderated as per the Forum Rules. Please use the pastebin]

  27. tarmentano - Add links like this: http://wp-snippets.com/addremove-wp-admin-bar-links/

    But if you need more help for that, make a NEW topic in http://wordpress.org/support/forum/how-to-and-troubleshooting :) It's not an alpha/beta question anymore.

  28. zignorp
    Member
    Posted 2 years ago #

    I have a post type/single page that I'm using to create iframes for embedding on other sites and blogs. The admin bar code is creating that extra 28px space at the top, and if I try to include it in a wordpress text widget, it screws with the existing admin bar on the hosting site for the iframe. I'm using a custom single and custom header file, wondering how I can lose the bar and everything associated with it entirely just for that content. Thanks!

  29. zignorp
    Member
    Posted 2 years ago #

    Here's the quickest way I found to do it, from yoast:

    in functions:

    if ( isset($_GET['bar']) && 'no' == $_GET['bar'] )
    
       add_filter( 'show_admin_bar', '__return_false' );

    This would allow you to disable the WordPress admin bar by going to example.com/?bar=no, you can of course change those values.

    documentation:
    http://yoast.com/disable-wp-admin-bar/

    This will work for my purposes, if anyone has any alternate suggestions, I'd be interested.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags