How can we change the banner or navbar color of the Management UI for OPDK?

[david_ryan]

In order to distinguish between multiple UI environments for our platform, we would like to change the Management UI banner or navbar color. What is the best way do to this?

[sudheendras]

Hi @David Ryan I believe we don't support this feature. All our management UI screens have Org and environment names. I agree it's not as distinctive as color but it addresses the need of distinguishing environments.

[#3]

This feature was present in 4.14.07, but was removed in 4.15.01 and beyond.

Some of the physical file artifacts and config settings remain, but the whole feature was deprecated at that time.

[Marsh]

There is no support for changing the look and feel of the management UI, but you could consider using the co-branding feature to add a logo, see: http://docs.apigee.com/release-notes/content/4150400-apigee-edge-private-cloud-release-notes

[DChiesa]

I understand that you want to change the banner color in the Edge Administrative portal.

What do you mean by "multiple UI environments for our platform" ?

Do you mean "multiple Edge environments" ?

There is no official, supported way to do so within the Edge UI.

You could implement a color-change with something like Tampermonkey, which would modify the page according to your requirements.

In case you're not aware: The way tampermonkey works is to load and run custom JavaScript code that you provide, when a configured url is loaded in the browser. That custom JavaScript code could alter colors on the web page that gets displayed, or do .. pretty much anything else. In your case it would be very simple.

Using tampermonkey to accomplish what you want would be a quick and effective way to get what you want. But it would be a hack, your hack, and would not be supported by Apigee of course. It would result in a changed color, only for users that have the Tampermonkey script registered in their browser.

Gist

demonstration

[#6]

I think Apigee deprecated the feature . However, if you are OPDK, you can explore one of the jar where all the assets of the UI components lie. While I let the apigee experts here to comment on legality of modifying the contents, this definitely worked for me 🙂

1) In your management server navigate to /opt/apigee/edge-ui/libs

2) Locate a jar file that is named in the following pattern

enterpriseui.enterpriseui-4.XX.YY.ZZ-aaaaaaa-bbbbbbbb-cccccc-assets.jar

3) You can add your tinker the following CSS files for orange theme in the /public/stylesheets

a) orange-theme.css for post login dashboard page.

b) bootstrapThemeOrange.css for login and logout /consent banner pages.

4) Stop edge-ui service.

5) Take a backup of the original jar.

6) Replace the modified jar file.

7) Give 664 rights to the file and assign it to apigee:apigee user.

😎 Start the edge-ui service

9) clear your browser cache and login again.

Please note that this is NOT a product feature but a surefire means to get your objective fulfilled .

Also, while this feature was supported, it was called co-branding meaning, you retain apigee logo. So please try to maintain that aspect of your config edits.

@Apigee SMEs - If the Apigee product team responds this as a violation to any license agreement for OPDK, please let me know .

Good luck!

[#7]

Also, this is a way to change the appearance in general and not per environment. Hope this helps!

[Marsh]

Regardless of the legality of such, hacking up the jar file to make a cosmetic change just seems like a bad idea.

If there are real business reasons why customization of the UI matters to your company, please help me understand that so we can better prioritize it. In the short term, I cannot recommend anyone do this.

[michaelveit]

There are really good reasons why customization of Edge UI is useful.
E.g. preventing OpenAPI / Swagger upload during API proxy creation would be really useful.

1. Fetching spec requests FAIL, as firewalls are blocking the HTTP calls to the URL, being in different network zone. Hence upload OAS always fails, ending up in support tickets...

2. We maintain the specs in another system, and the user needs to upload the spec first in Edge UI (just grabbing operations out of it, then throwing the OAS away...). Users need to upload spec to a different component anyway, which is remote controlling Apigee via MS API. Users do not understand at all what Apigee is doing with the OAS...

Modifying CSS would allow us to disable the button, display a hover text with an explanation, and preventing support tickets towards our team.