Skip to main content
Announcements
NEW: Seamless Public Data Sharing with Qlik's New Anonymous Access Capability: TELL ME MORE!
cancel
Showing results for 
Search instead for 
Did you mean: 
ift_isabelle
Partner - Creator III
Partner - Creator III

Change Color QMC Topbar

Hi,

I want to change the color of the topbar of the QMC so i can distinguish my Test and Production environment.
I found the location of the CSS file for the QMC (..\Qlik\Sense\Client\qmc.css), but does anyone has any idea which element I have to change to turn it red?

Thanks in advance,
Kind Regards,
Isabelle

Bar QMC.JPG

Labels (3)
1 Solution

Accepted Solutions
EliGohar
Partner - Creator III
Partner - Creator III

Hi @ift_isabelle ,

You correct about the qmc.css file location.

Open it and find this definition (qmc-toolbar element)

qmc-toolbar {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-flex: none;
  -moz-box-flex: none;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  padding: 6px 10px;
  background-color: #8C8C8C;
}

Simply change the background-color property to:

background-color: red;

Result:

image.png

View solution in original post

2 Replies
EliGohar
Partner - Creator III
Partner - Creator III

Hi @ift_isabelle ,

You correct about the qmc.css file location.

Open it and find this definition (qmc-toolbar element)

qmc-toolbar {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  -webkit-box-orient: horizontal;
  -moz-box-orient: horizontal;
  -webkit-flex-direction: row;
  -ms-flex-direction: row;
  flex-direction: row;
  -webkit-box-flex: none;
  -moz-box-flex: none;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
  padding: 6px 10px;
  background-color: #8C8C8C;
}

Simply change the background-color property to:

background-color: red;

Result:

image.png

ift_isabelle
Partner - Creator III
Partner - Creator III
Author

Works perfect! Thanks!