#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
- 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' );
- 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
- 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
- #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
- No solution found
- 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)
Change History (14)
#2
@
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:
↓ 7
@
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; }
#4
@
11 years ago
- Keywords close removed
- Milestone Awaiting Review deleted
- Resolution set to invalid
- Status changed from new to closed
#5
@
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
#6
@
10 years ago
- Resolution invalid deleted
- Severity changed from normal to major
- Status changed from closed to reopened
Shows red background overlapping menu