CSS snippet to reduce height of concrete5 edit bar

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:

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; }

Like this post?

Comments:

Add a New Comment

Name

Email (will not be made public)

Website (optional)

Please type the letters and numbers shown in the image.