topic Re: Custom theme - understanding .qv-object :not([font-family]) in Integration, Extension & APIs

Custom theme - understanding .qv-object :not([font-family])

Vegar — Sat, 16 Nov 2024 19:56:27 GMT

I've created a custom theme that is behaving differently in Qlik Sense April 2019 and Qlik Sense September 2019.

I've defined a font-family in my custom css file where qv-object * should have a font different from the default QlikView Sans. This rendered ok in Qlik Sense April 2019, but on my new Septemer 2019 version the font is overrided back to QlikView Sans due to the formatting set by Qlik. See screenshot of KPI and the dev tool showing which styling is the active for the element. If I uncheck the top styling element it fetches my custom style.

My questions are.

What does the :not([font-family]) do? I assumed that the font family should not be set in this css section.

How do I get my custom css .qv-object to override the Qlik default css?

Re: Custom theme - understanding .qv-object :not([font-family])

ajaykakkar93 — Tue, 08 Oct 2019 14:16:30 GMT

Hi,

You can use !important to style it.

.qv-object * { font-family: Montserrat, Arial, sans-serif !important; }

Regards,

Ajay Kakkar

Re: Custom theme - understanding .qv-object :not([font-family])

ajaykakkar93 — Wed, 09 Oct 2019 07:23:45 GMT

Hi,

i hope it helped you.

If its correct then mark as correct.

Regards,

Ajay Kakkar

https://github.com/ajaykakkar93

Re: Custom theme - understanding .qv-object :not([font-family])

Vegar — Wed, 09 Oct 2019 07:38:11 GMT

Your suggestion did work, but it messes up stuff further down the road. Using !Important on .qv-object overrides any styling on more detailed classes such as .qv-object-title-text. See picture below.

I can get around this by applying Important! on the .qv-object-title-text styling as well. If I want even more detailed styling then this Important! will override as well, it made me think that I should put Important! on all my css styling. Is this an good idea?

Re: Custom theme - understanding .qv-object :not([font-family])

ajaykakkar93 — Wed, 09 Oct 2019 09:08:45 GMT

Hi,

lets take a simple example of a class i.e. .m-1-10, this class style

.m-1-10{

margin-left:10px;

}

if i make a custom theme & add it after my default style it will automatically take the latest style added by custom theme

(Don't need to add !important)

.m-1-10{

margin-left:20px;

}

You can use my Mashup to style the basic stuff

Qlik Sense Styler Mashup

Regards,

Ajay Kakkar

Re: Custom theme - understanding .qv-object :not([font-family])

ErikWetterberg — Wed, 09 Oct 2019 09:18:51 GMT

Hi,

The :not([font-family]) selector would select all elements that do not have the font-family attribute. That would mean almost all elements, but it looks like map object can have elements where this attribute is defined.

Your problem is probably because the selector '.qv-object :not([font-family])' has higher specificity than your selector '.qv-object *' and so overrides it. You could trye changing your selector to be the same, '.qv-object :not([font-family])' .

I haven't tested this myself, so it might not work.

Re: Custom theme - understanding .qv-object :not([font-family])

Vegar — Wed, 09 Oct 2019 09:55:45 GMT

Thanks for the replies.

As you where pointing out @ajaykakkar93 , the latest style added is fetched by the browser. By adding a .qv-object *{} or .qv-object {} in my custom theme I thought I did add a new styling definition that should override the defaut style. It did not. But following your directions @ErikWetterberg, adding an identical class identifier .qv-object :not([font-family]){} Qlik Sense / the browser intepret my styling as I would like it to do.

Your inputs really helped me.

-Vegar

Re: Custom theme - understanding .qv-object :not([font-family])

ErikWetterberg — Wed, 09 Oct 2019 10:01:11 GMT

Glad it helped you! Of course it will not work for elements with the font-family attribute. You can find such elements by typing the following in the browser console:

document.querySelectorAll('[font-family]')

When I did this I found some elements in a map where font-family was actually set, to 'Qlikview Sans'. Your styling would not affect those.

Re: Custom theme - understanding .qv-object :not([font-family])

Vegar — Wed, 09 Oct 2019 11:05:56 GMT

Your tip on using the query document.querySelectorAll('[font-family]') sound like a very handy feature to know, but I couldn't get it to return any result. I'm most likely typing it in the wrong input box.

It would really help me if you could share a picture of your browser console with the query and its result.

Re: Custom theme - understanding .qv-object :not([font-family])

ErikWetterberg — Wed, 09 Oct 2019 11:58:20 GMT

You type it in the browser console:

In most cases you will get an empty NodeList array like above, but in some pages you get an array with entries:

I now realize that it was not a map, but a barchart and it looks like SVG elements, so I guess this is something with the new barchart.

Re: Custom theme - understanding .qv-object :not([font-family])

Armand_van_Amersfoort — Sun, 10 Nov 2019 16:18:52 GMT

When you change the class ".qv-object :not([font-family])" in your theme.css it will damage all Lui style font that shows icons like "search", "glasses" in your default Qlik Sense App

Re: Custom theme - understanding .qv-object :not([font-family])

imtiaz_ullah — Wed, 13 Nov 2019 16:27:03 GMT

Yes this is exactly what happens - now all LUI icons don't work - is there a solution to this?

Re: Custom theme - understanding .qv-object :not([font-family])

Vegar — Wed, 13 Nov 2019 20:19:46 GMT

My workaround was to add the following to my css

.qv-object .lui-caret, .qv-object .lui-checkbox__check, .qv-object .lui-icon { font-family: LUI icons; }

Re: Custom theme - understanding .qv-object :not([font-family])

imtiaz_ullah — Thu, 28 Nov 2019 09:48:35 GMT

Thanks, that almost works - still a few missing, but I'll figure those out. Thanks

Re: Custom theme - understanding .qv-object :not([font-family])

Akshaya45 — Wed, 08 Apr 2020 09:36:57 GMT

This is not working for me. All the LUI Icons are appearing Text. Is there any other way to fix this problem please comment. really it will help me.

Thank you

Re: Custom theme - understanding .qv-object :not([font-family])

imtiaz_ullah — Wed, 08 Apr 2020 09:44:07 GMT

It stopped working for me on the last release. It’s not great from Qlik and their support for this is awful. Most of my dashboards are now broken.

Re: Custom theme - understanding .qv-object :not([font-family])

ErikWetterberg — Wed, 08 Apr 2020 09:57:04 GMT

Try with the selector:

.qv-object :not([font-family]) :not(.lui-icon) {

//your styling here

}

Re: Custom theme - understanding .qv-object :not([font-family])

Akshaya45 — Wed, 08 Apr 2020 10:47:30 GMT

This is not existing a class name in the Developer Tool. I tried this earlier.

Thank you for commenting.