Skip to main content

 For a new customer I was setting up the environments and after everything was set up I found something missing. Since the application looks exactly the same on all environments (dev, acc and prod) I was missing a feature to easily spot the difference between them. Therefore I've implemented a simple css in the custom.css file. Between environments I've modified two parameters.

  • content (‘DEVELOPMENT’ for dev and 'ACCEPTATION’ for acc)
  • background (red for dev and blue for acc)

For the production environment we did not implement this code. So if you see a badge in the left bottom corner it is not production. 

body > div:first-of-type::after {
    content: 'ACCEPTATION';
    display: block;
    position: absolute;
    bottom: 1px;
    left: 1px;
    background: blue;
    z-index: 999999999999999999999999999999;
    color: white;
    padding: 10px 20px;
}

Since it is implemented in Universal it works for any application, including IAM.

This is what it looks like:

 

@Kasper Reijnders Nice way of highlighting the differences between environments! Disadvantage is that you need to maintain different versions of your custom.css for each environment.

Alternatively, we use an adjusted version of the first screenshot in Post synchronization code, through which we assign different Theme colors to each environment. Disadvantage of this solution is that it only works for the Custom Application and not IAM, and that it doesn't work for the Universal GUI which is opened against the SF instead of IAM.

Terms & ConditionsCookie settings