Admin Bar CSS Override Bugs

[JohnONolan]

In 3.1 we introduced a new admin bar. We reset almost all of the CSS properties for the admin bar to prevent themes and plugins from inadvertently affecting its appearance. This ticket is to gather all the properties which we missed out and are coming up as bugs.

CSS3 Transitions breaking  http://jackosborne.co.uk/articles/wordpress-admin-bar/

Positioning problem in K2 theme  http://cl.ly/25382W1o3q0z0k2G2v1M

li a { color } if !important is declared.

That'll happen if [anything] { anything !important } is declared (at the moment)

User/Site image needs fixed height/width defined in CSS -  http://d.pr/kG34

Workaround for oversized user/site image

add_action('admin_head', 'nav_bar_fix');

function nav_bar_fix() {
echo '
<style type="text/css">
#wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar > a img {width:16px; height 16px;}
</style>
';
}

Replying to JohnONolan:

User/Site image needs fixed height/width defined in CSS -  http://d.pr/kG34

We are using $avatar = get_avatar( get_current_user_id(), 16 ) in core, how can it be bigger then 16px?

Replying to ocean90:

Replying to JohnONolan:

User/Site image needs fixed height/width defined in CSS -  http://d.pr/kG34

We are using $avatar = get_avatar( get_current_user_id(), 16 ) in core, how can it be bigger then 16px?

At least firefox prefers to show an img in its full size when it is bigger than the width and height attributes.

Replying to JohnONolan:

Workaround for oversized user/site image

add_action('admin_head', 'nav_bar_fix');

function nav_bar_fix() {
echo '
<style type="text/css">
#wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar > a img {width:16px; height 16px;}
</style>
';
}

This fix is only needed if you have replaced the default gravatar with your own image that's larger than 16 px. Also the fix above needs a small tweak to fix the avatar display on the front end also:

add_action('wp_head', 'nav_bar_fix');
add_action('admin_head', 'nav_bar_fix');
function nav_bar_fix() {
echo '<style type="text/css">
#wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar > a img {width:16px; height 16px;}
</style>';
}

fixes oversized custom user/site icons

Should actually be Priority: High - Having problems with my Admin Bar CSS because of #16667!

This really isn't major. The admin bar is opt-out, and a theme can also specify its own CSS.

Replying to ocean90:

Replying to JohnONolan:

User/Site image needs fixed height/width defined in CSS -  http://d.pr/kG34

We are using $avatar = get_avatar( get_current_user_id(), 16 ) in core, how can it be bigger then 16px?

This is happening with buddypress installed. They use get_avatar filter to alter avatars.

(In [17532]) Fix display of oversized custom user/site icons in the admin bar. Props jtsternberg, JohnONolan. see #16667 for trunk

(In [17533]) Fix display of oversized custom user/site icons in the admin bar. Props jtsternberg, JohnONolan. see #16667 for 3.1

Fixes issue where second level menus on my-account menu have 30px left gap

Note: Above 'admin-bar-my-account.diff' patch is for when the my-account menu includes an avatar, and a plugin has added an additional second level menu. Planning on using this technique in BuddyPress/bbPress (unless a better solution is out there.)

Screen shot of problem that 'admin-bar-my-account.diff' fixes

Replying to johnjamesjacoby:

Patch looks good. I would even add another ul in there in case a plugin adds another level of submenus:

#wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar ul ul,
#wpadminbar .quicklinks li#wp-admin-bar-my-account-with-avatar ul ul ul { 
 	left: 0; 
} 

BTW without support for IE6 that would have been a lot simpler, but we are on the front end so... :)

While avatar > ul > ul would not be enough to cover an additional level of submenus, ul ul should be enough.

(In [17558]) Fix position of submenus when showing avatar, props johnjamesjacoby, see #16667 for trunk

(In [17559]) Fix position of submenus when showing avatar, props johnjamesjacoby, see #16667 for 3.1

Replying to nacin:

Agree, not sure why in my test it didn't show the first time.

This looks good for 3.1.1, I don't see anything else unresolved here. New tickets can be opened for future releases as appropriate.

resets sub-sub menus with left:auto

Found another bug conflicting with themes, specifically Genesis.

Please open a new ticket. This was a catch-all ticket for 3.1.1, a closed milestone.