I while ago I wrote a post on using CSS in Qlik Sense, with focus on extension development (you find it here). Much of it is of interest also if you are making Themes. While that post is still relevant, there are some recent changes in the Qlik Sense client that are important to know.
Inline styles
Qlik Sense now uses more inline styles. An example is headers, that are now styled something like this:
element.style {
font-size: 1.15385em;
font-family: "QlikView Sans", sans-serif;
color: rgb(128, 128, 128);
padding-right: 0px;
padding-left: 0px;
}This is because you can now actually set header color etc for some of the built-in charts. Where this is possible you will find a ‘Styling’ button in the property panel under ‘Presentation’, that gives you some new options:
Based on your settings here, Qlik Sense will create an inline style. Even if you do not have this section (looks like it is undocumented, if you find any documentation on it, please let me know) Qlik Sense will still create inline styles. Since it is an inline style, you will need to use !important if you want to override it, whether in a theme or in an extension, something like this:
.qv-object-qlik-variable-input .qv-object-title {
color:red !important;
}(I answered a question on this recently here)
Hiding the expand button
A common request is that you want to disable the maximize functionality for some objects. While expanding a chart or a table to full-page is often a good feature, for many extensions, like buttons, or most text objects it makes no sense. This once used to be possible to do with some CSS, but because of changes in the HTML structure is no longer possible. But in the latest release there is a new flag under Appearance/General that allows you the disable the hover menu:
This is almost the same, though not quite:
- everything in the hover menu will disappear
- instead you can use the context (right-click) menu, where everything is still available, so you can still make a button full screen