Make WordPress Core

Opened 11 years ago

Closed 10 years ago

Last modified 10 years ago

#25091 closed defect (bug) (invalid)

Setting background-color on body in admin page shows unexpected behaviour

Reported by: pamtbaau's profile pamtbaau Owned by:
Milestone: Priority: normal
Severity: normal Version: 3.6
Component: Administration Keywords:
Focuses: ui Cc:

Description

Using example from https://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts

Reproducable code and steps

  1. Add the following code to functions.php of theme
function load_custom_wp_admin_style() {
        wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' );
        wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );
  1. Create file admin-style.css:
body {
   background-color: red;
}

Expected behaviour

I would expect that the background of the area right of the adminmenu will be coloured red.

Issues

  1. The red color will only fill the initial space of the window shown in the browse. When scrolling down, the red background disappears. See attached images: admin-red.png and admin-red-scrolled.png
  2. #adminmenuback is covered in the area where the body is been set to red. Below the intitial size of the window, adminmenuback is visible again. See same images.

Partial solution

  1. No solution found
  2. Adding z-index: 1 to #adminmenuback and #adminmenuwrap will fix the partial disappearance of the adminmenu. See image admin-red-scrolled-z-index.png

OS and Browser

Windows 8
Chrome 29.x
Internet Explorer 10

Attachments (5)

admin-red.png (94.0 KB) - added by pamtbaau 11 years ago.
Shows red background overlapping menu
admin-red-scrolled.png (77.0 KB) - added by pamtbaau 11 years ago.
Show red background limited to initial size of window
admin-red-scrolled-z-index.png (79.5 KB) - added by pamtbaau 11 years ago.
Shows result of setting z-index to adminmenu selectors
wp-fckp.png (369.3 KB) - added by Makapaka 10 years ago.
problem with body height
wp-fckp2.png (373.5 KB) - added by Makapaka 10 years ago.
problem with body height 2

Download all attachments as: .zip

Change History (14)

@pamtbaau
11 years ago

Shows red background overlapping menu

@pamtbaau
11 years ago

Show red background limited to initial size of window

#1 @SergeyBiryukov
11 years ago

  • Component changed from Appearance to Administration
  • Keywords ui-focus added

@pamtbaau
11 years ago

Shows result of setting z-index to adminmenu selectors

#2 @helen
11 years ago

  • Keywords close added

I'm not sure I see how this is a bug? I'm sure there are all kinds of things you could add a background color to and get an ugly result.

#3 follow-up: @buffler
11 years ago

Doesn't seem like a bug but there are a couple of ways to achieve the styling you're looking for pamtbaau -

You can override body's height with height: auto; min-height: 100% (in addition to whatever background color/image) to get what you're wanting with the first issue. Or, you can instead apply a background to #wpwrap, as it already has height: auto; min-height: 100%.

In core there's no need for z-index on the admin menu because there's no background applied to either body or #wpwrap. But yes, you can set #adminmenuback, #adminmenuwrap { z-index: 1 } as you already have with the second issue if you want body or #wpwrap to look better with a background applied.

In summary, starting your admin-style.css file with these rules should get you going:

.body {
  height: auto;
  min-height: 100%;
  background: /* whatever background styles you want here */;
}

#adminmenuback,
#adminmenuwrap {
  z-index: 1;
}
Last edited 11 years ago by buffler (previous) (diff)

#4 @helen
11 years ago

  • Keywords close removed
  • Milestone Awaiting Review deleted
  • Resolution set to invalid
  • Status changed from new to closed

#5 @pamtbaau
11 years ago

I've only recently switched from Joomla! to WordPress and everyday I'm positively amazed... Even by the swiftness of your responses :-)

I appreciate the position of WordPress of knowing there is no background applied to body. I just didn't expect an element which should always be visible (in my opinion) to be below the body element by setting its index explicitly to -1.

Buffler, your suggestion works fine.

Thanks

Last edited 11 years ago by pamtbaau (previous) (diff)

#6 @Makapaka
10 years ago

  • Resolution invalid deleted
  • Severity changed from normal to major
  • Status changed from closed to reopened
Last edited 10 years ago by Makapaka (previous) (diff)

@Makapaka
10 years ago

problem with body height

@Makapaka
10 years ago

problem with body height 2

#7 in reply to: ↑ 3 @Makapaka
10 years ago

  • Keywords needs-patch ui-feedback 2nd-opinion added

Replying to buffler:

Doesn't seem like a bug but there are a couple of ways to achieve the styling you're looking for pamtbaau -

[cut]
Nothing what You just wrote is helping to resolve this issue.
It's like You propose resolution, but have you ever tried it? I bet no...

Version 0, edited 10 years ago by Makapaka (next)

#8 @Makapaka
10 years ago

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

#9 @SergeyBiryukov
10 years ago

  • Keywords needs-patch ui-feedback 2nd-opinion removed
  • Severity changed from major to normal
Note: See TracTickets for help on using tickets.