Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 
jenriquez
Contributor III
Contributor III

Changing the colors of the states in filter pane and changing the background color of "x" and "✓"

Is it possible to change the color states of filter pane or list box. I want to change the color of selected from green to blue and the color of selected text from black to white also the background color of "x" and "✓" button.  Is this read from a JSON file perhaps?  I could not find one and I have some requirements regarding how the filter pane should look.

I hope it is configurable!

Thanks.

jenriquez_0-1602856999721.png

 

Labels (2)
1 Solution

Accepted Solutions
ArnadoSandoval
Specialist II
Specialist II

Hi @jenriquez 

I played with the QlikSense's Theme feature on SelectPane, getting pretty close to resolving your requirements,  I did not change the background color of the X because you did not describe the required color; the attached Theme Zip file is for SelectPane, you install it with the same procedure to install extensions.

Follow these screen-shots to apply the theme-Filter template:

Theme-Select-Pane-03.png

Theme-Select-Pane-04.png

The themeFilter theme define some attributes on the pane's title, sub-title and footnote, I left there as a guide for you.

Theme-Select-Pane-01.png

Theme-Select-Pane-02.png

Arnaldo Sandoval
A journey of a thousand miles begins with a single step.

View solution in original post

11 Replies
dplr-rn
Partner - Master III
Partner - Master III

i dont believe thats possible.

ArnadoSandoval
Specialist II
Specialist II

Hi @jenriquez 

Qlik has a Custom Theme feature, I haven't try them myself, this topic was written in 2018 about how to do it: How to create a custom theme in Qlik Sense it contains an example.

Good Luck

Arnaldo Sandoval
A journey of a thousand miles begins with a single step.
ArnadoSandoval
Specialist II
Specialist II

@jenriquez 

I found a video and a web page with more information about Custom Themes.

hth

Arnaldo Sandoval
A journey of a thousand miles begins with a single step.
ArnadoSandoval
Specialist II
Specialist II

Hi @jenriquez 

I played with the QlikSense's Theme feature on SelectPane, getting pretty close to resolving your requirements,  I did not change the background color of the X because you did not describe the required color; the attached Theme Zip file is for SelectPane, you install it with the same procedure to install extensions.

Follow these screen-shots to apply the theme-Filter template:

Theme-Select-Pane-03.png

Theme-Select-Pane-04.png

The themeFilter theme define some attributes on the pane's title, sub-title and footnote, I left there as a guide for you.

Theme-Select-Pane-01.png

Theme-Select-Pane-02.png

Arnaldo Sandoval
A journey of a thousand miles begins with a single step.
Gui_Approbato
Creator III
Creator III

Hello,

There is an alternative to themes (not the best practice, but it works well).

I made a video about that, hope it helps: https://youtu.be/OeeEUTCFGIk

Styling Qlik.png

Best regards,

jenriquez
Contributor III
Contributor III
Author

its a huge help. Thank you so much.

But I have still one question I cant find what class can I use to configure the "x" button on filter pane? TIA.

ArnadoSandoval
Specialist II
Specialist II

@jenriquez 

It is done by the dense.css; You should find my comments starting on line 22;  I used Chrome's Developer Tools (F12) to find those elements.

Which color do you want to use for the "x" button?

Arnaldo Sandoval
A journey of a thousand miles begins with a single step.
jenriquez
Contributor III
Contributor III
Author

@ArnadoSandoval  yup, I already find the class for the "x" button, btw I want to use a #ed174f. I'm already using the qlik sense desktop that's why I cant find those elements. But I configure the "x" button using this class "qv-client.qv-dense button.sel-toolbar-btn.ng-scope.sel-toolbar-cancel". Thank you so much. its a big help for my requirements .

ArnadoSandoval
Specialist II
Specialist II

Hi @jenriquez 

Keep in mind that your can start the QS Hub off the QlikSense Desktop with localhost:4848/hub then you can open-debug the Theme with your workstation browser's Developer Tools !!!!

Arnaldo Sandoval
A journey of a thousand miles begins with a single step.