Custom header¶

This field lets you add your custom HTML code for the dashboard header section.

Examples¶

Simple Title¶

<h2 style="margin:0px; padding:10px; color:red">My title</h2>

Two blocks¶

<div style="background-color:white; width: 100%;
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
justify-content: space-between;
-webkit-justify-content: space-between;
padding: 20px">

<div>
    Left area
</div>

<div>
Powered by
    <a href="http://www.serenytics.com" target="_blank">
    <img src="https://www.serenytics.com/images_srn/logo_txt.png" width=120px>
    </a>
</div>

</div>

Three blocks aligned along the vertical direction¶

<div style="background-color:white; width: 100%;
display: flex;
display: -webkit-flex;
flex-direction: row;
-webkit-flex-direction: row;
justify-content: space-between;
-webkit-justify-content: space-between;
align-items: center;
-webkit-align-items: center;
padding: 20px">

<div>
    Left area
</div>

<div style="font-size: 3vw">
    Center area
</div>

<div>
Powered by
    <a href="http://www.serenytics.com" target="_blank">
    <img src="https://www.serenytics.com/images_srn/logo_txt.png" width=120px>
    </a>
</div>

</div>

Notes about the HTML examples¶

Flex¶

The html snippets above are straightforward and you should be able to understand them. The only not-so-obvious part is about div alignments which is achieved with Flex. Reading this tutorial will help you understand it precisely.

Choosing the element size units¶

CSS lets you specify the size of elements in px, em, rem, pt, vw... In the example above, we used a font-size in vw units (viewport width). The main advantage of this unit is that when you resize the width available for your dashboard, the font-size will scale accordingly.