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.

2 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;}

Leave a Reply

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