English Qlik

Customize your Qlik page css without themes – trick

Did you know you can change the css class of your page without using themes?

You just need a Multi KPI object (with a measure or dimension to “activate” it). In the Appearance section of this object you can change the css of the page elements.

You can inspect the page elements to find the classes you want to modify.

Check out an example in the video below. The css used in this video:

//Background color
.qv-panel-sheet {
background: linear-gradient(159deg, rgba(11,25,196,1) 0%, rgba(150,190,252,1) 18%, rgba(255,255,255,1) 47%, rgba(255,255,255,1) 100%) }

//Left gray bar
.qv-panel-sheet{
    background-image: linear-gradient(90deg, #E9EBEE 11.4%,  #fff 1%) !important;
}

// Filter
.qv-listbox .serverLocked, .qv-listbox .serverSelected, .qv-listbox li.selected {
    background-color: #c4bc47;
    color: #fff;
    border-bottom: 1px solid #c4bc47;}


//Bar chart
.qv-object-barchart {
border-radius: 3px;
box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.16);}

Besides the video below there is also another “version”. Click here to watch it.

7 thoughts on “Customize your Qlik page css without themes – trick

  1. Looks good, But looks like i cant do all the codes in one multi kpi ,
    Either if I use multi KPI its just over riding the first. I any way I can do all in one sheet ?

    Thanks

    1. Hello Rio! If you refer to the same object it will overwrite. You can use one multi KPI object with multiple styles, but it needs to be one for each class (of css).
      Try the example below, it is using two different classes:
      // blue gradient background
      .qv-panel-sheet {
      background: linear-gradient(159deg, rgba(11,25,196,1) 0%, rgba(150,190,252,1) 18%, rgba(255,255,255,1) 47%, rgba(255,255,255,1) 100%) }

      // yellow background in the filter
      .qv-listbox .serverLocked, .qv-listbox .serverSelected, .qv-listbox li.selected {
      background-color: #c4bc47;
      color: #fff;
      border-bottom: 1px solid #c4bc47;}

  2. Hi,
    Thanks for your video. I was just wondering, what is the point of not having a theme to customize via CSS? are there some drawbacks of using CSS directly in theme?
    Thanks for your answer,

    1. Hi Melissa, thanks for the comment!
      There are some cases in which this trick comes handy. For example: I work with a client in which I don’t have much flexibility to edit or customize things, so my permissions are limited. In this case I use the KPI to customize some points (but nothing too drastic). Maybe you need a simple background, or remove some element from a specific page, and this is easier than creating/editing a theme.

      1. Hi Guilherme,
        Ok I got the point of working with limited access, so not being able to access theme!
        thanks for your answer

  3. Hi Guilherme, I’ve been doing a lot of research and finally found your page. Well done; brilliant work and explanation.

    I have a question: would it be possible to change the font colour of an object, using this method?

    Many thanks,
    Bruna

    1. Hi Bruna, great to read that!
      I was trying to change the font color of one chart and it worked for the scatter plot, but for bar chart it didn’t.
      Check the image below and the css (I only added the color part):
      Changing css in scatter plot
      .qva-chart-data-title .qva-chart-data-title-wrapper .chart-data-title .chart-data-title-label {
      flex: 1 0 auto;
      padding-right: 0;
      padding-left: 0.1px;
      color: red;
      }

Leave a Reply

Your email address will not be published. Required fields are marked *