Forums

IsEditMode spacer deal

Permalink 1 user found helpful
Hello,

I was trying to figure out what the exact code is for making the spacer appear at the opportune time for editing a page in my custom theme, including any CSS that needs to be present. I have to admit from looking at the code I was unable to determine what was what. I was looking at the default theme files.

Also, one assumption of mine is that this is a vital part of any theme. Am I right?

Thanks so much!
neptune
 
roa123 replied on at Permalink Reply
if (!$c->isEditMode()) { ?>
<div class="spacer"></div>
<?php } ?>
neptune replied on at Permalink Reply
neptune
Thank you so much for your reply, but I don't quite understand.

I pasted that code into my header.php theme file in the body, and I got a parse error about an unexpected }

Do you know what I missed? Also, would I still need to define the dimensions of the spacer? Was that implied by your post? Sorry for so many questions! :/
roa123 replied on at Permalink Reply
put <?php in front of it
neptune replied on at Permalink Reply
neptune
i added a beginning php tag to it... but now i can't stay logged into concrete5. have no idea why! trying to figure it out...
neptune replied on at Permalink Reply
neptune
I figured out what was keeping me from being logged in. 
<? Loader::element('header_required'); ?>
got deleted from my default.php somehow.. I think Dreamweaver was randomly changing and deleting php code I had in there when I saved some files. Pretty sweet.

The spacer still isn't appearing though. I do need to add the CSS right?
neptune replied on at Permalink Reply
neptune
Well, I figured out that I do need to add some CSS to get this to work (I think!) but I can't figure out what CSS entries apply to this. I'm looking at the CSS and the header.php in the default theme.
Maynar replied on at Permalink Reply
Maynar
Try adding this to you CSS style sheet. a .css file or between <style> tags.

.spacer
{
/* Some CSS here */
height: 20px;
background-color: red; /* So you can see where it is placed */
}
neptune replied on at Permalink Reply
neptune
Well,

The spacer is appearing when I AM NOT in edit mode and my footer is floating at the top of the screen, ignoring its div. When I AM in edit mode, the spacer disappears and my footer is in the right place. I am missing something but I don't know where!

Here is the isEditMode code I am using:
<div id="headerSpacer">
<?php      
if (!$c->isEditMode()) { ?>
<div style="min-height: 80px">
<?php } ?>
</div>


along with the CSS: 
#headerSpacer{ position:relative; }


Now the thing is when I end the headerSpacer div right after I open it with nothing in between (like it is in the default theme header.php) the code doesn't work. When I end the div after the IsEditMode code the spacer does appear when I am NOT in edit mode but my footer is left floating at the top of the screen.

Here is the relevant code:

default.php 
<?php  defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" ?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<? Loader::element('header_required'); ?>
<?php  $this->inc('elements/header.php'); ?>
<div id="main" style="position: absolute; top: 350 px; left: 400 px; >
<?php
    $a = new Area('Main Content');
    $a->display($c);
?>
</div>
<?php
$this->inc('elements/footer.php');
?>


css.css
body {
   background-color: #000000 }
#headerSpacer{ position:relative; } 
#nav {
   position: absolute;
   top: 0px; 
   left: 0px }
#footer {
   position:absolute;
   bottom: 0px;
   left: 350px}
#main {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   color: white;
   font-size:10px; }


header.php

<?php  defined('C5_EXECUTE') or die(_("Access Denied.")); ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<!-- Site Header Content //-->
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('main.css')?>" />
<link rel="stylesheet" media="screen" type="text/css" href="<?php echo $this->getStyleSheet('typography.css')?>" />
<?php  Loader::element('header_required'); ?>
</head>
<body>
<div id="page">
   <div id="headerSpacer"></div>
   <div id="header">
      <?php  if ($c->isEditMode()) { ?>
Viewing 15 lines of 45 lines. View entire code block.


Please help!
neptune replied on at Permalink Reply
neptune
You replied while i was preparing my next post. That is a cool trick; I will keep it in mind. I think I identified the CSS I need (maybe) but now I am having issues with divs (I think) so in that case I am going to wait to change CSS. Thanks for your time.
Maynar replied on at Permalink Reply
Maynar
It's correct that it only shows when you are not in edit mode. Look at this code. On the third line I removed the ! from the if statement. (which means when I am not in edit mode, show spacer)

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


I hope that was what you total post was about ;)
neptune replied on at Permalink Reply 1 Attachment
neptune
Thanks Maynar, somehow taking that one ! out solves my whole above post. My divs are aligning right and everything. Weird! BUT, I still have one thing niggling at me. I have attached a screenshot. The "add blocks" thing that appears in edit mode doesn't appear to be showing up right. Could you shed some light on that? Check the screenshot and look at the upper right dotted white lines.
neptune replied on at Permalink Reply
neptune
I don't understand why edit mode is making my footer change its positioning up to the top of the screen. Right now it's set to position: absolute; bottom: 0 px.
ScottC replied on at Permalink Reply
ScottC
I posted something there that works if the toolbar is up, not just if the page is in edit mode.

The toolbar is appended to the body so you need to create a margin in the "container" div when the toolbar is up using the code in the theme i wrote a few months ago. I don't have it off-hand.