Home
Do you identify Development, Test and Production Web Servers by colors?
  v11.0 Posted at 11/01/2018 9:32 AM by Tiago Araujo

As per rule "Do you have separate development, testing, and production environment?", it's better to use different background colors to identify Development, Test and Production servers.

CRM​​

crm staging.png
Figure: Staging uses blue background
crm production.png
Figure: Production uses red background 

The way to change the default background color is to edit the CRM CSS files. These changes aren't supported and may be overwritten when CRM Rollups are applied.

CRM 2015 and CRM 2016

Using theme feature to change the environment color.

CRM2015Theme.JPG
Figure: Changing CRM 2016 UI by using theme feature

​CRM 2013

Edit: <CrmWebsiteRoot>\_controls\navbar\navbar.css

.navigationControl
{
background-color: #006600;
margin: 0;
z-index: 999;
float: left;
width: 100%;
position: relative;
}

 Figure: Edit the background color to reflect the environment
crm2013_greenbar.jpg
 Figure: CRM 2013 with a green navigation bar

CRM 2011

Edit <CrmWebsiteRoot>\_static\css\1033\cui.css, locate and modify the section ms-cui-tabBody so that it reads:

background-color : #ffffff;

Change color to a suitable color for the environment:

background-color : #bbffaa; 

 

Figure: CRM Ribbon color green to signify production environment

CRM 4

Edit, <CrmWebsiteRoot>\_common\styles\global.css.aspx

         body.stage
            {
                <% if (CrmStyles.IsRightToLeft) { %>
                    dir:rtl;
                <%} %>
                border-top:1px solid #6893cf;
                
                  
            
            
            
            
            /* background-color: #d6e8ff; */
                
                  
            
            
            
            
            background-color: #ffff00;
                
                  
            
            
            
            
            padding: 4px;
                
                  
            
            
            
            
            /* background-repeat: repeat-x;
                
                  
            
            
            
            
            background-image: url(/_imgs/app_back.gif);
                  */
            }
       
Figure: In C:\Inetpub\wwwroot\_common\styles\global.css.aspx comment out and change the reference in yellow so the users know what server they are on
Color of CRM Development Server
Figure: Color of CRM Development Server - Red
Color of CRM Test Server
Figure: Color of CRM Test Server - Yellow
Color of CRM Test Server
Figure: Color of CRM Production Server - Default

SharePoint online

Regarding the color codes, we use to differentiate Production to Test with SharePoint online.

Here is what we change:

  • Site Settings | Change The Look
    • Test – Orange
      sharepoint-orange-theme.jpg
      Figure: Selecting Orange theme for test
      sharepoint-orange-applied.jpg
      Figure: orange theme applied
    • Production - Office
      sharepoint-orange-theme.jpg
      Figure: Selecting Office theme for Production
      sharepoint-orange-applied.jpg
      Figure: office (blue) theme applied

Related rules

    Do you feel this rule needs an update?

    If you want to be notified when this rule is updated, please enter your email address:

    Comments:

    Note: Social Media login for Yotpo is not working in IE or Safari, please use Chrome. We are waiting for Yotpo to fix it.