topic Re: Changing color of variable input chart in Qlik Cloud in Integration, Extension & APIs

Changing color of variable input chart in Qlik Cloud

AnujKheria — Fri, 03 Jan 2025 12:41:24 GMT

Hello Experts,

I am looking to change the color of variable input box in qlik cloud can some one help me with this, is there a way to apply custom backgroud color to it in my qlik cloud application.

Thanks

Re: Changing color of variable input chart in Qlik Cloud

David_Friend — Fri, 03 Jan 2025 13:42:33 GMT

can you share a screenshot to illustrate?

Re: Changing color of variable input chart in Qlik Cloud

Daniel_Pilla — Fri, 03 Jan 2025 14:20:50 GMT

The variable input extension object now supports custom background colors OOTB under Presentation -> Styling. If you are looking to change the color/border of the input box itself, you can use CSS to achieve this:

.qv-object-qlik-variable-input .lui-input { background-color: #000000 !important; border: 1px solid #1b1b1b !important; }

This can be applied in a custom theme or inside of a Multi KPI object which has the ability to add custom CSS. I have seen people use this object to directly effect the CSS on a single sheet and then hiding the Multi KPI object itself with, potentially layered inside of a layout container so it takes up zero space on the grid:

.qv-object-qlik-multi-kpi { display: none !important; }

Do note that none of this is supported. I would suggest posting to ideation for more OOTB customization of this object if that is what you are seeking.

I hope this helps!

Re: Changing color of variable input chart in Qlik Cloud

AnujKheria — Wed, 08 Jan 2025 05:57:33 GMT

Hello Daniel, yes, this worked! Thanks for the solution. I used the Multi KPI and hid it, just as you suggested. Now, all the button colors have changed. My final question is: how can I select a specific object by its ID to change only its color?

Re: Changing color of variable input chart in Qlik Cloud

ambers — Thu, 05 Jun 2025 14:47:01 GMT

Hooray! I finally managed to get the variable input boxes to look like this. Not with the .lui-input but with .lui-active