The Problem

Suppose you're developing a Drupal site and working on a live and local development version of your site. Now your local site is a test bed for content changes, new modules etc but you dont want to apply those same changes when your working on your live site - at least untill the have been tested.

Quite often I was working with browser tabs open to both my local and live sites and a couple of times nearly applied a change to the live site instead of dev - just because I wasnt looking at the URL. 

So here's the thing how to easily distinguish between your live and development Drupal sites when your logged in as administrator?

The Solution

The solution for me was to change the background colour of the Admin toolbar (I had already replaced the standard Toolbar with the "Administration menu Style Toolbar").

I was using my own theme (based on Zen) and had my own stylesheets and assorted template files.

The change was really straightforward, I just added a "live-site" class to the body tag in html.tpl.php if the server name didnt include localhost, and then just amended my CSS to change the background colour for the admin toolbar when on the live site.

The Code Changes

So in the file html.tpl.php the only changes were:

	// Now are we logged in and running REMOTELY??
	$RCLASS  = (strpos($_SERVER["SERVER_NAME"] ,"localhost") !== false) ? 'test-site' : 'live-site';
	$RCLASS .= ($logged_in) ? '-logged-in' : '';
	<body class="<?php print $classes . ' ' . $RCLASS; ?>" <?php print $attributes;?>>

and in my CSS, I just added the following override:

	.live-site-logged-in #admin-menu {
	  background: red;

Nice and easy and it worked for me...

The End Result: LiveSite


The End Result: Local Site