WordPress.org

Make WordPress Core

Opened 5 years ago

Closed 4 years ago

#16667 closed defect (bug) (fixed)

Admin Bar CSS Override Bugs

Reported by: JohnONolan Owned by: JohnONolan
Milestone: 3.1.1 Priority: normal
Severity: normal Version: 3.1
Component: UI Keywords: ui-feedback has-patch
Focuses: Cc:

Description

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.

Attachments (5)

Screen shot 2011-02-25 at 12.36.33 PM.png (10.4 KB) - added by chexee 5 years ago.
li a { color } if !important is declared.
16667.diff (418 bytes) - added by jtsternberg 5 years ago.
fixes oversized custom user/site icons
admin-bar-my-account.diff (389 bytes) - added by johnjamesjacoby 4 years ago.
Fixes issue where second level menus on my-account menu have 30px left gap
admin-bar-my-account-image.png (80.3 KB) - added by johnjamesjacoby 4 years ago.
Screen shot of problem that 'admin-bar-my-account.diff' fixes
16667.2.diff (443 bytes) - added by jtsternberg 4 years ago.
resets sub-sub menus with left:auto

Download all attachments as: .zip

Change History (30)

comment:2 @JohnONolan5 years ago

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

@chexee5 years ago

li a { color } if !important is declared.

comment:3 @JohnONolan5 years ago

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

comment:4 @ocean905 years ago

  • Cc ocean90 added

comment:5 follow-up: @JohnONolan5 years ago

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

comment:6 follow-up: @JohnONolan5 years ago

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>
';
}

comment:7 in reply to: ↑ 5 ; follow-ups: @ocean905 years ago

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?

comment:8 in reply to: ↑ 7 @mark-k5 years ago

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.

comment:9 in reply to: ↑ 6 @jtsternberg5 years ago

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>';
}

@jtsternberg5 years ago

fixes oversized custom user/site icons

comment:10 @jtsternberg5 years ago

Last edited 5 years ago by jtsternberg (previous) (diff)

comment:11 @jtsternberg5 years ago

  • Keywords has-patch added

comment:12 @nerx5 years ago

  • Severity changed from normal to major

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

comment:13 @nacin5 years ago

  • Severity changed from major to normal

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

comment:14 in reply to: ↑ 7 @greuben5 years ago

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.

comment:15 @ryan4 years ago

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

comment:16 @ryan4 years ago

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

@johnjamesjacoby4 years ago

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

comment:17 follow-up: @johnjamesjacoby4 years ago

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.)

@johnjamesjacoby4 years ago

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

comment:18 in reply to: ↑ 17 @azaozz4 years ago

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... :)

Last edited 4 years ago by azaozz (previous) (diff)

comment:19 follow-up: @nacin4 years ago

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

comment:20 @azaozz4 years ago

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

comment:21 @azaozz4 years ago

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

comment:22 in reply to: ↑ 19 @azaozz4 years ago

Replying to nacin:

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

comment:23 @nacin4 years ago

  • Resolution set to fixed
  • Status changed from new to closed

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.

@jtsternberg4 years ago

resets sub-sub menus with left:auto

comment:24 @jtsternberg4 years ago

  • Cc justin@… added
  • Resolution fixed deleted
  • Status changed from closed to reopened

Found another bug conflicting with themes, specifically Genesis.

comment:25 @nacin4 years ago

  • Resolution set to fixed
  • Status changed from reopened to closed

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

Version 0, edited 4 years ago by nacin (next)
Note: See TracTickets for help on using tickets.