Forums

CSS

Permalink
Hi there C5 experts,

Just wanna know why my css affects the edit mode on C5,

Is there a way to not load my CSS roles on edit mode and apply it only on the area that the viewer where viewing?

Thanks,
 
tomreitz replied on at Permalink Best Answer Reply
tomreitz
here's what I do (in your theme file's <head> section):
<?php if($c->isEditmode()) { ?>
   <style type="text/css">
      /* put your css for "edit mode" here */
   </style>
<?php } else { ?>
   <style type="text/css">
      /* put your css for "regular mode" here */
   </style>
<?php } ?>


hope this helps.
kingpangilinan replied on at Permalink Reply
Yep...

Thanks...
It's helps...

but is there any default css(predefined by c5) to embed in edit_mode?

I really appreaciate your time by responding to my quetion quickly...

Thanks Again...aha^^
tomreitz replied on at Permalink Reply
tomreitz
actually yes. When in edit mode, C5 encloses each area and block in a div with a special class. For example, if you have a sidebar with some blocks in it:
<div id="sidebar-area">
   <div id="sidebar-block-1">
      Lorem ipsum...
   </div>
   <div id="sidebar-block-2">
      Lorem ipsum...
   </div>
</div>

in edit mode, C5 will generate:
<div id="sidebar-area">
   <div id="aXX" class="ccm-area" handle="Sidebar">
      <script type="text/javascript">
         // this script handles editing in this area
      </script>
      <div id="bYYY-XX" class="ccm-block">
         <div id="sidebar-block-1">
            Lorem ipsum...
         </div>
      </div>
      <div id="bZZZ-XX" class="ccm-block">
         <div id="sidebar-block-2">
            Lorem ipsum...
         </div>
      </div>
Viewing 15 lines of 17 lines. View entire code block.

so you can apply CSS like this:
/* in non-edit mode */
#sidebar {...}
#sidebar-block-1 {...}
#sidebar-block-2 {...}
/* in EDIT mode */
#sidebar div.ccm-area {...}
div.ccm-block #sidebar-block-1 {...}
div.ccm-block #sidebar-block-2 {...}


hope this makes sense and helps.