Service Portal - Custom Header Color in sub-production

It's a good idea to set a separate color on non-production environments so you always know when you're in a production environment. In the ServiceNow fulfiller UI, this can be done using "Basic Configuration UI16" module, and the "Header background color" property.

In Service Portal, you also have a similar option in the branding editor, however you would need to change this after each clone, and the configuration would need to stay out of production. This solution will let you set a custom header color per-environment and still migrate the update set to production, for it to apply after all system clones.

Firstly, you need to find which "Header" widget you are using, this is set in the Theme record of the Portal record.

Once you've found the "Header" widget, you may need to clone it in order to modify its contents. If you do clone the widget, you'll need to update the Theme record with the new widget.

In the Header widget, you'll need to add some code into the Server Script and CSS, and also insert a class into the HTML.

Inside the Server Script, put this somewhere on its own line:
data.instanceName = gs.getProperty('instance_name');
This will insert the value of the instance_name system property into the data variable, making it available in both the Client Script and HTML Template.

In the HTML Template, look for the nav element with the "navbar-inverse" class, append the following to the "class" attribute: {{::c.data.instanceName}}

Insert the following CSS into the widget's CSS:

.navbar-inverse.<instanceName> {
  background-color: #6ebe4a;
}
.navbar-inverse.<instanceName> {
  background-color: #fdb525;
} 

Make sure you replace <instanceName> tags with the name of each instance you want a custom color to apply to, as well as modifying the colors to suit your company.