To provide context between similarly-looking SDL Tridion environments, consider Skinning the Content Manager Explorer as described on SDL Live Content.

Simplified, slightly modified, and with some pics. This is a fairly quick and easy way to make your CMS environments stand out from each other. For the full power of CME Themes, head on over to YATB.

1. Make a Copy. Go to %TRIDION_HOME%\web\WebUI\Editors\CME\Themes\Carbon\Environments\. Copy one of the .css files, I used Development.css and renamed it CreateAndBreak.css.
   
2. Change colors. Update the background-color hex values. Inspired by this Mihai’s “Getting Dark” series, I tried #444 to make the background bar and splitters dark gray.

   * Views */
   .itemview .tabwrapper,
   .itemview #MasterTabControl_switches
   {
   	background-color: #444; /* updated */
   }
   
   /* Dashboard */
   .dashboard #DashboardTitlebar,
   .dashboard #DashboardSplitter
   {
   	background-color: #444; /* updated */
   }
   
   /* Overrides */
   .titlebar .extensions .time
   {
   	background: none;
   	padding: 3px 0 3px 10px;
   	margin-left: 0;
   }
   .titlebar .extensions .time label
   {
   	padding: 0 5px 0 0;
   }
   #TitlebarContainer
   {
   	background-color: #444; /* updated */
   }
   /* Environment name on titlebar */
   .titlebar .extensions .environment-name
   {
   	max-width: 250px;
   	overflow: hidden;
   	white-space: nowrap;
   	font-size: 10px;
   	color: #fff;
   	float: left;
   	padding: 5px 10px 3px 10px;
   }
   

3. Add a Logo. Optionally updoad an image (95w x 24h pixels) and change the background-image url.

   .tridion .abouttridion .button, .tridion .abouttridion .button.mouseover, .tridion .abouttridion .button.mousedown {
     background-image: url("/WebUI/Editors/CME/Themes/CreateAndBreak/cb-95-24.png"); /* updated */
     background-position: 0 50%;
     background-repeat: no-repeat;
     border-width: 0;
     cursor: pointer;
   }
   

4. Make a “style” Group. Update %TRIDION_HOME%\web\WebUI\Editors\CME\Configuration\CME.config. Add a new group:

         <!-- original -->
         <cfg:group name="Tridion.Web.UI.Editors.CME.Theme.Environments.Development">
           <cfg:fileset>
             <cfg:file type="style">{ThemePath}/Environments/Development.css</cfg:file>
           </cfg:fileset>
         </cfg:group>
   	<!-- added 1/23/2013 -->
         <cfg:group name="Tridion.Web.UI.Editors.CME.Theme.Environments.CreateAndBreak">
           <cfg:fileset>
             <cfg:file type="style">{ThemePath}/Environments/CreateAndBreak.css</cfg:file>
           </cfg:fileset>
         </cfg:group>

5. Update the environment node. Then find the commented out node and uncomment or make a copy.

       <!--environment>
   	<name>Development</name>
   	<resourcegroup>Tridion.Web.UI.Editors.CME.Theme.Environments.Development</resourcegroup>
       </environment-->

       <environment>
           <name>CreateAndBreak</name>
           <resourcegroup>Tridion.Web.UI.Editors.CME.Theme.Environments.CreateAndBreak</resourcegroup><!-- matches group above -->
       </environment>

   

6. Increment the modification attribute’s value in %TRIDION_HOME%\web\WebUI\WebRoot\Configuration\System.config

   <server version="6.1.0.55920" modification="4">

Not quite a full re-skin, but enough to make me wonder who messed with my VM. Note the server name shows and the tiny logo. In older versions of Tridion you could do the same by updating \Tridion\web\images\other\topBG.gif for the gradient and Tridion\web\library\css\colourstyle.css for the bar in item pop-ups.

Thanks to the SDL Live Content contributors and technical writers for including the example I’m working from. If you have feedback on the examples, have a question, or find the rare typo, do leave a comment on SDL Live Content. The team appreciates it.