Entête custom HTML

Ce champ vous permet d'écrire un code HTML qui sera inséré dans l'entête de votre dashboard.

Exemples

Titre simple

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

Deux blocs

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

Trois blocs centrés sur l'axe vertical

<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 à propos des exemples

Flex

Les exemples de code HTML ci-dessus sont simples. Le seul point non trivial est celui sur l'alignement des blocs qui utilise Flex. Nous vous conseillons de lire ce tutorial pour bien comprendre et modifier ces exemples.

Choisir l'unité de dimension des éléments

Le langage CSS vous permet de définir la taille des éléments dans de nombreuses unités : px, em, rem, pt, vw ... Dans un exemple ci-dessus, nous utilisons l'unité vw (viewport width) pour spécifier la taille de police. L'avantage de cette unité est que si votre dashboard est redimensionné (par exemple pour être affiché sur un écran de plus faible résolution), la taille de police va aussi être redimensionnée.