How can I access blocks layered below other blocks in Edit mode?

Permalink
At times, my design is such that when you open a page in edit mode, the expansion of the blocks causes a smaller block below a larger block to position beneath the layer of the larger block, making it inaccessible in edit mode.
I'm guessing (hoping) there must be a way to access these blocks in Edit mode that lie beneath other blocks, but I've not found one yet. Can anyone help me with this? Is the only option to temporarily delete the block on top (save it to the scrapbook first)?

Pixelfixer
View Replies: View Best Answer
Pritam replied on at Permalink Best Answer Reply
Pritam
Add this to the overlapping block areas in your theme


<?php
global $c;
if ($c->isEditMode()) {
echo '<div id="cms_fix001"></div>';
}
?>

This code works when in edit mode, add the below style to your CSS

#cms_fix001
{
padding-bottom:60px;
}
Pixelfixer replied on at Permalink Reply
Pixelfixer
Thanks Pritam! Good idea!
MrGrowBizz replied on at Permalink Reply
MrGrowBizz
Pritam, Per my search issue you were helping me with today, could you tell me where to put the code you have outlined to cure the overlapping blocks in the edit mode. I need to edit the search block on each page and they are burried really good. Would take more than a day to delete, edit, and paste blocks in the way. Thanks, Tim
Pixelfixer replied on at Permalink Reply
Pixelfixer
Place the php code just above the code block that you want to push downward. Then adjust the css padding to an amount that sufficiently pushes the block down. This will only effect your layout while in edit mode, which is what you want. Works great!
MrGrowBizz replied on at Permalink Reply
MrGrowBizz
Pixel-Fixer,

Thanks for the help! Could you tell me what files I am dealing with. I'm a real hack, but can edit if I know where. Main.css for CSS? PHP in xxx.php. Thanks a ton, thought I was done with this site until I stumbled on one more issue! Tim
Pixelfixer replied on at Permalink Reply
Pixelfixer
What are you using for your page design? Is thin one of the templates available on the Marketplace? Or is this a custom template? Is your site available to view on the web?
MrGrowBizz replied on at Permalink Reply 1 Attachment
MrGrowBizz
Using standard dark chocolate theme as base. If I could temporarily increase the Height of the Header Nav area to make my edits in the header that would be great too! Number one mistake was not effectively using the default pages and number 2 was not using the global scrapbook (poor planning). I need to make a simple edit to the search block on 50 or so pages and it will take forever to do it if I can't easily open up some space. I will send you the link and ID to view the site. I have attached the dilemma of overlaps.. Thanks, Tim
Pixelfixer replied on at Permalink Reply
Pixelfixer
I can't login. Is it still available?
Pixelfixer replied on at Permalink Reply
Pixelfixer
You need to put the php code in the default.php and the full.php files and the css code at the bottom of main.css. To do this, since this is a default core theme, and also for backup purposes, rather than change the default theme, I'd suggest copying the theme and renaming it, installing it, activating it and then modifying the files within it. If you make any mistakes, or it doesn't work for you for some reason, you can then just re-activate the former theme.

Once you've done this, you should be able to modify the two php files and main.css and all the pages using either of those two template files will take advantage of the modifications.

Let me know if you need more detailed instructions.
MrGrowBizz replied on at Permalink Reply
MrGrowBizz
Pixelfixer, Sorry about the login, reset the password as sent and you can view now.

I have made the edits as described and still no go. I had copied and renamed the theme in my root themes file some time ago to make previous changes.

I will continue to move things around and see if I can't get this to work. Thanks a bunch for your help! Tim
MrGrowBizz replied on at Permalink Reply
MrGrowBizz
Pixelfixer, Was able to temporarily increase the top header margin in main.css and fix my search box issues. Still would like to get the block overlap fixed in the edit mode, but yet to get to work.

I am not exactly sure what is going on with my renamed template in my root directory, as I named it dark_night, selected in themes and all was OK. However now a double dark_chocolate appears in the theme selection and dark_night has disappeared even though my css edits work in the dark_night folder with the exception of the margin expansion edit on 1 page out of 50! Possibly other PHP files are being read other than those in my template file.

Much thanks for your assistance!
Pixelfixer replied on at Permalink Reply
Pixelfixer
did you change the description.txt values from Dark Chocolate to Dark Night? If not, you will see your Dark Night show up as Dark Chocolate.
MrGrowBizz replied on at Permalink Reply
MrGrowBizz
Some things are truly a mystery to me. Changed description text, but no change. Suppose I needed to do this prior to activating the theme?
MrGrowBizz replied on at Permalink Reply
MrGrowBizz
After attempting to change theme names on another site of mine and reading a few posts, the best I can tell is you need to add the description text prior to installing the theme. Copied the theme, renamed it, edited the description.text... and bingo!
Pixelfixer replied on at Permalink Reply
Pixelfixer
I just got back in. Sorry I couldn't help you sooner, but you figured it out, which is even better. You'll probably go through a few "ah-ha" moments as you discover more and more about how it works. But stick with it. If you're like me, you'll love it the more you work with it.

So did you figure out how to use the spacing code yet?

Below is an example of where to add it to default.php if you want to put some space between the header block and the blocks that follow it:

<?php 
defined('C5_EXECUTE') or die("Access Denied.");
$this->inc('elements/header.php'); ?>
   <?php
   global $c;
   if ($c->isEditMode()) { 
   echo '<div id="cms_fix001"></div>';
   }
   ?>
   <div id="central">
      <div id="sidebar">
         <?php 
         $as = new Area('Sidebar');
         $as->display($c);
         ?>



All this does is insert a "div" with a CSS id named "cms_fix001" which allows it to reference the setting in the css file that sets a bottom padding value. You can adjust this value to what ever you want. If you want space between other blocks but maybe larger or smaller than the last, just duplicate the process and change the id name both in the php block and the css code.

Good luck!
MrGrowBizz replied on at Permalink Reply
MrGrowBizz
Steve, Hit me with a hammer...a big one! The reason I wasn't seeing the changes as they were occurring between the header and main, not between the header nav and the header where I was having the problem. Based on the coding supplied, determined just needed to edit the header.php in the elements folder(below). Funny, I had tried this yesterday and must have skipped clearing the browser once out of about 50 times!

Shazam... all is well! Can't thank you enough for jumping in and sticking with me as I tripped and stumbled through another education. Cheers! Tim


<div id="page">
<div id="header">
<?php if ($c->isEditMode()) { ?>
<div style="min-height: 300px">
<?php } ?>
<div id="headerNav">
<?php
$a = new Area('Header Nav');
$a->display($c);
?>
</div>
Pixelfixer replied on at Permalink Reply
Pixelfixer
Great! I'm glad it's working for you and I'm glad to be able to help someone else after all the help I've received so many times from others on this site.
perceptivecreative replied on at Permalink Reply
perceptivecreative
Thank you, thank you, thank you! Solved a most frustrating problem.
Veronikan replied on at Permalink Reply
Veronikan
This didn't work for me, nor did any other php "if edit mode" statement I copied from other sources. Nothing I tried inserted a div in edit mode. I can't be the only person to ever have designed a C5 site with a fixed position header. Someone please tell me how I can fix this.

Thanks.
JohntheFish replied on at Permalink Reply
JohntheFish
In your theme try:
if ($c->isEditMode){
  // output html & css style that puts the header into the normal document flow
} else {
  // output html & css that creates your fixed header
}

As for the actual html & css you will have to develop from the above. But as you have already developed a fixed position header, I guess you should be OK with that.