Changing borders color in theme

[atafsson]

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! 

[kamalqlik]

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

[atafsson]

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). 

[rbartley]

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).

[atafsson]

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 😞

[rbartley]

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 

[rbartley]

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

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

[rbartley · Accepted solution]

[rbartley · Accepted solution]

This worked for me

li {
    border-color: black!Important;
}

[Levente]

Hi,

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

Is there any permanent solution?

Thanks,

Levente