Qlik Community

App Development

Discussion board where members can learn more about Qlik Sense App Development and Usage.

Announcements
Coming Aug. 9: New Simplified Authoring for Qlik Sense SaaS – For Details, CLICK HERE
cancel
Showing results for 
Search instead for 
Did you mean: 
foxwhite
Contributor II
Contributor II

Modify color and style CSS of header filter pane

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. 

 

foxwhite_1-1651933487988.png

 

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

Labels (1)
1 Solution

Accepted Solutions
Andrea_Spinetti
Creator III
Creator III

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




 

If the issue is solved please mark the answer with Accept as Solution.

View solution in original post

1 Reply
Andrea_Spinetti
Creator III
Creator III

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




 

If the issue is solved please mark the answer with Accept as Solution.