Snippet: Template logic to conditionally hide parts of layout using css

About

Solution which will conditionally hide parts of layout using css while in edit mode.

From: zurgutt

Example

Add this in beginning of pagelayout.tpl

{* define a style by context which can be used to hide elements in each mode (navigation, edit, browse etc.) *}
<style>
.context-hideon-{$module_result.ui_context}
{literal}
{
    display: none;
}
{/literal}
</style>

and then you’ll be able to do something like this

<div id="leftmenu" class="context-hideon-edit">
.. some menu here you dont need while editing content ..
</div>

Can be achieved by overriding templates but hey much cleaner this way.