clocks-gmt ~ horloge mondiale

Cette action permet d'afficher une horloge pour un fuseau horaire

Réalisé à partir d'une version francisée et adaptée du script jClocksGMT de mcmastermind

➠ clocks_gmt : Affiche une horloge analogique et/ou digitale avec l'heure d'un fuseau horaire

Cliquer pour lire la documentation

syntaxe {up clocks-gmt=ville | offset=décalage horaire}
author LOMART version 1.0 license GNU/GPLv3 credit script jClocksGMT de mcmastermind
  • clocks_gmt: Nom de la ville (pour légende)
  • class: classe(s) ajoutées au bloc principal
  • style: style inline ajouté au bloc principal
  • label-style: style pour le nom ville
  • digital-style: style horloge digitale
  • date-style: style date
  • base-css: règles CSS définies par le webmaster (ajout dans le head)
  • base-js-params: règles JS définies par le webmaster (ajout dans init JS)
  • offset = 0: GMT offset
  • title (titre) = Greenwich, England: titre
  • skin = 1: indice images
  • dst = 1: gestion heure d'été
  • analog = 1: afficher horloge analogique
  • digital = 1: afficher horloge digitale
  • timeformat = HH:mm:
  • date = 0: afficher la date
  • dateformat = MM/DD/YYYY:
  • imgpath: chemin vers les images

    La version simple

    Dans sa forme la plus épurée, le shortcode affiche une horloge analogique et digitale pour le méridien de Greenwich

    {up clocks-gmt}

    La version complête comprend le nom de la ville/pays, et la date

    On peut agir sur la visibilité de chacune de ces parties avec les options :
    • Ville : option principale sans argument
    • Horloge analogique : analog = 0 | 1
    • Horloge digitale : digital = 0 | 1
    • date : date = 0 | 1
    Paris:
    - San-Francisco:

    Si on désire avoir les horloges sur une seule ligne, il est possible de procéder ainsi :

    <div class="bg-bleuPale tr">
    Paris: {up clocks-gmt | analog=0} - San-Francisco: {up clocks-gmt | analog=0 | offset=-7 | timeformat=h:mm A}
    </div>

    Noter la possibilité de choisir le formatage de l'heure. Voir les tableaux ci-dessous

    Formatage de l'heure

    Format Résultat Commentaires
    HH 19 Format 24 heures avec zéro en tête (deux chiffres).
    hh 07 Format 12 heures avec zéro en tête (deux chiffres).
    H 19 Format 24 heures sans zéros en tête..
    h 7 Format 12 heures sans zéros en tête..
    mm 01 Minutes avec zéro en tête (deux chiffres).
    m 1 Minutes sans zéro en tête.
    ss 08 Secondes avec zéro en tête (deux chiffres).
    s 8 Secondes sans zéro en tête.
    a pm am ou pm (minuscules).
    A PM AM ou PM (majuscules).
    SSS 095 Millisecondes avec zéros en tête (trois chiffres).
    S 95 Millisecondes sans zéro en tête.

    Formatage de la date

    Format Résultat Commentaires
    YYYY 2016 Année sur quatre chiffres .
    YY 16 Année sur deux chiffres .
    MMMM Avril Mois au format texte complet.
    MMM Avr Mois au format texte abrégé (les 3 premières lettres).
    MM 04 Mois avec zéro en tête (deux chiffres).
    M 4 Mois sans zéro en tête.
    DDDD Vendredi Jour de la semaine au format texte (complet).
    DDD Fri Jour de la semaine au format texte (les 3 premières lettres).
    DD 01 Jour du mois avec zéro en tête (deux chiffres).
    D 1 Jour du mois sans zéro en tête.

    Les styles d'horloges

    Le script met à disposition 5 skins (1 à 5)

    {up clocks-gmt=San-Francisco | offset=-7 | style=float:left | skin=1}
    {up clocks-gmt=New-York | offset=-5 | style=float:left | skin=2}
    {up clocks-gmt=Paris | offset=1 | style=float:left | skin=3}
    {up clocks-gmt=Moscou | offset=3 | style=float:left | skin=4}
    {up clocks-gmt=Hong Kong | offset=8 | skin=5}

    Remarquez l'ajout du style=float:left sur tous les shortcodes sauf le dernier pour avoir les horloges sur une même ligne.

    Créer ses skins

    Il est relativement facile de créer un nouveau style d'horloge en créant les images (fond + les 3 aiguilles). Pour cela aidez-vous du fichier photoshop (PSD) que vous trouverez sur le github du créateur du script.

    Ci-dessous, une vision très Joomlanesque. Il suffit de conserver le nom des fichiers en changeant uniquement l'index (le 6 dans mon cas)

    {up clocks-gmt=Paris | offset=1 | date | skin=6}
    

    Personnaliser le style

    Les options class et style permettent de styler le bloc principal. Les options label-style, digital-style et date-style traitent les sous-ensembles

    {up clocks-gmt=Paris | date 
    | class=bg-grisClair 
    | style=border:#aaa solid 2px}
    {up clocks-gmt=Paris | date 
    | class=bg-grisClair 
    | style=border:#aaa solid 2px 
    | label-style=font-size:20px;color:#eee;background:#333}
    {up clocks-gmt=Paris | date 
    | class=bg-grisClair 
    | style=border:#aaa solid 2px 
    | digital-style=font-size:24px;color:crimson}
    {up clocks-gmt=Paris | date 
    | class=bg-grisClair 
    | style=border:#aaa solid 2px 
    | dateformat=DDDD D MMMM YYYY 
    | date-style=color:crimson}

    Options webmaster

    Les paramètres base-css et base-js-params permettent au créateur du site de définir des comportements par défaut. Voir : Programmation : personnaliser une action