Forums

Is it possible to make layered editable areas? Or am I chasing the wind?

Permalink
Hi Everyone,

I've been working on a website that has the following:

- A slideshow banner that is 1800px wide
- A div that is layered over the top of that banner

The problem is, I can edit the banner slideshow quite easily, but I cannot edit the area for the text overlay. The overlay area highlights but the cursor doesn't change to allow you to select and edit.

I've looked up some threads on z-index and been playing with it, but my problem is this:

the banner element may have a z-index of 1
the overlay may have a z-index of 2
the div#ccm-highlighter {z-index:100!important;} (to keep it on top)

--> But, this means the highlighter from the banner then layers over the overlay, so you can't edit it.

so I try this:

the banner element may have a z-index of 1
the overlay may have a z-index of 110
the div#ccm-highlighter {z-index:100!important;}

--> This at first appears to work, but because the z-index of the overlay is higher, it doesn't allow the highlighter to work?

So, my question is, is it possible to layer editable areas?

Or is there a way to make 2 different highlighter rules and target the z-index of the higher element with a new highlighter?

(I've attached a screenshot to show you what i mean..)

Here's the CSS:

#bannerWrapper{
   background:#000000;
   float: left;
    margin: 0 0 0px;
    width: 100%;
}
#bannerContainer{
   height: 577px;
    min-width: 960px;
    position: relative;
    width: auto;
   margin: 0 auto;
    overflow: hidden;
}
#banner{
Viewing 15 lines of 45 lines. View entire code block.

1 Attachment

PatrickCassidy
 
mesuva replied on at Permalink Best Answer Reply
mesuva
It's definitely possible, the trick I've found is to simply not aim to have things overlaying WHILE in edit mode.

My header.php in themes often looks something like this:
<?php 
$editmode = $c->isEditMode();
?>
<body class="<?php echo ($editmode ? 'ineditmode' : ''); ?>">


This means that while the page is being edited, you can add overriding styling rules in like:
.ineditmode #banner {
display: relative !important;  // or whatever is needed to undo the absolute positioning and overlays
}


I found that this isn't always necessary and for some reason the overlays and highlight areas still work, (I did it on this site:http://contemporaryco.com.au , and I didn't need to do anything special to make the overlay editable) but the above is my work-around.

A trick could also be to just nudge an element in edit mode left/right/whatever so it pokes out from underneath and therefore makes it clickable.
PatrickCassidy replied on at Permalink Reply
PatrickCassidy
Hey Mesuva... Thanks, I was just on to that when I saw your reply. The only thing is, when I'm trying to target those rules, even with !important, they aren't taking effect? Any ideas?

I've thought to actually change the height of both the div, and also the highlighter, but changes aren't coming across in edit mode..
mesuva replied on at Permalink Reply
mesuva
I wouldn't target the highlighter, I think that's going to get really messy, just the area containing your editable area.

I can't say why you're not getting your CSS to kick, check what is being applied in your browser's inspector and check you haven't used !important later on in your stylesheet.

(I try not to use !important anyway, but in this case you may need it to overcome css specificity)
PatrickCassidy replied on at Permalink Reply
PatrickCassidy
Can't see anywhere I've used !important that would effect it (I don't use it generally either)

This is what I've done...

CSS

#banner{
    margin-left: -900px;
    width: 1800px;
    height: 577px;
    left: 50%;
    position: absolute;
}
.ineditmode #banner{
    height:300px !important;
}



PHP / HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php Loader::element('header_required'); ?>
<link rel="stylesheet" type="text/css" href="<?php print $this->getStyleSheet('main.css'); ?>" />
<link rel="stylesheet" type="text/css" href="<?php print $this->getStyleSheet('typography.css'); ?>" />
</head>
<?php 
$editmode = $c->isEditMode();
?>
<body class="<?php echo ($editmode ? 'ineditmode' : ''); ?>">


And the specific area:

<!-- BEGIN BANNER AREA -->
<div id="bannerWrapper">
       <div id="bannerContainer">
           <div id="banner">
                <?php
             $a = new GlobalArea('Header Banner');
             $a->setBlockLimit(1);
             $a->display($c);
             ?>
        </div><!-- END banner -->
        <div class="clear"></div>
          <div id="bannerOverlay">
             <div id="overlayContent">
            <?php
       $a = new Area('Banner Overlay Text');
Viewing 15 lines of 23 lines. View entire code block.


Anything you can see that I can't?

Thanks again for your help / eyes! ~Pat
mesuva replied on at Permalink Reply
mesuva
My guess is that you've got images or whatever inside the banner that are hanging out past the 300px mark. You could try a overflow: hidden; underneath the height.

Perhaps try and move the #bannerOverlay instead of trying to adjust the banner. Remember that things don't have to look the same in edit mode, it just has to look obvious as to what is what (IMHO).
PatrickCassidy replied on at Permalink Reply
PatrickCassidy
Thanks mate, that did the trick... this way everything stays in place, the image just trims up above the overlay so you can select it. Thanks heaps again.
andrestoros replied on at Permalink Reply
Patrick, I'm having the same problem, and I also applied this "hack" and works. But I would want to do it in a more "profesional" way, something that allows me to leave the elements in their original position (how it looks originally) and still edit them. Have you found another solution to this very basic need?

Regards and thanks in advance!