Style the #SilverStripeNavigatorMessage in SilverStripe

Posted February 23rd, 2010 in SilverStripe

When logged into the SilverStripe CMS admin or viewing a SilverStripe on a development site there's a box with a red background that is positioned absolutely showing whether this is the published or the draft version of the site. This post shows how to override the styles for this box.

Screenshot of the default behaviour

This screenshot shows the box floating over the top of the content. If the browser window is resized it will move with the window over the content.

Note that it doesn't normally appear quite so big compared to the rest of the content - I've Photoshopped the box to be its normal size on the reduced size screenshot for legibility.

Changing the styling

The HTML ID of that box is #SilverStripeNavigatorMessage and the style is defined in the sapphire/css/SilverStripeNavigator.css file. Obviously you don't want to "hack the core" and modify the styles in that file so need to make the changes in your own style sheets.

Due to the way the stylesheets are listed in the HTML by SilverStripe, sapphire/css/SilverStripeNavigator.css will always be the last one, and any settings made in your own style sheets for #SilverStripeNavigatorMessage will be overridden.

The simple solution is to prepend "html" as part of the selector and the styles you define will have a higher precedence. For example:

html #SilverStripeNavigatorMessage {
    /* your styles here */
}

Now anything defined in your style sheet will override what's defined in the Sapphire one.