User story #8368
closedCreate multiple color schemas of the UI for the criticality of the environment
Description
Hi,
Imagine this scenario: You have a full blown Test -> Integration -> Production(s) kind of separation in your Rudder-Usage, and we could also think of a handful some sandbox-systems running around in the Lab, where you just play around. Could easily happen in bigger environments...
This would mean you have to deal at least with 3-5 UI-s, from which at least 3 are identical (Test/Int/Prod), and maybe have also some newer versions on some sandbox systems...
In this case there is almost NO WAY to differentiate between them, you always have to look at the URL to make sure you are in the correct Browser Tab (right, jooooooon42? :]).
This is also topped by having the same FavIcon for the browser tab for all your Rudder installations AND all the official Rudder Pages (at least Issue Tracker + Documentation). I once had a browser having about ~20 tabs open all with the Rudder ICON, try to find your own Rudder Environment there...
I think you can get the idea of it...
My suggestion is that you could make some different "shades" of your UI, so one could choose "red" for Production, "yellow" for Integration, and "green" for Test, and maybe some other color for sandboxes. This way when you have a browser window open, you would see on the first blink of the eye, OK, this is RED, make sure not to to break anything, or This is GREEN, this is where I work out my ideas.
Files
Updated by Janos Mattyasovszky over 8 years ago
- Related to Architecture #6661: Customize Login frontend and Rudder color them to differentiate environments added
Updated by Janos Mattyasovszky over 8 years ago
- Related to User story #8359: Redesigning the main menu added
Updated by Nicolas CHARLES over 8 years ago
Thanks for the idea.
Where would be the shade, in your idea ? The menu, or something else ?
Updated by Janos Mattyasovszky over 8 years ago
I wrote "shade" in but was thinking about a generic color scheme, so you'd have a red / yellow / green color you could choose from, and that would be visible significantly.
That could manifest in having key elements of the UI represent that color, like buttons (I think twice before clicking on a red button than a green one), and/or the top menu bar's color (as seen in #8359).
Updated by Janos Mattyasovszky over 8 years ago
- File rudder_menu_prod.png rudder_menu_prod.png added
- File rudder_menu_test.png rudder_menu_test.png added
- File rudder_menu_sandbox.png rudder_menu_sandbox.png added
Updated by Janos Mattyasovszky over 7 years ago
For those who might want to achieve the same on 4.1.x, where is a howto.
First, pick a color. Each HTML color name which has a "dark*" version is OK, like "red", "green", "blue".
# export COLOR=red
Then fetch the original CSS files and sed then through:
# cd /opt/rudder/share/load-page/files/ # wget http://localhost:8080/rudder/style/{login.css,AdminLTE/AdminLTE.min.css}; # sed -i " s/#f08004/${COLOR}/ig; # generic menu background color s/#e07a07/${COLOR}/ig; # top left logo background color s/#FF8702/dark${COLOR}/ig; # logo hower s/#D47001/dark${COLOR}/ig; # menu button hower " login.css AdminLTE.min.css
Create a custom apache config file to override some reverse-proxy settings to serve the modified files
# cat > /opt/rudder/etc/rudder-custom-ssl.conf <<<' Alias "/rudder/cache-4.1.5/style/login.css" /opt/rudder/share/load-page/files/login.css ProxyPass "/rudder/cache-4.1.5/style/login.css" "!" Alias "/rudder/cache-4.1.5/style/AdminLTE/AdminLTE.min.css" /opt/rudder/share/load-page/files/AdminLTE.min.css ProxyPass "/rudder/cache-4.1.5/style/AdminLTE/AdminLTE.min.css" "!" ';
Just make sure the cache-4.1.5
matches your current version, which you can get from the rudder-server-root package's version.
Updated by Benoît PECCATTE almost 7 years ago
- Target version set to Ideas (not version specific)
Updated by François ARMAND over 6 years ago
- Related to deleted (Architecture #6661: Customize Login frontend and Rudder color them to differentiate environments)
Updated by François ARMAND over 6 years ago
- Is duplicate of Architecture #6661: Customize Login frontend and Rudder color them to differentiate environments added
Updated by François ARMAND over 6 years ago
- Status changed from New to Rejected
I'm closing that one to keep #6661 as the main entry point for the last development around the branding plugin.