WordPress.org

Make WordPress Core

Opened 23 months ago

Closed 5 months ago

Last modified 5 months ago

#25091 closed defect (bug) (invalid)

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

Reported by: 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 23 months ago.
Shows red background overlapping menu
admin-red-scrolled.png (77.0 KB) - added by pamtbaau 23 months ago.
Show red background limited to initial size of window
admin-red-scrolled-z-index.png (79.5 KB) - added by pamtbaau 23 months ago.
Shows result of setting z-index to adminmenu selectors
wp-fckp.png (369.3 KB) - added by Makapaka 5 months ago.
problem with body height
wp-fckp2.png (373.5 KB) - added by Makapaka 5 months ago.
problem with body height 2

Download all attachments as: .zip

Change History (14)

@pamtbaau23 months ago

Shows red background overlapping menu

@pamtbaau23 months ago

Show red background limited to initial size of window

comment:1 @SergeyBiryukov23 months ago

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

@pamtbaau23 months ago

Shows result of setting z-index to adminmenu selectors

comment:2 @helen23 months 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.

comment:3 follow-up: @buffler23 months 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 23 months ago by buffler (previous) (diff)

comment:4 @helen23 months ago

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

comment:5 @pamtbaau23 months 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 23 months ago by pamtbaau (previous) (diff)

comment:6 @Makapaka5 months ago

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

@Makapaka5 months ago

problem with body height

@Makapaka5 months ago

problem with body height 2

comment:7 in reply to: ↑ 3 @Makapaka5 months ago

  • Keywords needs-patch ui-feedback 2nd-opinion added
Last edited 5 months ago by Makapaka (previous) (diff)

comment:8 @Makapaka5 months ago

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

comment:9 @SergeyBiryukov5 months ago

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