WordPress.org

Make WordPress Core

Opened 3 years ago

Closed 3 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 3 years ago.
li a { color } if !important is declared.
16667.diff (418 bytes) - added by jtsternberg 3 years ago.
fixes oversized custom user/site icons
admin-bar-my-account.diff (389 bytes) - added by johnjamesjacoby 3 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 3 years ago.
Screen shot of problem that 'admin-bar-my-account.diff' fixes
16667.2.diff (443 bytes) - added by jtsternberg 3 years ago.
resets sub-sub menus with left:auto

Download all attachments as: .zip

Change History (30)

comment:2 JohnONolan3 years ago

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

chexee3 years ago

li a { color } if !important is declared.

comment:3 JohnONolan3 years ago

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

comment:4 ocean903 years ago

  • Cc ocean90 added

comment:5 follow-up: JohnONolan3 years ago

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

comment:6 follow-up: JohnONolan3 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: ocean903 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-k3 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 jtsternberg3 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>';
}

jtsternberg3 years ago

fixes oversized custom user/site icons

comment:10 jtsternberg3 years ago

has-patch

Version 0, edited 3 years ago by jtsternberg (next)

comment:11 jtsternberg3 years ago

  • Keywords has-patch added

comment:12 nerx3 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 nacin3 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 greuben3 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 ryan3 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 ryan3 years ago

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

johnjamesjacoby3 years ago

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

comment:17 follow-up: johnjamesjacoby3 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.)

johnjamesjacoby3 years ago

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

comment:18 in reply to: ↑ 17 azaozz3 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 3 years ago by azaozz (previous) (diff)

comment:19 follow-up: nacin3 years ago

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

comment:20 azaozz3 years ago

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

comment:21 azaozz3 years ago

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

comment:22 in reply to: ↑ 19 azaozz3 years ago

Replying to nacin:

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

comment:23 nacin3 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.

jtsternberg3 years ago

resets sub-sub menus with left:auto

comment:24 jtsternberg3 years ago

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

Found another bug conflicting with themes, specifically Genesis.

comment:25 nacin3 years ago

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

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

Last edited 3 years ago by nacin (previous) (diff)
Note: See TracTickets for help on using tickets.