Written by

Question Tarek Sinno · Apr 25, 2018

Customizing Management Portal Header

Good day,

Is there a way to change the theme in management portal? or at least the color of the header.

Issue is, some users have access to Development and Testing and Production environments. I would like a way to color-differentiate the environments to reduce the errors. 

Comments

Tarek Sinno  Apr 25, 2018 to Ben Spead

Thank you a lot! This is a start.

This added a caption in the header, only on Live with a red color.

Can we have the whole banner colored?

0
Colin Ghiotti  Aug 1, 2019 to Tarek Sinno

As an unsupported, inelegant, and prone to break hack!, we've amended one of the standard CSS pages for our HealthShare 2018 installation:

    ZEN_Component__core_3.css

(for Windows, located in <InstallPath>\CSP\broker )

Just added a background colour as follows for our live server:

Doesn't display on every page but does on important pages for us like SQL, lookup tables, configuration pages:

.zendiv {

                background: #FFE0E0;

}

0
Tarek Sinno  Apr 26, 2018 to Ben Spead

Thank you! Very elegant. Will be implementing some of those. 

0
Tarek Sinno  Apr 26, 2018 to Eduard Lebedyuk

Hey Eduard,

Actually the users have different access roles on each server. Yet, such a feature would be nice to have, especially for server administrators. We're relatively new to Ensemble, after checking your article, it would be beneficial for our case.

Thank you!

0
Ben Spead  Apr 25, 2018 to Tarek Sinno

Making further changes to the SMP banner isn't supported unfortunately.  

0
Eduard Lebedyuk · Apr 26, 2018

Should they have access?

The best solution here is restricting access.

InterSystems security model allows for a customizable access management.

Application building/testing/deployment tasks could be fully automated and so not require human intervention at all.

0
Jeffrey Drumm · Aug 1, 2019

I've cobbled together a little TamperMonkey/GreaseMonkey script that diddles with the style sheet without having to make unsupported changes to your installation's configuration. Adust the devattr, qaattr and prdattr variables to suit your color tastes, and the match arguments for the hostnames to identify your servers.

// ==UserScript==

// @name         Management Console Banner

// @namespace    http://tampermonkey.net/

// @version      0.2

// @description  Seems to work for both Chrome and Firefox

// @author       Jeff Drumm, HICG LLC

// @include      *://*/csp/sys*

// @include      *://*/csp/healthshare*

// @grant        none

// ==/UserScript==

function addGlobalStyle(css){

    var head, style;

  head =document.getElementsByTagName('head')[0];

    if(!head){return;}

  style =document.createElement('style');

  style.type ='text/css';

  style.innerHTML = css;

  head.appendChild(style);

}

var devattr ='color-stop(0.0,rgb(95, 246, 18)), color-stop(0.5,rgb(20, 204, 51)), color-stop(1.0,rgb(232, 227, 226))'

var qaattr ='color-stop(0.0,rgb(248, 252, 10)), color-stop(0.5,rgb(204, 199, 20)), color-stop(1.0,rgb(232, 227, 226))'

var prdattr ='color-stop(0.0,rgb(255, 2, 49)), color-stop(0.5,rgb(204, 18, 18)), color-stop(1.0,rgb(232, 227, 226))'

var curattr =''

if(window.location.hostname.match('^ensprod.*')){

    curattr = prdattr;

}elseif(window.location.hostname.match('^ensqa.*')){

    curattr = qaattr;

}else{

    curattr = devattr;

}

addGlobalStyle('.portalTitle { background: -webkit-gradient(linear, left top, left bottom, '+ curattr +') !important; } ');

0
Rob Ellis · Jul 6, 2023

Hi all,
I've created a browser extension that changes the header colour to make it obvious which environment you're in

It also organises the environment tabs into tab groups to keep the environments all together ('environments' referred to as 'instances' throughout my extensions docs!)

If you find it helpful, I'd really appreciate it if you voted for it in the Intersystems Grand Prix competition
 
* I actually came across this post when I was first trying to sort this problem for myself and it was @Jeffrey Drumm 's suggestion about
 TamperMonkey/GreaseMonkey that gave me the idea for a browser extension to do this, thanks Jeffrey

0
春旭 刘 · Jul 6, 2023

Thank you a lot! This is a start.

This added a caption in the header, only on Live with a red color.

Can we have the whole banner colored?

0
Rob Ellis  Jul 6, 2023 to 春旭 刘

*Just realised that comment is most likely spam as is just a copy of a comment further up.
First, make sure the Custom Header Colours checkbox is ticked on the Options page

 
If that doesn't work then it could be the CSS file that's injected onto each page where the issue is and you could try editing the targeted classes in the red.css file 

0