Hide Control Panel Menu

Theme change to hide control panel for logged in users

Zankar Shah
Zankar Shah
A Minute Read

Requirement : Hide the control panel menu by if users have logged in.  

In theme we know that by adding <@liferay.control_menu/> macro, we get control panel menu.  But sometimes we want it conditional.  We don't want control panel menu to appear on the screen by default which can take up header space. 

The control panel menu is added by adding following classes on the body tag.  These classes are

  1. has-control-menu
  2. has-staging-bar  (if staging environment is on and the logged in user has staging permission)
  3. staging-ready  (if staging environment is on and the logged in user has staging permission)
  4. open

Another thing that we need to hide is .control-menu-level-1

The change in theme that you will have to do is updating ftl variable ${css_class}.  Write a code to remove the above mentioned body classes  from ftl variable ${css_class}

    <#assign css_class = css_class?replace("has-control-menu", "") />
    <#assign css_class = css_class?replace("has-staging-bar", "") />
    <#assign css_class = css_class?replace("staging-ready", "") />
    <#assign css_class = css_class?replace("open", "closed")/>

 <body class="${css_class}">

and hide .control-menu-level-1

<style type="text/css">
        .control-menu-level-1 {
            display:none;
        }
    </style>

 To get back control panel menu you can have on/off switch on the theme somewhere which can hide/show the control panel menu through JavaScript.

$( 'body' ).toggleClass( 'has-control-menu' );
if ( $( "body" ).hasClass( "has-control-menu" ) ) {
         $( 'body' ).removeClass( 'closed' );
         $(".control-menu-level-1").show();

//only if staging environment is ON Start code        
         if($("#showstagingicon").val() == "true") {
             if (! $( 'body' ).hasClass( 'has-staging-bar' ) ) {
                    $( "body" ).addClass( 'has-staging-bar' );
             }
             
             if (! $( 'body' ).hasClass( 'staging-ready' ) ) {
                    $( "body" ).addClass( 'staging-ready' );
             }
         }
//only if staging environment is ON End code
     } else {
        $( "body" ).removeClass( 'has-staging-bar' );
        $( 'body' ).removeClass( 'staging-ready' );
        $( 'body' ).removeClass( 'open' );
        $(".control-menu-level-1").hide();
        if (! $( 'body' ).hasClass( 'closed' ) ) {
          $( 'body' ).addClass( 'closed' );
        }
        
      }

 

Page Comments
thumbnail
Fredi B
5 Years Ago - Edited

Interesting post.

Another possible solution would be using a boolean. 

<#assign showcontrolmenu = true />

<#if is_site_admin?? >    <#if is_site_admin>        <#assign showcontrolmenu = true />    <#else>        <#assign showcontrolmenu = false />    </#if></#if>

<#if showcontrolmenu>    <@liferay.control_menu /></#if>

Please sign in to reply.
Zankar Shah Fredi B
5 Years Ago - Edited

Hi Fredi

Thanks for the inputs.  However with this solution Site Admin would never get the control menu.  Lets say Site Admin would  like to toggle with control menu then this approach might not work

Please sign in to reply.
Erik Galliani
5 Years Ago - Edited

Hi Zankar,

im new in JSF and Liferay and need to implement this functionality. Can you please write some small step-by-step, or some hints on how to implement your solution. Which files are to be changed? 

Thanks  

Please sign in to reply.
Zankar Shah Erik Galliani
5 Years Ago - Edited

Sure Erik can guide you through.  Generally in Liferay you create your custom theme.  The above changes are done in your theme.

In your custom theme you create, you should have portal_normal.ftl which contains main HTML body.

So first point here

"The control panel menu is added by adding following classes on the body tag"  You need to change here

Second point "and hide .control-menu-level-1"

This can be done in your theme's custom.css

Last point "To get back control panel menu you can have on/off switch...."

This is done in your theme's JS files.

If you are unsure  about how to create your own custom theme then please go through some reference material for that.

I hope this helps!

Please sign in to reply.

Related Assets...

No Results Found

More Blog Entries...

David H Nebinger
March 20, 2026
Ben Turner
March 20, 2026
Marco Leo
March 11, 2026