Suggestions for showing difference between test and production sites

Ruby on Rails
1

I just picked up a new client with a fairly good-size rails app and we’ve agreed on a few small enhancements for starters. They run two sites with the same code base: one for production (app.domain.com) and another for testing & training (app-dev.domain.com). There’s a logo and background colored banner on each page and they would like the color of the background banner changed so that it’s clear which system they’re on.

Color is handled through css, unfortunately in two different ways. One uses an id=‘logo’ with CSS => (b) #header .section #logo – background: #5F9E45, while the other uses class=‘logo’ with CSS => div.logo - background: #5F9E45.

A couple of approaches come to mind:

  1. Fire up a little javascript function at page load time, determine what the subdomain value is, and change the class or id on the page to “logo-dev” and then include in the css files styling which changes the background color appropriately.
  2. Run a little bash/sed script on the app-dev site which runs immediately after I do a git pull with updated content, and just change the background values to some other color.

I’d appreciate your thoughts on these two approaches and also hear of any other approaches you come up with.

2

Add the name of the environment as a class to the body tag.

body.development #header .section #logo,
body.development div.logo {
  background: #5F9E45;
}
3

Nice, @amcloud! I like that and will give it a try.