Making the Tree Tools sticky for easier editing on large sites

Tweet

22 March 2011 | Aram Balakjian | CMS, Site Tree, CSS | Supports v2.4

10 7

If you have ever had to edit content on a SilverStripe site with lots of pages, you will have noticed how furstrating it is to have to keep scrolling back up the tree panel to create a page or enable drag and drop re-ordering. Well, here is a handy bit of CSS you can add to keep the tools static, even as you scroll down the tree.

All you need to do is create a cms.css file in your theme dir and a cms.js file in your mysite/javascript directory and include them by adding a couple of lines to your _config.php file. ( You could just add the CSS to your editor.css stylesheet, which is included in the CMS when it loads for the WYSIWYG editor if you are feeling lazy).

themes/mytheme/css/cms.css

#sitetree_holder {
	margin-top: 82px;
}
	#sitetree_holder #TreeTools{
		position: fixed;
		top: 64px;
		left: 4px;
		width: 205px;
	}
		#sitetree_holder #TreeTools form{
			width: 169px;
		}	

mysite/javascript/jquery.cms.js

function setSitetreeHolderMarginTop() { 
	jQuery("#sitetree_holder").css("margin-top", jQuery("#TreeTools").height()+"px"); 
	fixHeight_left(); 
} 

jQuery('#TreeActions button').live('click', function() { 
	setSitetreeHolderMarginTop(); 
}); 

jQuery(document).ready(function() { 
	setTimeout('setSitetreeHolderMarginTop()', 1000); 
});  

mysite/_config.php

LeftAndMain::require_css('themes/mytheme/css/cms.css');
LeftAndMain::require_javascript('mysite/javascript/jquery.cms.js');

Although this reduces the space you have for the tree, it will mean that on very large sites, users will always have the tools available to them, something some of my clients have been crying out for (on a 4,000 page site).

Note. Because this is a bit of a hack, the tool bar will no longer scale with the sidebar but to me this is a small sacrifice for a massive improvement in large site editing usability.

Bonus

Here's something else I did while making this change to make the page creation a tiny little bit clearer:

			#sitetree_holder #TreeTools select#siteTreeFilterList{
				font-size: 10px;
				padding: 2px;
			}
			#sitetree_holder #TreeTools form#Form_AddPageOptionsForm select{
				width: 130px;
				margin-top: 5px;
				font-size: 12px;
				padding: 3px 5px;				
			}
			#sitetree_holder #TreeTools form#Form_AddPageOptionsForm input.action{
				width: 30px;
				margin-top: 5px;
				margin-left: 5px;
				background: #8d8;
			}	

This will make the dropdown text slightly larger, improve the spacing and make the go button green, like so:

What have you done to make editing easier for your clients? Comment below or submit a Post!

Thanks to Chris Hope for providing the JS and tweaking the CSS to make this a much better solution (see his comments below) :)

Special Thanks

Special thanks go to Chris Hope for their contributions to this post.