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!
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!
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
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)
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
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 :)
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 :)
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:
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.
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.
This worked well. I ended up changing the z-index's of things..
Thanks for your help!
Thanks for your help!
