SSbits - Home page
Site by Carbon Crayon
Submit a Post >

Snippets - Little bits of code to make you happy

Making the Tree Tools sticky for easier editing on large sites

SSBstickytoolbar3

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.

Aram Balakjian avatar

Aram Balakjian

Aram is a web developer running London based agency Aab Web. He has a strong passion for developing attractive, usable sites around the SilverStripe CMS.

  • Chris Hope
    23/03/2011 10:07pm (3 years ago)

    Improvements to solve a few issues...

    Revised CSS:
    #sitetree_holder {
    border-top: 82px solid transparent;
    }
    #sitetree_holder #TreeTools {
    position: fixed;
    top: 64px;
    left: 4px;
    }
    #sitetree_holder #TreeTools form {
    width: 169px;
    }

    Create a Javascript file and include LeftAndMain::require_javascript(...)


    jQuery('#TreeActions button').live('click', function() {
    jQuery('#sitetree_holder').css('border-top', jQuery('#TreeTools').height()+'px'+' solid transparent');
    });

    The tool bar remains full width no matter how wide #left is, and the scroll bar and sitetree remain present under it. The bit of Javascript resizes the top border depending on the height of the toolbar so there's no need to allow for extra padding/border. Note that I've only tested this in Chrome.

    I had tried to do something like what you've done here in the past but it never worked. Thanks to you we have a solution.

  • Chris Hope
    23/03/2011 10:16pm (3 years ago)

    Looking at it again, it can be a margin-top instead of a border-top (I was using a border at the start to sue a colour to see what was happening).

    So revise the stuff with border-top to:

    #sitetree_holder {
    margin-top: 82px;
    }

    and

    jQuery('#sitetree_holder').css('margin-top', jQuery('#TreeTools').height()+'px');

  • Chris Hope
    23/03/2011 10:41pm (3 years ago)

    Last comment, I promise :) I've just been messing around with this all morning...

    After setting the margin-top with Javascript, call:
    fixHeight_left();
    To sort out the positioning of the Page Tree, Page Version History and Site Reports toggle things.

    It also helps if onload the margin is set. This deals with x-browser/os issues with how big the toolbar is depending on font and select box sizes. Just putting it in document.ready doesn't seem to quite work so I've put it in that and then done a setTimout and it seems to work ok. FInal JS code:


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

    Tested in Chrome and FF 3.6 on Mac.

  • Chris Hope
    23/03/2011 11:13pm (3 years ago)

    Must learn to fully test before I comment next time... One final issue is that the toolbar ends up full width and if you open up the insert link/image/flash dialog on the right the toolbar sits over the top of this. You could set the #sitetree_holder #TreeTools to some max-width value, or do what I have done which is to push the #contentPanel higher in the stacking order so it's on top:

    #contentPanel {
    z-index: 100;
    }

  • Aram Balakjian
    24/03/2011 11:42am (3 years ago)

    Awsome thanks Chris, your fixes are a massive improvement! Added to the post :)

    The only one I left out was the full width of the tools as for some reason it was overflowing the sidebar over the blue divider and looked kind of messy and given that the tools form is limited in width anyway, I didn't feel it added any extra functionality.

    Anyway thanks again, it's a actually now a pretty solid solution!

    Aram

  • Jeroen Marechal
    04/04/2011 10:21pm (3 years ago)

    Thanks, this comes in handy! I was wondering; how did you get the URLSegment field on your main tab?

  • Aram Balakjian
    05/04/2011 8:33am (3 years ago)

    Hi Jeroen,

    I actually just copied the field definition from SiteTree::getCMSFields().

    I'll add a snipped at some point to show you how to do it :)

    Aram

  • Jeroen Marechal
    05/04/2011 1:23pm (3 years ago)

    Hi Aram,

    Thanks for your reply! I will look into it

  • Simon Erkelens
    29/09/2011 9:39pm (3 years ago)

    Looking at this... I'm pondering...

    This should be combined with a custom branding. I always use a name like ZZBranding (last in line, thus, my CSS etc. will always overrule any other setting).

    There's lots of improvements to do with custom branding!
    *article to come?*

  • Nobrainer Web
    18/01/2012 8:48pm (2 years ago)

    i feel the silverstripe admin ui needs to be improved in this regard, many CMS systems have right click options on the page tree and other places, making it much easier to add subpages, copy, delete, move and so on.
    I allways recommend SS to my clients based on the fact that i love the interface, but then again, so much to improve still.
    Looking at SS 3.0 alpha 2 it does not look like this is being improved, i really hope it is - wish i was better at PHP/ SilverStripe so i could contribute :-(

    Thanks for yet another usefull post

Post a comment ...

You cannot post comments until you have logged in. Login Here.

Advertisement

Site of the Month

Find SSbits on

Top Contributers

Rank Avatar Name
1 article image Aram Balakjian
2 article image Daniel Hensby
3 article image Marcus Dalgren
4 article image Hamish Campbell
5 article image Ty Barho
6 article image njorndare
7 article image Martijn van Nieuwenhoven
8 article image Darren-Lee
9 article image Roman Schmid
10 article image Matt Clegg

View full leaderboard


Advertisement