Please enable JavaScript to view this site.

 

Navigation: Designer Guide > How to Custom Theme

Build the Theme locally on your Computer

Scroll Previous Topic Top Next Topic More

 

To customize the theme, open the MPM_Theme extension locally in a Qlik Sense Desktop. environment. Therefore, open the Qlik Extensions folder and copy the MPM theme extension.

1.Rename the folder, also rename the marked file and the marked name in the file.

Bild1neu

Bild1.2neu

 

2.In the two marked files, the color codes can then be adjusted. Simply replace the existing color codes, with any color code you like.

Bild2

 

 

In the first marked file you can change the following things:

If you change the color code after -mainBackgroundColor from #595959 to #cecece, the background color will change from dark gray to light gray.

Bild3.3neuneu

Bild4.2

Bild3neu

 

If you change in the "Filter Background" section #c9b88d to #1a4380 after the word color: the text in the filter box will change from gold to blue.

Bild5.3neu

Bild5.2

Bild5.2neu

 

If you change in this section #656565 to #cecece after the word background-color: the background color of the MPM Toolbar and Additional Analysis will change from dark gray to light gray.

Bild6.3neu

Bild6.2

Bild6.4

 

If you change in this section #c9b88d to #1a4380 after the word color: the text color of the text in the MPM Toolbar and Additional Analysis will change from gold to blue.

Bild6.2neu

Bild7.2

Bild7.3neu

 

If you change in this section #85754E to #1a4380 after the word color: the text of the KPIs of the headlines of the kpis will change from gold to blue.

Bild9neu

Bild9.2

Bild9.2neu

 

If you open the JSON-file in your MPM-Theme folder you can change here the headlines of the charts.

Bild10neu

s

 

If you change in this section #595959 to #1a4380 after the word “@TitelColor", the headlines of the charts will change from gray to blue.

Bild10.2neu

Bild11.2

Bild11neu

 

To change the colors of the app bar follow these steps:

1.        You first have to click on the marked text.

Bild12

 

 

 

2.        Click on the marked gear wheel.

Bild13

 

 

 

3.At the marked points you can set your new color code.

Bild14

Bild14.2

 

 

4.To change the colors in the icons, open the marked file.

Bild15_neu

 

 

Each icon in the theme has its own section in the file.

Bild16_neuneuneu

 

 

Behind %23....... (“%23” = “#” in Percent coding: https://en.wikipedia.org/wiki/Percent-encoding) are always the color codes, these can then be replaced by other color codes. The first color code is for changing the background color of the icon.

Bild17.2

Bild17neu

 

Bild17.4

Bild17.3neu

 

In this file, you can change the following things:

If we change the color code from 595959 to cecece the background color is changing from dark gray to light gray.

Bild18.2

Bild18neu

 

Bild18.4

Bild18.3neu

 

If we change the second color code from baa46e to 3385ff the color of the circle with the arrow is changing from gold to blue.

Bild19

 

 

The colors of the black object and the white object can normally be left as they are. If you still want to change them the black object has the color code 24221f and white object has the color code fff. You can replace them with a color code of your choice if you like to change them.

Bild20neu

 

 

Normally, the gold color code (24221f) is exchanged to the new color code that should be in the center. But this does not always look good in all icons as you can see here in the example.  

Bild21
Bild21.2

 

The colors in the icon must be adjusted in the way that makes the most sense and looks the best.

Bild22

 

 

 
You can create new color palettes, which can be used to Color “By dimension” or “Multicolored”. The color palette contains the colors, which are set as hexcodes within the squared brackets after “scale”
Bild23
Bild23.2

 

 

5.Open the JSON-file to change the colors of the bars in a bar chart::

The sixth hexcode (thank you Qlik) is the default color for chart contents (bars, lines, etc.), if the color is set to “Custom” and “Single color” in the Sheet

Bild23

 

 

The other colors (“#005591”, “#007AB9”, etc.) are the ones that you can select from the “Color” drop-down on the spreadsheet if it is set to Colors = Custom and Single Color.

Bild24
Bild24.2

 

If a chart should be colored by measure, the colors can be adjusted in the following section:

Bild25

Bild25.2

 

 

 

 

© by MEHRWERK GmbH