Qlik Community

Qlik Sense Documents & Videos

Documents & videos about Qlik Sense.

Announcements
Qlik Analytics Tour 2020 Online. Begins August 10th. Register Today

More Qlik Sense Themes (updated with 3.2)

Employee
Employee

More Qlik Sense Themes (updated with 3.2)

I uploaded a new version "highvis32.zip" compatible for Sense 3.2


Although Qlik Sense themes are not officially documented yet, they can be changed. A theme consists of one or two .css files and a .json file.


On Sense Server themes are found here

  • C:\Program Files\Qlik\Sense\Client\themes

On Sense Dekstop (>= 2.2 and <=3.1) themes are found here

  • C:\Users\<your_user_id>\AppData\Local\Programs\Qlik\Sense\Client\themes

Earlier versions of Sense Desktop (<2.2) didn't expose the theme files under \AppData\..., they were a hardcoded reply from QlikSenseBrowser.exe.

On Sense >= 3.1.2 and >=3.2 the themes folders are

  • server environment: C:\Program Files\Qlik\Sense\Client\themes\old
  • desktop environment: C:\Users\<your_user_id>\AppData\Local\Programs\Qlik\Sense\Client\themes\old


Hint: Hit [Windows]+ keys and paste this to open the folder: %USERPROFILE%\AppData\Local\Programs\Qlik\Sense\Client\themes


HighVis Theme (as an example)

Screenshot 2015-11-07 10.09.07.png

The highvis theme is not perfect, there are chart types and sub-pages (like the filters and search) which will not look very nice. See this as a starting point and use Browser inspection to understand where different styling information is coming from. Then make your own enhancements to the .css. For example filter panes with their green/white/grey shading dont fit well to a dark theme.

Download the attached highvis2.zip file (for Sense versions 2.2 - 3.x) and put it in the appropriate folder (either the one for Server or for Desktop).

  • Keep the subfolder structure (the 2 files within the "highvis2" folder).
  • The subfolder name matches the theme name, under which you later call it via the URL

Screenshot 2016-08-19 15.44.40.png


How to call a theme (other than the default)

Go to the hub and add add "/theme/highvis2" to the url. This means, any app you will open will use that theme from now on. Note that the parameters "/theme/highvis2" are sticky to any page you navigate to.

Example:

http://localhost:4848/hub/theme/highvis2

http://localhost:4848/sense/app/Helpdesk%20Management.qvf/sheet/1ff88551-9c4d-41e0-b790-37f4c11d3df8...

Qlik Sense Desktop users: There is no way to choose a custom theme in Qlik Sense Dekstop (since the URL is not editible). The only ones Switch to the browser instead.

How to change the default theme (not recommended)

The default themes are found in the same folders as above in the subfolder "sense". If you modify those all the standard colors/fonts graph width may be changed or even messed up. In the newer versions, where there is another folder structure with "old" and "modern" on the folder level of "themes", the default setting can only be changed by modifying both "themes\modern\sense" and "themes\old\sense" 

However, themes are cached from both sides the (browser) clients and even from the Sense webserver, so you will never see the change instantly, may have to restart QS Desktop or QS Server.

A trick to test changes instantly is to rename the theme subfolder all times after a change ... like "highvis2" "highvis3" "highvis4" ... and call it from an app making the same change in the url ( .... /theme/highvis3 ...)

Attachments
Comments
Employee
Employee

Check out the latest version of highvis (highvis32.zip). It is fixed for 3.2 now ... +

Those who searched for it, this was missing from the theme.css:

file.qv-object {   

     background-color: #333333;   

     color: #E6E6E6;

}

Thank you, Tobi

Partner
Partner

Hello Christof

Thank you very much. It works now very well on a browser, but it has never worked on QS desktop even through I changed the folder name and restarted the QS desktop. Any ideas what could be wrong?

Are there any other themes that work fine on QS 3.2? None of them from the old folder work.

Employee
Employee

You cannot change to a custom theme in Qlik Sense Desktop. You would have to replace the default styles with a custom style, but then again this is true for all apps you would open in Sense Desktop, not for one app.The only proper way to choose a theme is via the url in a browser.


btw, there is one more theme that seems to work out of the box (installation of QS 3.2) and that is "/theme/bleak" ... nice one

screenshot.2017-03-29 (10).jpg

Partner
Partner

Hello

I am using HighVis theme. How would it be possible to change to white color values on charts?

values.JPG

I was able to change the background color through CSS file, but then I try to change in JSON  to white color nothing happens.

Does anybody can help me with this?

The strange part is that values are shown in white in Internet Explorer, but not in Google Chrome.

@csw_qlik

@tsm

0 Likes
Partner
Partner

Hey Tobias,

I just upgraded our environment to the latest QS 3.2.3

I've took a deep look at the monitoring apps, they look amazing with the theme Sense Focus.

So, I was wondering... Have I missed something and themes are supported now or we are still "on our own" from this point of view?

Many thanks

0 Likes
Explorer
Explorer

Hey,

Still on your own I'm afraid. Sense focus was previously known as Standard (I think). It's the same one as before where the objects on the sheet are more separated.

0 Likes
Partner
Partner

Where did you get Sense Focus from? I can just see SENSE in Modern folder. Unfortunately it does not change anything then I call the theme through Firefox.

As longer I work with QS as more the product looks immatured.

0 Likes
Partner
Partner

Dear Nathaniel, dear all,

Did someone manage to change the fontfamily to Arial (or any other font)?

thanks in advance for your help!

regards,

0 Likes
Partner
Partner

I could change the font editing the client.css file and the qlik-styles.css !!!

0 Likes
Contributor
Contributor

Hi  Christof,

I was trying to change the theme of my app to highvis32 and i successfully changed it to highviz32.

but the problem is my tooltip backgroud colour is show as black unlike white as yours.

Capture.PNG

As u suggested i have changed the tolltip colour in the css file but it is not reflecting .

can u please let me know what need to be done to achive this .

Thanks

0 Likes
Version history
Revision #:
1 of 1
Last update:
‎2015-11-07 04:13 AM
Updated by: