article Dashboard Design - QS CSS MasterClass (video) in Member Articles

Dashboard Design - QS CSS MasterClass (video)

Dennis_Jaskowiak — Thu, 27 Mar 2025 15:10:16 GMT

Welcome to the QS CSS MasterClass.

‼️Since the article was written a lot of features and settings have been added to Qlik Analytics. For most users it's better to use native functions, easier to apply and doesn't require any effort to maintain. Here's a list of common CSS mods and their new setting counter part.

https://community.qlik.com/t5/App-Development/Obsolete-CSS-modifications/td-p/2511714

FYI, the Multi KPI object which can be used to inject CSS will retired in a not too distant future. ‼️

Motivation:

In my career as a PreSales, I need to create quite a few "user-appealing-applications". Sometimes users request a specific design or specific functions I need to implement in Qlik Sense. As we all know, Qlik Sense is built for simplicity & self-service and sometimes it could be challenging to achieve the desired result. But through the last couple of years, there were a lot of tips and tricks around using CSS to create completely new designs and functions to implement a better information design concept.

This is where the MasterClass starts. I have created an application that gathers a couple of these tricks and explains them more in detail. In addition to that, it is very easy to understand because you can see the result directly within a Qlik Sense App. If you think this sounds interesting, take a couple of minutes and join my short tour through the app. I won't cover all aspects in detail. This tour will give you an overview of the documented and used tricks within the app.

Content:

The following list will give you a brief overview of what topics are focused on the specific sheet within the app.

Sheet	Description
Types of CSS implementation	You can add CSS definitions to your app by using themes or by using so-called "helper- objects". On this sheet, I will explain when you should use which option.
Hide (Helper-) Objects	A "helper-object" carries and injects the CSS definition on a specific sheet. This sheet helps you to hide this object and which objects can be used for it.
Colored Area Background	This example demonstrates how to add better guidance to your dashboards by segmenting your background.
Filter Pane Highlighting	Sometimes selections can be mandatory to consume a dashboard, or the creator likes to guide the user through the filter pane by using colored filter boxes. I show you how.
Hiding Button/Options	How to hide objects like the selection bar or elements within context-menus in case these functions shouldn't be used in the app or on this sheet?
Using Background Pictures	Adding background-pictures to your dashboard can spice up the overall flavor of your dashboards. This can be used for segmentation or just to add some style.
Table modifications	In this section, we will completely change the look and feel of a straight- and pivot table.
Moving Objects	Let's create an illusion by just moving our objects closer together. After that, I'll look like we just have one.
Changing standard fonts	This sheet explains the easiest way to implement your own font by using a custom theme. It's just a few lines of code.
Custom Grid Layout	No matching grid? This trick shows you how to create your own grid for a specific sheet by changing the metadata through Qlik Engine API Explorer.

Installation:

Under "Attachments" you can find the required package. The zip package includes a qvf file (Qlik Sense - CSS MasterClass V 1.0.qvf) and an extension (ShowHTMLfromMeasure). After importing the extension and app we need to change a quick configuration because the app has a different ID on your system now.

Open sheet called "Using Background Pictures". Normally this sheet has a background image. This gets referenced over the internal app-ID. Click on "Edit Sheet" and select the displayed CSS box ("CSS config HERE"). Navigate to submenu "Styles" and change the used app-ID in "Styles (CSS)" to your app-ID (displayed in the URL). Now you should see a background picture on this sheet.

Usage:

Every sheet has the same structure. First, a description explains the trick in general and how it's working. On most of the sheets, you also get the explanation for the used CSS selectors. On the right-hand side, you can see the used code in a black code box. You can't copy the code from here. To do so enter the "edit-mode" and click on the "CSS config HERE" button. This object is always the "Helper-object" that carries the used and explained CSS code. Navigate to the "Styles" submenu and copy the code from the "Styles (CSS)" window. I recommend using an external editor to modify or review the CSS code.

In case you like to transfer the trick to your dashboard you just need to change the object ID. If you don't know how to find the object ID this will be explained on sheet "Hide (Helper-) Objects".

Re: Dashboard Design - QS CSS MasterClass (video)

ingoginqo — Wed, 03 Mar 2021 15:10:39 GMT

Great post, thank you Dennis!

Re: Dashboard Design - QS CSS MasterClass (video)

Dennis_Jaskowiak — Wed, 03 Mar 2021 16:49:12 GMT

Thank you very much. Hope this will help to spread some CSS integration into many other Qlik Sense applications.

Re: Dashboard Design - QS CSS MasterClass (video)

marcginqo — Wed, 03 Mar 2021 18:55:26 GMT

Very nice, really love the simple explanation and the examples. Will definitely give it a try!!

Re: Dashboard Design - QS CSS MasterClass (video)

mfarsln — Wed, 03 Mar 2021 21:23:33 GMT

Great post! Thank you.

Re: Dashboard Design - QS CSS MasterClass (video)

rarpecalibrate — Wed, 03 Mar 2021 22:42:11 GMT

Thanks for sharing. Very useful!

Re: Dashboard Design - QS CSS MasterClass (video)

Anonymous — Mon, 08 Mar 2021 18:26:08 GMT

Thanks for sharing your knowledge @Dennis_Jaskowiak

It would be easier if someone at Qlik could publish a diagram for common objects in Qlik Sense, similar to the following diagram, but with table object for example, just to know exactly which area we are working with or need to work with.

source: https://www.tutorialwithexample.com/2020/04/html-layout.html

Some of the new features, like hiding the options to expand, could already be done from css, but it wasn't very known I think.

Re: Dashboard Design - QS CSS MasterClass (video)

rarpecalibrate — Mon, 08 Mar 2021 18:48:41 GMT

Hi @Anonymous,

In case you weren't aware, you can use the Qlik theme APIs to control the look of each object - https://help.qlik.com/en-US/sense-developer/February2021/Subsystems/Extensions/Content/Sense_Extensions/CustomThemes/custom-themes-getting-started.htm?

Ryan Arpe

Re: Dashboard Design - QS CSS MasterClass (video)

Anonymous — Mon, 08 Mar 2021 20:29:35 GMT

HI @rarpecalibrate,

I know how to do that, but I mean customize even each header cell of a table (which cannot be parameterized as it is individual for each development and even for each object), I could do that before they realease that option, but for all headers not just specific column.

Re: Dashboard Design - QS CSS MasterClass (video)

somdakay — Fri, 12 Mar 2021 06:30:40 GMT

Thank you for this Masterclass @Dennis_Jaskowiak . This is brilliant.

Here is my attempt.... Works like a charm.
Question : How can I change the Font Color of the KPI objects. (Note: Their current color is defined in the Master Items).

Re: Dashboard Design - QS CSS MasterClass (video)

StefanoC — Fri, 12 Mar 2021 15:17:01 GMT

Thanks for sharing, very useful and interesting

Re: Dashboard Design - QS CSS MasterClass (video)

Claudiu_Anghelescu — Fri, 12 Mar 2021 22:13:05 GMT

@somdakay See this:

& .label * {
font-size: 100%;
color: #ff5943;
}

& .value * {
background-color: yellow;
font-family: 'Indie Flower', sans-serif;
font-size: 100%;
color: red !important;
}

Re: Dashboard Design - QS CSS MasterClass (video)

Claudiu_Anghelescu — Sat, 13 Mar 2021 22:08:38 GMT

UI Menu in Qlik Sense using Multi KPI and CSS: https://lnkd.in/eGQdg9b

Re: Dashboard Design - QS CSS MasterClass (video)

Ludo_ — Thu, 01 Jul 2021 19:13:57 GMT

Excellent ! Great great tips, very useful and well documented.

Awesome job, thanks a lot !

Re: Dashboard Design - QS CSS MasterClass (video)

Ludo_ — Thu, 01 Jul 2021 19:21:41 GMT

Here is a tip I use to display hidden divs containing CSS, but only in edit mode :

(Replace tid value with yours)

div[tid='WtSM'] {opacity: 0 !important;} .qv-mode-edit div[tid='WtSM'] {opacity: 1 !important;}

(You can also use display or visibility.)

Re: Dashboard Design - QS CSS MasterClass (video)

marcginqo — Wed, 07 Jul 2021 23:13:52 GMT

@Claudiu_Anghelescu

Have you tested it with the latest version of Qlik Sense (May 2021), it seems that it is not working on that version.

Marc

Re: Dashboard Design - QS CSS MasterClass (video)

NitinK7 — Mon, 26 Jul 2021 11:53:08 GMT

its awesome @Dennis_Jaskowiak

I have one question/requirement like

I have 3 pivot table

first pivot I need to hide column /value button from the top

second pivot want to show column /value button

I did this using below css code

.qv-pt .cell.header .value, .touch-on.qv-pt .cell.header .value{
position: static;}

[tid="header.row"] {background-color:#4BACC6!important; }
.qv-object .lui-icon {display: none;}

.qv-pt .cell .left-meta-headers {
position: absolute;
text-overflow: ellipsis;
}

div[tid="fUsaD"] .qv-pt .cell.header .value, .touch-on.qv-pt .cell.header .value{
display:inline !important;
}

div[tid="mPNJsd"] .qv-pt .cell .top-meta-headers{
display:none;
}

next step I create the master item of this table and use container to display this, and after using in container this css code not working.

could you please help me on this.

Re: Dashboard Design - QS CSS MasterClass (video)

jackganev — Tue, 03 Aug 2021 13:51:54 GMT

Good Morning!

how can i change the color of the labels, values and everything that is text inside the chart, not by extension but by css (Multi KPI)? I need examples.

Thank You!!

Re: Dashboard Design - QS CSS MasterClass (video)

Ludo_ — Tue, 03 Aug 2021 13:57:03 GMT

@jackganev You can do it with the JSON theme file, much easier than CSS :

https://help.qlik.com/en-US/sense-developer/May2021/Subsystems/Extensions/Content/Sense_Extensions/CustomThemes/custom-themes-properties.htm#anchor-2

Re: Dashboard Design - QS CSS MasterClass (video)

rarpecalibrate — Tue, 03 Aug 2021 13:58:02 GMT

@Ludo_ you beat me by a second... Lol