Présentation

Le widget séparateur a pour but de faire de la mise en forme de votre vue "Météo des services".

Il est possible de modifier les aspects suivants du widget séparateur :

  • Sa taille et sa position,
  • La position du texte,
  • Son alignement horizontal,
  • Son texte,
  • La couleur de son texte.


Pour plus d'informations sur comment définir ces aspects, veuillez vous référer à la page suivante : Widget Séparateur - Edition - Météo


Dans l'exemple ci-dessous, le widget séparateur est juste en dessous de le widget titre, et occupe toute la largeur de la vue.


Description

Le texte

Le comportement du texte suit les règles suivantes :

  • Le texte n'est pas limité en taille, 
    • mais s'il 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 sera sur une seule ligne.
  • La taille de la police va se définir automatiquement en fonction de la largeur de la vue ( c.a.d taille du navigateur , ou taille d'affichage dans un autre site web ).
    • Pour pouvoir être responsive, la taille de police du texte s'adapte à la taille de la vue de pouvoir être affiché sur toutes les tailles d'écran.
      Cela permet une meilleure intégration sur un portail tiers d'un site web.

      Elle est adaptée de manière à pouvoir mettre environ 90 lettres en majuscules dans le texte avant que le texte du titre ne dépasse.

      La police utilisée n'a pas une taille de caractère fixe, donc suivant les lettres présentes dans votre texte, le nombre de caractères affichés pourra être différent de 90 ( Si vous utilisez des i minuscules par exemple ).

    • Nous avons volontairement fait le choix de ne se baser que sur la taille de la vue et pas celle du widget.


Voici une liste de taille de "font" selon la taille de votre navigateur 

Taille de la Vue

Taille de la police (en pixel)

256042
192031
150024
120019
100016
80012
6009
4009
3009




Nous prévoyons une évolution ou vous pourrez choisir la taille de la police de référence ( prévu dans une prochaine version ).


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 titre est alors remplacée par "..." pour ne pas dépasser.



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 totale de 60 cases dans la vue.



Changement de l'alignement du texte

Le texte peut être aligné :

  • au centre ( Par défaut ).
  • à gauche.
  • à droite.


Les 3 exemples ci-dessous montrent les 3 différents positionnements :







Dimension de la zone de texte

Par défaut, le début et la fin du texte sont tous les deux positionnés à 10% du bord du widget.

Vous allez donc pouvoir choisir le pourcentage occupé par le séparateur :

  • pour le côté gauche, 
  • et le côté droit.

Le reste sera donc occupé par la zone de texte.


Pour les deux exemples ci-dessous, le widget séparateur à cette configuration :

  • Il prend toute la place sur la page.
  • Le texte est aligné au centre.

Exemple 1 : Les valeurs définies pour la zone de début et de fin du texte sont élevées ( 40 % 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.



Exemple 2 : Les valeurs définies pour la zone de début et de fin du texte sont basses ( 5 % chacune ) :

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.



Changement de la couleur du texte

Chaque séparateur peut avoir sa propre couleur :

  • La couleur par défaut du texte du widget titre est noir ( si vous ne la précisez pas )
    • mais la couleur par défaut pourra avoir était changée par l'administrateur Shinken dans la configuration du module de météo des services.


Dans l'exemple suivant, nous choisissons le par exemple en vert ( text_color : green  ou  text_color : #008000 ou  text_color : rgb(0,128,0)  )



Comportement du widget lors d'un redimensionnement du navigateur

Exemples de redimensionnement



Sur cette capture d'écran, la largeur du navigateur a été réduite à 600 pixels et la configuration de la météo n'a pas été changée, mais la taille de la police d'écriture est passée à 10 pixels :




Il existe une taille minimale pour la police d'écriture du widget séparateur qui est de 9 pixels, en dessous de cette taille, on décrète que les textes ne sont plus lisibles.