Open notramo opened 1 year ago
This makes sense, I think I was just trying to avoid an ever escalating z-index battle.
The general plan is to have the least specific CSS defaults as possible, so the CMS takes on the character of the project and is easy to override. My hope is that all you would have to do is drop in your own /static/admin.css
file to completely reskin the editing experience. I need to add better CSS classes (and stop changing them so often) to make this possible. In this case having a higher z-index won't make the style more specific (harder to override), so I agree it's a good idea for a better out-of-the-box experience.
@jimafisk If you don't have time for it, I could try to implement it. Where should I look for the index definitions?
Hi @notramo,
I just took a look, it seems like our nav
currently has a z-index: 10;
: https://github.com/plentico/plenti/blob/c585291a8e573752c2f9df731c554434a1e73452/defaults/core/cms/admin_menu.svelte#L202
The .sidenav
has a z-index: 1;
: https://github.com/plentico/plenti/blob/c585291a8e573752c2f9df731c554434a1e73452/defaults/core/cms/admin_menu.svelte#L226
And our .modal-wrapper
class has a high value: z-index: 99999;
:
https://github.com/plentico/plenti/blob/c585291a8e573752c2f9df731c554434a1e73452/defaults/core/cms/admin_menu.svelte#L262
Those values generally seem appropriate to me, although I'd honestly prefer to lower the modal wrapper to 20
. The sidenav could be a little higher (maybe 5
) but as long as you don't have style bleeding in from your app, the sidenav shouldn't actually overlay anything. In most cases I'd agree that users will want the Plenti admin functionality to appear above other elements, but there could be situations where someone intentionally wants their custom project to have visibility over the admin menus themselves.
In cases where site elements are appearing above the Plenti admin menus undesirably, I would attempt to do the following:
static/global.css
file using nav
, .sidenav
, and .modal-wrapper
to increase the z-index.I do think that we should add an admin-menu
class to the nav
element to make style overrides easier: https://github.com/plentico/plenti/blob/c585291a8e573752c2f9df731c554434a1e73452/defaults/core/cms/admin_menu.svelte#L49
I also usually wrap my custom HTML/CSS in a <main>
tag inside the <body>
to make it easier to target global styles to my custom app without bleeding over to the admin side of things. Possibly that could help with how the elements are appearing currently.
Are you pulling in a style framework like Bootstrap or Foundation? Those can often be quite heavy-handed with their implementations of these things.
@notramo were you able to get a z-index override working for your project?
If the page uses a
z-index
greater than 0, it overlaps with the CMS. The CMS should use the highest possiblez-index
.