Forums

Changing the Z-Index of the Edit Bar / Overlays

Permalink
I'm just beginning tweaking an existing template for use with Concrete, so I apologize for the newbie-ness.

The template I'm using has absolutely positioned elements that overlay other elements - some items have large z-index values (3000 / 4000).

When in edit mode, these page elements overlay the edit bar / overlay screens, etc.

Where can I change the z-index of the overlays/edit bar to make sure they are always on top?

Attached is an image of the problem.
Note: I'm using Google Chrome 1.0.154.48

1 Attachment

glockops
 
ScottC replied on at Permalink Reply
ScottC
you could easily take care of this by referencing a different style sheet with a z-index for that attribute that is a bit lower.

To do this you would need an essentially identical stylesheet but with more "normal" z-index.

Then the reference would be something like:

//psuedo code
if (!c->isEditMode()){ //collection is not edit mode
$c->getThemePath()."/main.css"
}
else
{
standard css include here
}
glockops replied on at Permalink Reply
glockops
Thanks for the reply - I keep finding things out about Concrete that make me really happy. I can tell now that the whole isEditMode() variable is going to be awesome.

I think first, I'll just attempt to reduce the z-index values of my elements. I have no need for them to be so high.
BrotherPhil replied on at Permalink Reply
I'm running into an interesting z-index issue, myself... because a menu item has a z-index that causes it not to be editable when in edit mode.
I can click on it all day long, and it just won't show me the popup that lets me into the edit mode.
So, I just commented it out in the default css and its now editable... which tells me that I think you just solved my problem with the "isEditMode" comment... at least I HOPE so!
webinter replied on at Permalink Reply
This may be an old post but I would like to respond anyway.

The trick of using another CSS didn't work for me, better is just to change the div tag. I defined 2 classes; one is navbar and the second is navbar-edit. They are identical with the exception for the z-index which is in the navbar-edit class 0.

It would look like this:

if($c->isEditMode()){ 
<div class="navbar-edit">
} else { 
<div class="navbar">


to make sure the 2 area's that are normally overlapping are free to edit a second isEdit can be added:

if($c->isEditMode()){
<div style="min-height:80px;"></div>
}