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
Partner
Partner

Hi everyone,

Has anyone tried to use themes in a QAP? I modified the default theme sense in both the modern and old folders and I can't see any changes (i restarted the server already)!

Any tips?

regards, Emma

0 Likes
Creator III
Creator III

I am facing the same issue. Were you able to change the background color of the tooltip?

0 Likes
Specialist
Specialist

Is there any news on when themes are going to be formally supported (preferably with a editing tool). I am getting pressure from my users to implement corporate colours but i am not able to support them.

0 Likes
Contributor
Contributor

Hi karthik,

Try changing the color in css file.and if u are using chrome try deleting the history and use highviz32.

It worked for me.

0 Likes
Creator III
Creator III

Hi sandeep,

                    Yes. This worked for me in css file

.qvt-visualization {

  background-color: #176823;

}

0 Likes
Contributor II
Contributor II

I cannot get for the life of me get the background color on chart objects to be transparent in the September 2017 Patch 1 release.  I've tried in mashups and in themes.

Tried adding:

.qvobject{

  overflow: visible;

  background-color: rgba(255, 0, 0, 0);

}

or

file..qv-object{

  overflow: visible;

  background-color: rgba(255, 0, 0, 0);

}

or

file.qvobject{

  overflow: visible;

  background-color: rgba(255, 0, 0, 0);

}

To the theme, but the background of the charts is always white.  Any ideas?

0 Likes
Creator III
Creator III

Try  like this

.qvt-visualization {

  background-color: #107223 !important;

  font-family: "Tahoma" !important;

}

0 Likes
Specialist
Specialist

Updated QS extension object for new versions

http://branch.qlik.com/#!/project/5a4498ea2b249b645b071e16

0 Likes
Partner
Partner

Hey ajay

Thanks for sharing. Could you please tell us how it should be installed?

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