Forums

Absolute positioning and editing

Permalink
I have a picture frame box with a black transparent blur absolutely positioned directly over the top.

I edit mode both boxes overlap and you cant select the underneath one.

With the logo positioning in Green Salad some php is used to add some space in edit mode.

However when I try and emulate this with a copy and paste between my two divs it doesnt seem to work.

Can some great soul shed some light on this please.

Nige
nige
 
ScottC replied on at Permalink Reply
ScottC
so in edit mode you need to set this div to have a z-index of 0, then the clicks will register.

Sometimes in edit mode it is best to include an edit mode css file, would be nice to have that built into concrete5 but for now you need to do a if($c->isEditMode()){echo out your css stylesheet reference}
nige replied on at Permalink Reply
nige
Thanks for your help and I have read another post about editMode you wrote trying to sort this out.

Im very new to php.(doh)

Im trying to cut and paste the code from the header that C5 use.

It kinda works but I get the site name appearing in the div and I also cant seem to style the space in any other way with css.

I think the echo thing is calling the site name from header.php. It is putting space in – but the name also.

I want to affect "pageHeader" in some way. z-index would be great!(in EditMode only)

Im reading a book on php at the 'mo but its early days Im afraid.

I would appreciate it if you could help.

Code is: (I want to affect pageHeader)

<div id="central">

<?php echo SITE?>
<?php
if (!$c->isEditMode()) { ?>
<?php } ?>

<div id="pageHeader">
<?php
$ahh = new Area('Header');
$ahh->display($c);
?>
</div>

Nige
zoinks replied on at Permalink Reply
AH! This is apparently what I need to do.

Could you give an example of a full code and where to put it? I'm guessing it should go in the head since style links go in the head.

Something like this...?

<?php if ($c->isEditMode()) { echo <link href="<?=$this->getThemePath()?>/stickyfooter2.css" rel="stylesheet" type="text/css" />
?>
zoinks replied on at Permalink Reply
Yeah... since I have php tags within php tag, I guess I am running into trouble (if this is even correct way to do it):

<?php if ($c->isEditMode()) {

echo <link href="<?=$this->getThemePath()?>/stickyfootereditmode.css" rel="stylesheet" type="text/css" /> }

?>

Can someone more knoweldeable about PHP show me how to format this properly? I'm getting an error when I go into edit mode, so I presume my echo statement is improperly coded with the <?=$this->getThemePath()?> in the middle of the other php tag.
nige replied on at Permalink Reply
nige
Hi,

What I do now is with editMode I move the top div away from the bottom div with a spacer thats only active in editMode. Then I can edit both divs.

I haven't tried the custom css for editMode only.

I can help you with the first option though its pretty easy.

Nige
zoinks replied on at Permalink Reply
I don't know if that would help me, but I'm interested in hearing your solution, anyway. If I can't use it now, it may be useful in the future.
nige replied on at Permalink Reply
nige
Hi,

Here is an example from my own site I've just redesigned.

<div id="botrightcontainer">
   <div id="bot_right"><?php          
                     $ahh = new Area('botright');
                     $ahh->display($c);         
                     ?></div>
     <?php 
      if ($c->isEditMode()) { ?>
         <div class="spacer5"></div>
      <?php  } ?>                   
   <div id="botrightlogo"><?php          
                     $ahh = new Area('botrightlogo');
                     $ahh->display($c);         
                     ?></div>                 
   </div><!-- close botrightcontainer-->


And here is the css for this section:
#botrightcontainer{
float:left;
width:156px;
padding-left:10px;
}
#bot_right{
position:absolute;
float:left;
width:156px;
z-index:3;
}
#botrightlogo{
margin-top:35px;
padding-left:14px;
}


The divs bot_right and botrightlogo are on top of one another so editing them is impossible without moving the logo div away to the bottom with if ($c->isEditMode()).

The space I call is this:
.spacer5{
background:url(images/trans.png);
height:450px;
}


As I say this is just standard implementation but it works for me.

Hope it helps.

Nige