Qlik Community

Qlik Healthcare User Group

Highlighted
wdchristensen
Contributor III

How can I make Development / Test environments (QMC and HUB) look different than production?

I have run across a few issues where analysts are attempting to use features that are specific to a given environment and it is difficult to tell them apart in screenshot. I was wondering if there was an easy way to make the different environments look unique (CSS Background color?).

1 Solution

Accepted Solutions
fgonzalez
New Contributor

Re: How can I make Development / Test environments (QMC and HUB) look different than production?

What I've done on our dev environment is modify the hub.css and client.css files.

On the hub.css (C:\Program Files\Qlik\Sense\Client\hub\hub.css), I made the following modification to change the hub side bar color by changing the background property.  The default value is #FFFFFF.  I replaced it with a yellowish color: #f7b100

.q-hub-sidebar {

display: -webkit-flex;

display: flex;

max-width: 200px;

background: #f7b100;

-webkit-flex: 0 0 20%;

flex: 0 0 20%;

min-width: 140px;

border-right: #D9D9D9 1px solid;

overflow: hidden;

}

When an app is opened in the hub, I've modified the app title to be the same yellow color to denote we are in dev.  The modification was done in the client.css (C:\Program Files\Qlik\Sense\Client\assets\client\client.css) file by changing the color property for app title style:

.qui-toolbar .qv-app-info-holder .app-title {

color: #f7b100;

max-width: 100%;

font-size: 13px;

height: auto;

line-height: auto;

width: auto;

white-space: nowrap;

-webkit-text-overflow: ellipsis;

text-overflow: ellipsis;

overflow: hidden;

}

Remember to backup your modified files as they will most likely get overwritten in future Qlik Sense upgrades.  Having the backup will allow you to quickly replace the native hub.css and client.css files with your saved custom changes in the future.  Hope this helps...

Also, remember to hit Ctrl + F5 to refresh browser cache to see the updated changes.

4 Replies
wdchristensen
Contributor III

Re: How can I make Development / Test environments (QMC and HUB) look different than production?

The HUB is the more important of the two. I appreciate any and all help.

wdchristensen
Contributor III

Re: How can I make Development / Test environments (QMC and HUB) look different than production?

...

fgonzalez
New Contributor

Re: How can I make Development / Test environments (QMC and HUB) look different than production?

What I've done on our dev environment is modify the hub.css and client.css files.

On the hub.css (C:\Program Files\Qlik\Sense\Client\hub\hub.css), I made the following modification to change the hub side bar color by changing the background property.  The default value is #FFFFFF.  I replaced it with a yellowish color: #f7b100

.q-hub-sidebar {

display: -webkit-flex;

display: flex;

max-width: 200px;

background: #f7b100;

-webkit-flex: 0 0 20%;

flex: 0 0 20%;

min-width: 140px;

border-right: #D9D9D9 1px solid;

overflow: hidden;

}

When an app is opened in the hub, I've modified the app title to be the same yellow color to denote we are in dev.  The modification was done in the client.css (C:\Program Files\Qlik\Sense\Client\assets\client\client.css) file by changing the color property for app title style:

.qui-toolbar .qv-app-info-holder .app-title {

color: #f7b100;

max-width: 100%;

font-size: 13px;

height: auto;

line-height: auto;

width: auto;

white-space: nowrap;

-webkit-text-overflow: ellipsis;

text-overflow: ellipsis;

overflow: hidden;

}

Remember to backup your modified files as they will most likely get overwritten in future Qlik Sense upgrades.  Having the backup will allow you to quickly replace the native hub.css and client.css files with your saved custom changes in the future.  Hope this helps...

Also, remember to hit Ctrl + F5 to refresh browser cache to see the updated changes.

wdchristensen
Contributor III

Re: How can I make Development / Test environments (QMC and HUB) look different than production?

Hi Fausto,

Based on your reply, I created a document that illustrates how to accomplish the CSS changes step by step. The only real "GOTCHA" I came across was the Ctrl + F5 was inconsistent on the refresh in Internet Explorer but it worked great in Chrome. I appreciate you taking the time to respond to my question! Thanks

Customize Qlik Sense Development.docx