Customize your Qlik page css without themes – trick
—————————————————————————————
Hi! Please tell me what kind of Qlik content you think is relevant or interesting to have in the channel (use the link below). Thanks!
Link: https://approbato.com/blog/quick-qlik-survey/
—————————————————————————————
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.
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
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;}
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,
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.
Hi Guilherme,
Ok I got the point of working with limited access, so not being able to access theme!
thanks for your answer
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
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):
.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;
}