Qlik Community

Qlik Sense Integration, Extensions, & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

Announcements
QlikWorld 2020: Join us May 11 - 14, 2020 in Phoenix, AZ. Register early and save $400. Learn More
Partner
Partner

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

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.

clipboard_image_2.png

 

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?

Plees ekskuse my Swenglish and or Norweglish spelling misstakes
Labels (2)
1 Solution

Accepted Solutions
Highlighted
ErikWetterberg
Honored Contributor

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

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.

View solution in original post

9 Replies
ajaykakkar93
Valued Contributor

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

Hi,

You can use  !important to style it.

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

Regards,

Ajay Kakkar

ajaykakkar93
Valued Contributor

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

Hi,

i hope it helped you.

If its correct then mark as correct.

Regards,

Ajay Kakkar

https://github.com/ajaykakkar93

Partner
Partner

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

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. 

clipboard_image_0.png

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?

Plees ekskuse my Swenglish and or Norweglish spelling misstakes
ajaykakkar93
Valued Contributor

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

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

Highlighted
ErikWetterberg
Honored Contributor

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

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.

View solution in original post

Partner
Partner

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

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

Plees ekskuse my Swenglish and or Norweglish spelling misstakes
ErikWetterberg
Honored Contributor

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

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. 

Partner
Partner

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

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.

Plees ekskuse my Swenglish and or Norweglish spelling misstakes
ErikWetterberg
Honored Contributor

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

You type it in the browser console:

clipboard_image_0.png

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

clipboard_image_1.png

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.