topic Re: Changing borders color in theme in App Development

Changing borders color in theme

atafsson — Sat, 16 Nov 2024 06:53:49 GMT

Hi,

I'm building a "focus" theme with a dark background.

For some reason listboxes and tabled add some white (or light gray?) lines between data values and columns.

Have tried to find the setting for this, but I can't find it. I'd like to make the change globally, so I don't need to change it for each chart object type.

Anyone able to assist on this?

Thanks!

Re: Changing borders color in theme

kamalqlik — Wed, 09 Jan 2019 11:04:07 GMT

Hi Atafsson,

I don't think it is possible in Qlik Sense directly. Only way you can change it using Mashup and change in HTPL Code.

Regards

Kamal

Re: Changing borders color in theme

atafsson — Wed, 09 Jan 2019 12:19:48 GMT

Yes it is possible. I manage to change it with this code for listboxes:

.qv-listbox li.serverSelected {
    border-color: black;
}

But that only includes listboxes when values are selected. I know how to do for all states of listboxes, but I need to do the same for tables (pivot and normal tables).

Re: Changing borders color in theme

rbartley — Wed, 09 Jan 2019 12:25:10 GMT

I tried to add this block to the theme.json file:

"listBox": {
		  "title": {
			"main": {
			  "color": "@TextColor",
			  "fontSize": "@TextSize"
			}
		  },
		  "content": {
			"color": "#ff007f",
			"fontSize": "@TextSize",
			"borderColor": "#ff007f"
		  }
	}

While it changed the font colour, the borderColor setting was ignored, so perhaps this isn't part of the theme api.

I suppose you could add a generic style to your css file

td {

border-color: black!Important;

}

but that will be applied to all cells on your page(s).

Re: Changing borders color in theme

atafsson — Wed, 09 Jan 2019 12:51:54 GMT

That seems to solve it for tables, but not for listboxes.
I've managed to remove the lines from listboxes if some selections are made somewhere.. but if no selections/filter are applied the lines are still there for listboxes 😞

Re: Changing borders color in theme

rbartley — Wed, 09 Jan 2019 12:54:29 GMT

Have you tried?:

.qv-listbox li {
    border-color: black!Important;
}

If it works, try it without the

!Important

and look in the developer console to see where it is being overwritten

Re: Changing borders color in theme

rbartley — Wed, 09 Jan 2019 12:55:56 GMT

In fact, you could try this in the first instance and then experiment with .qv-listbox li

.qv-listbox {
    border-color: black!Important;
}

Re: Changing borders color in theme

rbartley — Wed, 09 Jan 2019 13:01:45 GMT

Re: Changing borders color in theme

rbartley — Wed, 09 Jan 2019 14:18:55 GMT

This worked for me

li {
    border-color: black!Important;
}

Re: Changing borders color in theme

Levente — Thu, 28 Feb 2019 16:01:40 GMT

Hi,

I could change too, but disappeared right after refreshing / reloading the app...

Is there any permanent solution?

Thanks,

Levente

Re: Changing borders color in theme

atafsson — Thu, 28 Feb 2019 16:04:26 GMT

You need to change in the code, not jus tin the browser.

Create your own theme and add it to the .css file

Re: Changing borders color in theme

Levente — Thu, 28 Feb 2019 16:09:31 GMT

Hi,

What user level is expected to be able to create such themes and where?

Do you have any idea why should it be so complicated?

I wish I could define colors separately for each borders in my app based on certain values (ie. met KPI, did not meet KPI)

Thanks,

Levente

Re: Changing borders color in theme

atafsson — Thu, 28 Feb 2019 16:32:10 GMT

If you have some knowledge about html and CSS it's fairly simple. The hard thing is to find what all settings are called.

Yeah, that's a question for Qlik I guess. We are many that request more flexibility in the Sense app UI.

Re: Changing borders color in theme

dana18 — Wed, 03 Apr 2019 07:46:25 GMT

when I should this text? in some extension?

Re: Changing borders color in theme

atafsson — Wed, 03 Apr 2019 07:55:37 GMT

I used it when creating a custom theme. It might be useful when developing extensions as well since it is about changing the design for an object in the UI.