Quite a while back someone on the Concrete5 Community forums was asking if there was a way to hide the top bar that appears on the front end of the a site when in edit mode.  It was an interesting question.  I thought it might be something fun to experiment with and that it might be useful to do in some cases.  The tutorial below is the result.

I wrote this quite a while ago and posted the results in the forums, but never heard anything back. Recently, someone else asked about doing something similar so I thought I would put this together.

The following code makes the Concrete5 logo on the left side of the bar into a button.  When you click it the entire bar except for the logo become transparent.  You can click the logo again to toggle the bar back on.  There's also some javascript for managing a cookie so that your toggle state is saved across page loads and browser sessions.

These are the steps:

1. Copy the the concrete/tools/page_controls_menu_js.php file into your top-level tools directory.  Concrete5 will use this copy to override the core version.
2. Edit the file you copied in step #1 to add the following code near the bottom of the file.  You want to place this code inside the $(function() { ... }); javascript.  The best place to put it is at the bottom.
   
   

       function createCookie(name,value,days) {
           if (days) {
               var date = new Date();
               date.setTime(date.getTime()+(days*24*60*60*1000));
               var expires = "; expires="+date.toGMTString();
           }
           else var expires = "";
           document.cookie = name+"="+value+expires+"; path=/";
       }
   
       function readCookie(name) {
           var nameEQ = name + "=";
           var ca = document.cookie.split(';');
           for(var i=0;i < ca.length;i++) {
               var c = ca[i];
               while (c.charAt(0)==' ') c = c.substring(1,c.length);
               if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
           }
           return -1;
       }
   
       function eraseCookie(name) {
           createCookie(name,"",-1);
       }
   
       var ccm_bar_visible = readCookie("ccm_bar_visible") | 0;
       if (ccm_bar_visible == -1) createCookie("ccm_bar_visible", 1);
       var ccm_logo_click = function () {
           var el = $("#ccm-logo");
           if (ccm_bar_visible) {
               ccm_bar_visible = 0;
               el.css({ position: "fixed", top: 0, left: 0 });
               el.remove().appendTo("body");
               $("#ccm-page-controls").hide();
           } else {
               ccm_bar_visible = 1;
               el.remove().appendTo("#ccm-logo-wrapper");
               el.css({ display: "inline", position: "static", top: 0, left: 0 });
               $("#ccm-page-controls").show();
           }
           createCookie("ccm_bar_visible", ccm_bar_visible);
           $("#ccm-logo").click(ccm_logo_click);
       };
       $("#ccm-logo").click(ccm_logo_click);
       if (!ccm_bar_visible) { ccm_bar_visible = 1; ccm_logo_click(); }
   
   

3. Edit the concrete/css/ccm.ui.css file.  Change the line below, which should be the second line of the file:
   
   

       body {margin: 49px 0px 0px 0px !important; }
   

   
   to:
   
   

       body {margin: 0px 0px 0px 0px !important; }
   
   

You can override the ccm.ui.css file by copying to the top level css directly also, but if you do that you will need to change the url paths of a multitude of images in the file to get things working properly.  It's usually better to not change core files like this, but since the change is trivial its easy to redo later if you upgrade to a new version of Concrete5.

If something goes wrong or you decide you don't like the code just undo the change to the ccm.ui.css file and delete the copy of the page_controls_menu_js.php you placed in your top-level tools directory.

That's it!