Discussion board where members can learn more about Qlik Sense App Development and Usage.
Hello,
I would like to modify the color and the Police of the header of a Filter pane. I am using the multi KPI method where I insert the code in the CSS section.
But I am having a hard time to modify the color of the header of a filter pane. I am using this code :
.qv-object-title .qvt-visualization-title
{
color: rgb(102,160,15)!important;
}
I have tried differents possibilties but It's doesn't work.
So, I am not sure it's possible to change the color of the filter pane's header.
Moreover my knowledge in web dev is very limited.
If you could help me to solve this issue it would be nice of you.
Thanks.
ps : I am using qlik sense cloud
Hi @foxwhite, if you want to use CSS you can try something like this:
.qv-object-title-text {
color: rgb(102,160,15)!important;
}
Notice that this will change the title color of all visualizations (so not only the filters' one) as the class is common to all titles. Instead, you could edit the JSON properties for the list box object in the theme.json file, using something like this:
"listBox": {
"backgroundColor": "#ffffff",
"title": {
"main": {
"color": "#000000",
"fontSize": "10px",
"fontFamily": "sans-serif"
}
},
"content": {
"color": "#000000",
"fontSize": "12px",
"fontFamily": "sans-serif"
}
}
If you want a full guide on how to develop a custom theme have a look here: Getting started building custom themes
And specifically, have a look here for the editable JSON properties (including the ones for list boxes and filter panes): Custom theme JSON properties
Hi @foxwhite, if you want to use CSS you can try something like this:
.qv-object-title-text {
color: rgb(102,160,15)!important;
}
Notice that this will change the title color of all visualizations (so not only the filters' one) as the class is common to all titles. Instead, you could edit the JSON properties for the list box object in the theme.json file, using something like this:
"listBox": {
"backgroundColor": "#ffffff",
"title": {
"main": {
"color": "#000000",
"fontSize": "10px",
"fontFamily": "sans-serif"
}
},
"content": {
"color": "#000000",
"fontSize": "12px",
"fontFamily": "sans-serif"
}
}
If you want a full guide on how to develop a custom theme have a look here: Getting started building custom themes
And specifically, have a look here for the editable JSON properties (including the ones for list boxes and filter panes): Custom theme JSON properties