Forums

Is it possible to change the size of the grey rollover box in block edit mode?

Permalink
Hi all
I'm not sure the subject line conveys my problem - I've even been having trouble googling it successfully.

Anyway - I have written a block that animates header images. The block is working fine but has one small problem. When I go to "Edit Page" I cannot click on any of the other "Add to xxxx" blocks because the header block has been shunted down in edit mode.

I know I can change the size of the edit window but is it possible to change the size of the clickable area that covers the block?

Looking at the CSS I see that I can change the styling on the div "#div ccm-highlighter" but I can't work out how to shrink a specific highlighter.

Apologies for the garbled quesion..

p.s. loving Concrete though! It's awesome!
 
Mnkras replied on at Permalink Reply
Mnkras
i don't really get what you mean, can you post a screen shot, and what the names of the js it loads are called
HugoRune replied on at Permalink Reply 1 Attachment
Sure - sorry.. It's hard to describe. But a picture does speak a thousand words after all!

the javascript I'm referring to is this (in page edit mode)

<script type="text/javascript">
ccm_menuObj205578 = new Object();
ccm_menuObj205578.type = "BLOCK";
ccm_menuObj205578.arHandle = 'HeaderSlideshow';
ccm_menuObj205578.aID = 578;
ccm_menuObj205578.bID = 205;
ccm_menuObj205578.isGlobal = 1;
ccm_menuObj205578.canWrite =true;
ccm_menuObj205578.width = 550;
ccm_menuObj205578.height = 420;
   ccm_menuObj205578.canDesign = false;
ccm_menuObj205578.canAdmin = true;
ccm_menuObj205578.canDelete = true;
ccm_menuObj205578.deleteMessage = "Do you want to delete this block?";
ccm_menuObj205578.canAliasBlockOut = true;
Viewing 15 lines of 18 lines. View entire code block.


I understand the above code generates the "edit" window but I want to be able to change the dimensions of the clickable area in the first place. Damn, still can't explain!

Ok in the attached image this is what happens when I rollover the image of the girl - the clickable region for the HeaderSlideshow completely covers the other blocks, meaning that I cannot click on "Add to Newsfeed" or "Add to Showcase" etc. Unfortunatly I cannot simply disable the HeadSlideshow in edit mode either because it needs to be editable as well..

Any thoughts? I've tried messing about with z-index's etc but that doesn't really do anything. I guess what I'm looking for is something like
$e_slideshow_header = new Area('HeaderSlideshow');
if($c->isEditMode()){ 
    $e_slideshow_header->clickableHeight = 100;
}
$e_slideshow_header->display($c);

which would allow me to set the clickable region on the block to 100 pixels as opposed to whatever height it is currently..

Thanks for your patience with my gibberish :)
LukeBMM replied on at Permalink Best Answer Reply
It looks like your issues are caused by stylesheets and can be pretty easily remedied.

Without looking at the page, I don't have exact code for you to copy and paste. You can easily, however, put something like the following into your_theme/elements/header.php:
<?php
if( $c->isEditMode() ) {
  echo('<style type="text/css>
    #headerSlideshow {
      position: relative;
      /* ... or whatever you need to do to fix the layout */
    }
  </style>');
}
?>

Finding the style fix is a bit tricky and it's no longer 100% accurate of how the site will look when out of edit mode, but clearing up the confusion while editing seems worth the trade-off.
HugoRune replied on at Permalink Reply
This worked well. I ended up changing the z-index's of things..

Thanks for your help!