Apply Custom Themes in Qlik Sense Cloud Business

[Anonymous]

This month, we’re excited to announce a new customization feature for Qlik Sense Cloud Business users! You can now upload your own custom themes to your Qlik Sense Cloud Business workspace, and create and publish apps that reflect your own specific style requirements. For example, you can now apply a preferred color palette or your brand guidelines to apps.

To create your own custom theme, you’ll need to compile a compressed zip folder with three key components:

• A definition (QEXT) file
• A main JSON file
• Any additional assets that support the theme as needed (i.e. CSS files)

Once you’ve created the folder, you can upload it to the new Themes section in the settings area of Qlik Sense Cloud Business. Once uploaded, the theme will then appear in the App Theme drop-down in the App Options menu. Don’t forget, you can also reference this list to apply any of the default themes available to all Qlik Sense Cloud users – Sense Classic, Sense Breeze, and Sense Focus.

Curious about what Google and Super Mario themes look like in Qlik Sense? Watch the video below to see how Mike Tarallo uses those examples to highlight everything you need to know to set up custom themes.

We’ve attached the Google theme files Mike uses in his demonstration to this blog so that you can try uploading custom themes on your own.

Finally, check out some of the great resources below – including our online help documentation and other Qlik Community blogs – for more details on how to create custom themes.

• Custom Themes – Online Help
• Design Blog – Arturo Munoz
• Bitmetric Theme Editor – (Qlik Partner resource)
• Online JSON Validator
  
• CSS Class Try It Editor‌

Can't see the video? YouTube blocked by your region or organization? Download the .mp4 attached to watch on your computer or mobile device.

myfont-theme.zip

google-theme.zip

[phaneendra_kunc]

Hi Mike,

Thanks for sharing the video. Is there a way to change the Font Type in themes?

Ex: Arial --> Calibri

Thanks,

Phanee

[Michael_Tarallo]

Hi Phaneendra - thanks for the question - yes - I do not believe there is a specific font-family used in the theme.json - BUT you can reference your own custom .css file and specify it in there. I added another attachment to this post - using a .css file - myfont-theme.zip.

Such as:

theme.json

{..

..

"customStyles": [{

  "cssRef": "theme.css",

  "classRef": "my-font"

}]

.

.

..

}

theme.css

.my-font

{

   font-family: "Times New Roman", Times, serif;

}

This seemed to change some of the font family used in the browser - but I see the chart objects theme is being maintained - I will find out more and post an update.

HTH

Regards,

Mike T
Qlik

[Michael_Tarallo]

I got it!

You would add something like this in the .css file:

.qv-object .qv-object-title .qv-object-title-text {

    -webkit-text-overflow: ellipsis;

    text-overflow: ellipsis;

    overflow: hidden;

    white-space: nowrap;

    font-family: "Times New Roman", Times, serif !important;

}

Using developer tools in the browser I can sniff our the style class for anything - and change it in my theme.css - using !important makes sure that it respects this theme style and does not inherit any other.

[barryharmsen]

Thanks for the mention Mike! https://sensetheme.com should now work with Qlik Sense Cloud Business as well.

[Michael_Tarallo]

Hi Barry - what an awesome tool - yes I verified as well - themes created with https://sensetheme.com - are now working on Qlik Sense Cloud. Thanks to the cloud team for fixing it quickly and supporting our valued partner Bitmetric's efforts. Also note for others reading this reply, that I added an attachment to this blog that provides a theme example that uses a separate .css file.

[phaneendra_kunc]

This is very helpful Mike. You always make complicated things waaaaaaaaay simpler......

I was able to implement the custom fonts in my app.

Thanks,

Phanee

[sapiradmin]

Hi,

I follow all instructions here and created the zip file, but I keep receiving an error when I'm trying to upload the zip file to our Qlik Sense Cloud Business . I also tried to upload the google-theme.zip provided here and keep receiving the same error.

I checked it first on Qlik Sense Desktop and it works.

please help.

Regards,

M.A.

[Michael_Tarallo]

Thank you 🙂 - I just saw this comment!!

[Andrei_G]

I don't see the theme tab at all.

 

So I can't even test the theme I created.