Do you identify Development, Test and Production web servers by colors?

<introEmbed
  body={<>
![](/uploads/rules/identify-crm-web-servers-by-colors/)

As per rule ["Do you have separate development, testing, and production environment?"](/do-you-have-separate-development-testing-and-production-environments), it's better to use different background colors to identify **Development**, **Test** and **Production** servers.

### CRM


<imageEmbed
  alt="Image"
  size="large"
  showBorder={false}
  figureEmbed={{
    preset: "default",
    figure: 'Staging uses blue background',
    shouldDisplay: true
  }}
  src="/uploads/rules/identify-crm-web-servers-by-colors/ssw staging 2.png"
/>


<imageEmbed
  alt="Image"
  size="large"
  showBorder={false}
  figureEmbed={{
    preset: "default",
    figure: 'Production uses red background',
    shouldDisplay: true
  }}
  src="/uploads/rules/identify-crm-web-servers-by-colors/ssw production 2.png"
/>

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.


<imageEmbed
  alt="Image"
  size="large"
  showBorder={false}
  figureEmbed={{
    preset: "default",
    figure: 'Changing CRM 2016 UI by using theme feature',
    shouldDisplay: true
  }}
  src="/uploads/rules/identify-crm-web-servers-by-colors/CRM2015Theme.jpg"
/>

### CRM 2013

Edit `&#123;&#123; CRM WEBSITE ROOT &#125;&#125;\_controls\navbar\navbar.css`:

```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**


<imageEmbed
  alt="Image"
  size="large"
  showBorder={false}
  figureEmbed={{
    preset: "default",
    figure: 'CRM 2013 with a green navigation bar',
    shouldDisplay: true
  }}
  src="/uploads/rules/identify-crm-web-servers-by-colors/crm2013_greenbar.jpg"
/>
  </>}
/>
### CRM 2011

Edit `&#123;&#123; CRM WEBSITE ROOT &#125;&#125;\_static\css\1033\cui.css`, locate and modify the section ms-cui-tabBody so that it reads:

```css
background-color: #ffffff;
```

Change color to a suitable color for the environment:

```css
background-color: #bbffaa;
```


<imageEmbed
  alt="Image"
  size="large"
  showBorder={false}
  figureEmbed={{
    preset: "default",
    figure: 'CRM Ribbon color green to signify production environment',
    shouldDisplay: true
  }}
  src="/uploads/rules/identify-crm-web-servers-by-colors/CRM2011_ColorCodedRibbon.jpg"
/>

### CRM 4

Edit, `&#123;&#123; CRM WEBSITE ROOT &#125;&#125;\_common\styles\global.css.aspx`

```css
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**


<imageEmbed
  alt="Image"
  size="large"
  showBorder={false}
  figureEmbed={{
    preset: "default",
    figure: 'Color of CRM Development Server - Red',
    shouldDisplay: true
  }}
  src="/uploads/rules/identify-crm-web-servers-by-colors/CRM_DevelopmentColor.jpg"
/>


<imageEmbed
  alt="Image"
  size="large"
  showBorder={false}
  figureEmbed={{
    preset: "default",
    figure: 'Color of CRM Test Server - Yellow',
    shouldDisplay: true
  }}
  src="/uploads/rules/identify-crm-web-servers-by-colors/CRM_TestColor.jpg"
/>


<imageEmbed
  alt="Image"
  size="large"
  showBorder={false}
  figureEmbed={{
    preset: "default",
    figure: 'Color of CRM Production Server - Default',
    shouldDisplay: true
  }}
  src="/uploads/rules/identify-crm-web-servers-by-colors/CRM_ProductionColor.jpg"
/>

### SharePoint Online

In SharePoint Online, we use Theme colours to differentiate between Production and Development environments.

To change the Theme, simply navigate to Site Settings | Change The Look | Theme

![](/uploads/rules/identify-crm-web-servers-by-colors/2024-09-16_18-10-35.jpg)

### Development - Default Microsoft Blue Theme

![](/uploads/rules/identify-crm-web-servers-by-colors/2024-09-16_18-03-50.jpg)

### Production - SSW Custom Theme


<imageEmbed
  alt="Image"
  size="large"
  showBorder={false}
  figureEmbed={{
    preset: "default",
    figure: 'Selecting Red SSW Custom theme for Production',
    shouldDisplay: true
  }}
  src="/uploads/rules/identify-crm-web-servers-by-colors/2024-09-16_18-06-09.jpg"
/>

More about SharePoint Online custom themes: <https://learn.microsoft.com/en-us/sharepoint/dev/general-development/how-to-deploy-a-custom-theme-in-sharepoint?WT.mc_id=DX-MVP-33518>