This is the documentation for concrete5 version 5.6 and earlier. View Current Documentation
ul#ccm-system-nav #ccm-nav-files {background-image:
url(../images/icons/icon_header_files.png); background-position: center 8px !important}
ul#ccm-system-nav #ccm-nav-files.ccm-nav-loading {background-position: center 8px

ul#ccm-system-nav #ccm-nav-sitemap {background-image:
url(../images/icons/icon_header_sitemap.png); background-position: center 8px !important}
ul#ccm-system-nav #ccm-nav-sitemap.ccm-nav-loading {background-position: center 8px

Originally posted by jedspurg at

Edited with some corrections by andrew


While working in concrete5,  we found ourselves often going from editing a page right to the site map or file manager. Usually this is a two click process; by clicking on Dashboard then on the File Manager or Site Map buttons on the left. Being the impatient developers and web editors that we are, we dreamed of a one click solution to access these areas. (Editors note: I agree. Hopefully very soon there will be a solution like this built into the core. Edit 2: In 5.4.1 there is an option to enable or disable these two buttons.)

Adding this functionality requires editing two core files in the concrete folder and uploading two image files to the core. 

1. First, edit the JavaScript file.

Find the page_controls_menu_js.php file in the concrete/tools/folder. Locate the following line of code:

<?php  if ($dh->canRead()) { ?>
menuHTML += ‘<li><a id="ccm-nav-dashboard" 
href="<?php echo View::url(’/dashboard’)?>”><?php echo t(’Dashboard’)?></a></li>’;
<?php  } ?>

Add these lines of code directly before it:

<?php  if ($dh->canRead()) { ?>
menuHTML += '<li><a id="ccm-nav-sitemap" href="javascript:void(0)" 
    onclick="window.location.href=\'<?php echo   View::url(’/dashboard/sitemap’)?>'”><?php echo t('Site Map')?></a></li>’;
<?php  } ?>

<?php  if ($dh->canRead()) { ?>
menuHTML += '<li><a id="ccm-nav-files" href="javascript:void(0)" 
    onclick="window.location.href=\'<?php echo   View::url(’/dashboard/files’)?>'”><?php echo t('File Manager')?></a></li>’;
<?php  } ?>

2. Edit the CSS

Next, we need to modify the core css file to include our two new selectors.

Browse to concrete/css and find the file ccm.ui.css

Next, find this line of code:

ul#ccm-system-nav #ccm-nav-dashboard {background-image:
url(../images/icons/icon_header_dashboard.png); background-position: center 8px !important}

Add these lines of code directly above it:

3. Upload two new images

Now that we have these two files added, we only need to create and upload our images. It is important to create .png files with transparent backgrounds. name them icon_header_sitemap.png and icon_header_files.png accordingly. Upload them to concrete/images/icons

I created two images that I hope fit into the aesthetic that the concrete5 crew has established. (right click and save as to grab these)



That should do it! If all is successful, your toolbar should look like this:


Loading Conversation