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

<introEmbed
  body={<>
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

![Figure: Staging uses blue background](/uploads/rules/identify-crm-web-servers-by-colors/ssw staging 2.png)

![Figure: Production uses red background](/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.

![Figure: Changing CRM 2016 UI by using theme feature](/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**

![Figure: CRM 2013 with a green navigation bar](/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](https://learn.microsoft.com/en-us/sharepoint/dev/general-development/how-to-deploy-a-custom-theme-in-sharepoint?WT.mc_id=DX-MVP-33518)