Skip to main content
Announcements
See what Drew Clarke has to say about the Qlik Talend Cloud launch! READ THE BLOG
cancel
Showing results for 
Search instead for 
Did you mean: 
lucasfioravanso
Contributor II
Contributor II

How to change button color of variable input object

Hi Guys. 

lucasfioravanso_0-1680874970206.png


I need to change this  dark gray color when the button is active, I've tried .qv-object-variable-input / .qv-variable-input-button in my .css theme and more, but no sucess.

Can anyone help me on this?
Thanks!!

Labels (1)
1 Solution

Accepted Solutions
sandeep-singh
Creator II
Creator II

Try this. Change the object ID through your variable input object ID or drop it if you are making updates in the theme css file.

[tid="jWZTqP"] .qv-object-qlik-variable-input button {
background : #595959!important
}

View solution in original post

4 Replies
sandeep-singh
Creator II
Creator II

Try this. Change the object ID through your variable input object ID or drop it if you are making updates in the theme css file.

[tid="jWZTqP"] .qv-object-qlik-variable-input button {
background : #595959!important
}

lucasfioravanso
Contributor II
Contributor II
Author

Thanks man!!

Talia_G
Contributor
Contributor

Hello ,

I'm trying this code in CSS:

.qv-object-qlik-variable-input button {

background: red !important;
}

but it changes the background color of all the buttons to red, not only the active one as I would like to. 

Talia_G_0-1689496628317.png

Could you help me with what I'm doing wrong please? 

Thanks!! 

davinci
Contributor
Contributor

Hi @Talia_G ,

This is possible for a "bootstrap" style of a button.

In Developer options (in URL add '/options/developer', then right click on your Variable Input object and select  Developer), in Properties, you can change the "style": "qlik" to "style": "bootstrap".

Then via CSS you are able to modify the button, such as:

.qv-object-qlik-variable-input .bootstrap button.selected {

    background-color: #009845 !important;

}

and

.qv-object-qlik-variable-input .bootstrap button {

    border: 1px solid;

background: white;

padding: 3px 12px;

}

For some outdated documentation, you can check out GitHub - erikwett/qsVariable: Variable extension for Qlik Sense.

Haven't found a way to modify the "qlik" style.  Hope at least this helps!