Qlik Community

Qlik Product Innovation Blog

Learn about what's new across all of the products in our growing Qlik product portfolio.

qliksense_cloud
Contributor

Apply Custom Themes in Qlik Sense Cloud Business

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.

AddTheme.gif

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.


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

8 Comments
phaneendra_kunc
Valued Contributor III

Hi Mike,

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

Ex: Arial --> Calibri

Thanks,

Phanee

0 Likes
22 Views
Employee
Employee

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;

}

5-22-2018 3-09-57 PM.png

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

0 Likes
22 Views
Employee
Employee

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.

5-22-2018 3-31-04 PM.png

5-22-2018 3-27-34 PM.png

0 Likes
22 Views
barryharmsen
Contributor II

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

22 Views
Employee
Employee

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.

22 Views
phaneendra_kunc
Valued Contributor III

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

22 Views
sapiradmin
New Contributor

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.

errorJPG.JPG

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


please help.

Regards,

M.A.

0 Likes
22 Views
Employee
Employee

Thank you :-) - I just saw this comment!!

0 Likes
22 Views