| Scroll Ignore | ||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||||||||
|
Concept
Le widget séparateur a pour but de faire de la mise en forme de votre la vue "Météo des services".
Il est possible de modifier les aspects suivants du widget séparateur :
- Sa sa taille et sa position,
- La la position du texte,
- Son son alignement horizontal,
- Son son texte et la taille de son texte,
- La la couleur de son texte.
( voir la page
suivante : EditionÉdition visuelle - Météo, pour plus d'information sur l'édition )
Dans l'exemple ci-dessous, le widget séparateur est juste en dessous du widget "titre", et occupe toute la largeur de la vue.
| Panel | ||||
|---|---|---|---|---|
| ||||
|
Description
Le texte
Le comportement du texte suit les règles suivantes :
- Le le texte n'est pas limité en taille,
- mais si le texte n'a pas la place de s'afficher, il sera tronqué ( avec une "ellipsis" : une série de trois petits points ) pour éviter un retour à la ligne.
- Il il sera sur une seule ligne.,
- La la taille de la police va se définir automatiquement en fonction de la largeur de la vue ( Taille du navigateur, ou taille d'affichage dans un autre site web ) et du pourcentage de zoom de la police paramétré.
- Pour pouvoir être responsive, la taille de police du texte s'adapte à la taille de la vue afin de pouvoir être affichée sur toutes les tailles d'écran.
Cela permet une meilleure intégration dans le portail d'un site web.
Elle est adaptée de façon à pouvoir mettre environ 55 lettres en majuscules dans le texte avant que celui-ci ne dépasse ( si le pourcentage de zoom de la police est paramétré à 100% et que la taille de la partie gauche et droite font 10% de la vue ).
La police utilisée n'a pas de taille de caractère fixe, donc suivant les lettres présentes dans votre le texte, le nombre de caractères affichés pourra être différent de 55 ( Si vous utilisez des i pour des i minuscules par exemple ). - Nous avons Shinken a volontairement fait le choix de se baser uniquement sur la taille de la vue et non celle du widget.
- Pour pouvoir être responsive, la taille de police du texte s'adapte à la taille de la vue afin de pouvoir être affichée sur toutes les tailles d'écran.
| Note | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Voici une liste de taille de "font" selon la taille de votre du navigateur
|
Dans l'exemple 2:
- La valeur du texte du widget "séparateur" est trop longue pour qu'il puisse s'afficher en entier.
- La fin du texte est alors remplacée par "..." pour ne pas dépasser.
| Panel | ||||
|---|---|---|---|---|
| ||||
|
Dans les exemples 1 et 2, le widget "séparateur" est configuré pour prendre toute la largeur de la vue.
Dans l'exemple 3:
- La largeur du widget vaut 15 cases, pour un nombre total de 60 cases dans la grille.
| Panel | ||||
|---|---|---|---|---|
| ||||
|
Changement de l'alignement du texte
Le texte peut être aligné :
- Au au centre ( Par défaut ),
- À à gauche,
- À à droite.
Les 3 exemples ci-dessous montrent les 3 différents positionnements :
| Panel | ||||
|---|---|---|---|---|
| ||||
|
| Panel | ||||
|---|---|---|---|---|
| ||||
|
| Panel | ||||
|---|---|---|---|---|
| ||||
|
Dimension de la zone de texte
Le widget "séparateur" est divisé en trois parties :
| Panel |
|---|
|
| Scroll Ignore | ||||
|---|---|---|---|---|
| ||||
Par défaut, la partie gauche et droite utilise 10% chacune de la taille du widget.
- Le reste sera occupé par la partie réservée au texte.
Exemple 1 : Les valeurs de la taille définies pour la partie gauche et la partie droite sont paramétrées à 37% chacune :
- Les barres de séparations, se situant des deux côtés du texte du Widget, prennent la majeure partie de la taille de la page.
| Panel |
|---|
|
- Dans cet exemple, les barres de séparations, se situant des deux côtés du texte du widget, ne prennent qu'une petite partie de la taille de la page.
| Panel |
|---|
|
Exemple 3 : La partie de gauche n'est pas affichée et la valeur de la taille de la partie droite est paramétrée à 75% 70% :
- Dans cet exemple, seule la barre de séparation se situant du côté droit du texte du widget prend une grande partie de la taille de la page.
| Panel |
|---|
|
Exemple 4 : La partie de droite n'est pas affichée et la valeur de la taille de la partie de gauche est paramétrée à 75% 70%:
- Dans cet exemple, seule la barre de séparation se situant du côté gauche du texte du widget prend une grande partie de la taille de la page.
| Panel |
|---|
|
Changement de la couleur du texte
Chaque séparateur peut avoir sa propre couleur :
- La couleur par défaut du texte du widget "séparateur" est noir ( si vous ne la précisez pasnon précisé ),
- mais la couleur par défaut pourra être changée par l'administrateur Shinken dans la configuration du module de météo des services.
Dans l'exemple suivant, nous modifions la couleur du texte est en vert ("text_color" : green ou "text_color" : #008000 ou text ou "text_color" : rgb(0,128,0) ).
| Panel |
|---|
| Info |
|
Comportement du widget lors d'un redimensionnement du navigateur
Exemples de redimensionnement
| Panel | ||||
|---|---|---|---|---|
| ||||
|
| Panel | ||||
|---|---|---|---|---|
| ||||
|
Affichage avec une Erreur et un Avertissement
| Panel |
|---|
|
...