Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 
Huberto
Creator
Creator

How to change the toolbar/header background color of an application

Dear Qlikers,

I have a Qlik Sense Dev server where I need to make QMC, HUB, and applications visually different from the production environment.
After reading some posts in the Qlik Community I managed to change the QMC and HUB toolbar/header background color as attached, what is enough. However, I wasn’t able to find the right file and attribute to change the application toolbar/header background color.


Could someone guide on how to change the application toolbar/header background color?
Which file and attribute must be changed?

Thanks in advance.

Best regards,

Huberto Pereira Haidemann

Customized QMC.pngCustomized HUB.PNGApplication toolbar.PNG

Labels (4)
11 Replies
ajaykakkar93
Specialist III
Specialist III

Hi, If you are inside a application i can help you with that using THEME.API Regards, Ajay Kakkar

Please mark the correct replies as Solution. Regards, ARK
Profile| GitHub|YouTube|Extension|Mashup|Qlik API|Qlik NPrinting

Huberto
Creator
Creator
Author

Hi Ajay,

Thank you, but it is not about the application theme is for the HUB. The application remains the same in dev and prod, but when the app is in the dev environment, the header is orange.

Regards,

Huberto Pereira Haidemann

ctroff
Contributor
Contributor

Hi

 I have managed to change the color of the toolbar in QMC but not in Hub.
How did you do?
Thanks for any help!

Best regards Carl

Huberto
Creator
Creator
Author

Hi @ctroff,

Maybe my post can be of some help. Please, take a look at it.

Differentiating Prod and Dev Environments (Changing the QMC and HUB header color) 

Best regards,

Huberto Pereira Haidemann

ctroff
Contributor
Contributor

It was a great instruction!
Many thanks Huberto!

Best regards Carl

dvdbly01
Contributor II
Contributor II

Hi Huberto,

I think you need to add ";background-color:#FB1235" to

.qs-toolbar{height:41px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(0,0,0,.2);background-color:#FB1235}

in this file :

c:\Program Files\Qlik\Sense\Client\setup-view.89f94875b4b010b2b634.css

 

Regards,

David Billey

Huberto
Creator
Creator
Author

Thanks for your tip, @dvdbly01

What is this file (setup-view.89f94875b4b010b2b634.css)?

What exactly does it control?

Regards,

Huberto Pereira Haidemann 

dvdbly01
Contributor II
Contributor II

Hi @Huberto,

It seems to control the generic aspect of applications.
I am not sure the UID is always the same, although it is on both our development and production servers.

However, it is easy to identify the right files since, as far as I know, there is only one "setup-view.*.css"

All web browsers won't respond identically, but all in all, the above bar of the apps will be colored.

Besides, please note that most probably, you will have to reinstate the modification upon upgrade.

Regards,

David BILLEY

ajaykakkar93
Specialist III
Specialist III

Hi @Huberto ,

you can go to html & add the style tag <style>.....

Path : C:\Users\ajay.kakkar\AppData\Local\Programs\Qlik\Sense\Client\hub.html

to change the color to your preference 
.qs-toolbar{background-color:orange !important;}


make sure you restart you server to apply changes

thank you

Please mark the correct replies as Solution. Regards, ARK
Profile| GitHub|YouTube|Extension|Mashup|Qlik API|Qlik NPrinting