Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 
wdchristensen
Specialist
Specialist

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
Contributor
Contributor

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.

View solution in original post

4 Replies
wdchristensen
Specialist
Specialist
Author

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

wdchristensen
Specialist
Specialist
Author

...

fgonzalez
Contributor
Contributor

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
Specialist
Specialist
Author

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