Forums

Editing hidden (display:none) content block

Permalink
Hi.
I have 2 blocks:
1) large image area
2) smaller content block on top of it that is hidden (by display:none) until the user clicks on it.

When I click "edit page" on the C5 header I cannot edit the content, is there anyway of forcing the display:none block to be seen when in edit mode?

Thanks
dancer
 
jelthure replied on at Permalink Best Answer Reply
jelthure
If you only need the block visible during edit mode you can add this to the header part of your theme:

<?php //setup css classes for body tag
$bodyClass = '';
if( $c->isEditMode() )
  $bodyClass .= ' edit-mode';
$uinfo = new User();
if( $uinfo->IsLoggedIn() )
  $bodyClass .= ' active-member';
?>
<body class="<?php print $bodyClass; ?>">


then you will have a class on the body tag you can reference.

hope this helps
dancer replied on at Permalink Reply 2 Attachments
dancer
Perfect. Thanks jelthure.
One small issue I do have is because the image block underneath is large it is very hard to "edit" (rollover when grey) the smaller area. Is there any way to make the smaller block "selected" so I can edit it when I roll over?

See attached images to help explain.
Thank you
jelthure replied on at Permalink Reply
jelthure
you could try defining an hover state in your css that on hover the image changes the z-index.
cebabbage replied on at Permalink Reply
I do not appear to be getting a page class with this code. I have copied and pasted this in my header. IS this correct?
cebabbage replied on at Permalink Reply
Ok I have managed to make this work. I am unsure now how to reference it in my css. Could you please help?

Thanks
wildapple replied on at Permalink Reply
wildapple
Using jelthure's code example above it would be adding a class to the body tag so in your css you would chain together something like:

.my-hidden-div {
        display: none;
}
.edit-mode .my-hidden-div {
       display: block;
}