Forums

CSS snippet to reduce height of concrete5 toolbar

Permalink 3 users found helpful
maybe a few people will find this css snippet useful. when I'm developing I tend to have firebug & the web-developer toolbar shown, but on my laptop having those in conjunction with the concrete5 toolbar doesn't leave to much space for the actual webpage. Adding this snippet with reduce the c5 toolbar from 50px to 20px by removing the icons & only displaying the text (screenshot attached). 

div#ccm-page-controls { height:20px !important; }
div#ccm-page-detail { top:32px !important; }
ul#ccm-system-nav li a, 
ul#ccm-system-nav li span, 
ul#ccm-main-nav li a, 
ul#ccm-main-nav li span, 
ul#ccm-main-nav li.ccm-nav-rolloversOff:hover a, 
ul#ccm-main-nav li.ccm-nav-rolloversOff:hover li span { background:none !important; padding-top:4px !important; }
div#ccm-logo-wrapper img { width:20px; height:20px; }
div#ccm-logo-wrapper { height:20px !important; }
ul#ccm-system-nav { height:20px !important; } 
div#ccm-page-controls ul#ccm-main-nav { padding-left:20px !important; }


you may also need to add something like this when the page is in edit mode: 
html > body { margin:20px !important; }

1 Attachment

Tony
 
aghouseh replied on at Permalink Reply
aghouseh
This is a tasty morsel! I think I will probably just implement this as a client-side CSS in Firefox; that way I can see the slimmed down version, but clients still see the more obvious, branded version. Nice work, Tony!
vGibson replied on at Permalink Reply
vGibson
I've done something similar only I wanted to remove it completely because I have some elements that are placed in absolute position at the top of my site and thus the toolbar would cover them. I used some simple jQuery to move the toolbar off the site "-50px to the top" and then animated it to slide in/out when you mouse into the document area....

Just place the following into the head of your theme....

<script>
<?php
$cp = new Permissions($c);
if ($cp->canWrite() || $cp->canAddSubContent() || $cp->canAdminPage()) { ?>
    $("#ccm-page-controls").css("top", "-50px");
    $("body").attr("style", "margin-top: 0px !important"); 
    $(document).mouseenter(function() {
        $("#ccm-page-controls").stop().animate({top:0},{easing:'easeInQuad', duration: 250});
   });
    $(document).mouseleave(function() {
        $("#ccm-page-controls").stop().animate({top:-50},{easing:'easeOutQuad', duration: 150});
   });
<?php } ?>
});
</script>

If you wanted to remove it completely unless your mouse is in the document window then this would do it.. It helped me..

**Edit**
Figured out a way to get past the !important flag in the ccm css to allow jquery to override it.