Move the SilverStripe navigator to the top of pageMove the SilverStripe navigator to the top of page

Posted April 29th, 2011 in SilverStripe (Updated May 7th, 2011)

SilverStripe is a PHP based CMS system. When logged into the admin part of the site there's a navigator bar that appears fixed at the bottom of the page allowing the editor to easily edit a page in the CMS, or toggle between the draft and published version of the site. This post shows how to relocate the SilverStripe navigator bar to the top of the page.

Why move the SilverStripe navigator?

There's nothing wrong with it being at the bottom of the screen, although now I've moved it to the top and been editing some pages I really like it being at the top. The reason why I decided today to move the navigator was because of the annoying floating status bar in Google's Chrome web browser.

When mousing over links in Chrome, the status bar floats over the bottom left side of the browser, obscuring whatever's under it. The SS navigator's CMS, Draft Site and Published Site links are in the bottom left corner of the browser.

In theory, when you move the mouse bottom left, the floating status bar will flick over to the right side but I found today that after the upgrade to Chrome 11 that it was less likely to flick away and often just stayed over the links making them completely inaccessible. (Update May 7th 2011: it doesn't appear to have this issue on Windows, just on the Mac).

To save myself the frustration of trying to click a link in the SS navigator I decided to move it to the top, and what a timesaver it has been.

SilverStripe version used in this post

The version of SilverStripe used when I moved the navigator was 2.4.5. The notes in this post should work for all versions of SilverStripe 2.4.x.

There's a major new release coming out at the end of this year (3.0) which will completely change the way SS works so it's likely the navigator will change as well and this post will no longer apply.

Before and after screenshots

Here's a before screenshot showing the navigator at the bottom of the screen on my New Zealand Running Calendar website. I've highlighted both the navigator and the box showing whether it's the published or draft version of the site with a green box. The navigator is the default, but the other box has been modified slightly with CSS.

silverstripe navigator in its default position at the bottom

The second screenshot shows the navigation bar relocated to the top of the screen. I've done away with the box showing which version of the site it is and changed it so the "Draft Site" and "Published Site" are instead highlighted with a red background so make it clear.

 silverstripe navigator relocated to the top

Modifications required

The only required modifications are to the CSS.

Add the following to your website's main CSS file. This changes the position to the top and changes the border of the navigator from being on the top to being on the bottom.

html #SilverStripeNavigator {
	border-bottom: 2px solid #D4D0C8;
	border-top: none;
	top: 0;
}

Adding "html" before the ID makes the rules stick without having to use a !important flag. I found that some were overridden by those in Sapphire's SilverStripeNavigator.css file.

If you want to remove the message box which shows if this is the draft or published version of the site, and add a red background to the selected option in the navigator, add the following rules as well:

html #SilverStripeNavigatorMessage {
	display: none;
}
html #switchView a.current {
	background-color: red;
	padding: 3px;
}
html #switchView a.current:hover {
	background-color: red;
}

The only issue now is that the navigation bar will appear over the top of the design at the top of the page. The easiest solution I could come up with was to add the following to the main page template's <head> section.

Note that this next bit may not work as expected depending on how your template's layout and CSS works and may do some weird things to your page layout, especially if you use background images. I'm sure you can work it out though ;)

<% if SilverStripeNavigator %>
<style type="text/css">
  body {
    margin-top: 24px !important;
  }
</style>
<% end_if %>

The margin-top needs to be set to the height and top/bottom padding of the navigator, which is 24px. I've added the nasty old !important flag so the subsequent declaration in  Sapphire's SilverStripeNavigator.css file is ignored.

This bit code will only appear in the rendered HTML when the navigator is present, which is only on a dev version of the site, or when an admin is logged in.

Related posts:

Comments

blog comments powered by Disqus