Color code environments Opti 12

Daniel Balogh

Vote:

Hi!

My customer wants to get the different environments color coded and by that i mean the top banner should change color.
Green for Integration, Orange for preprod and Red for production. I have tried this (With many variations)
https://world.optimizely.com/blogs/amit-mittal/dates/2023/8/create-environment-banner-that-highlight-current-environment-to-editors/
but since its not for opti 12 i does not work as intended (with my modifications i got it to show, but only in the content-edit area) and i want it to show in all tabs (settings, audiences etc).

Has anyone done this successfully, and how did you do it?

Thanks

Daniel

#338597

May 23, 2025 12:47

Ted

Vote:

If you just want to color code the top bar in the UI, you could load some custom CSS by putting something like the following in module.config:

<clientResources>
   <add name="customStyling" path="ClientResources/CustomUI.css" resourceType="Style" /><!-- Loads a custom stylesheet for the Optimizely UI -->
</clientResources>

<clientModule initializer="">
   <moduleDependencies>
      <add dependency="CMS" type="RunAfter" />
   </moduleDependencies>
   <requiredResources>
      <add name="customStyling" />
   </requiredResources>
</clientModule>

Your CSS could be something like the following:

/* Change colors of top menu bar */

.epi-pn-navigation.mdc-top-app-bar .epi-pn-navigation-row__primary {
    background-color: orange !important;
}

.epi-pn-navigation .epi-pn-logo-background {
    background-color: darkorange !important;
}

You could perhaps serve your CSS served through a minimal API endpoint, to apply color code based on config/environment.

Note: I copied this from an old demo I presented a long time ago, so you may want to target other CSS identifiers.

#338742

Edited, May 26, 2025 9:03