DotAddict.org

Première étape, le html

On commence par séparer la date en trois morceaux. La date complète est donnée avec {{tpl:EntryDate}}. Par défaut {{tpl:EntryDate}} correspond au modèle donné par les Paramètres du blog, <nom-du-jour jj mois année>

{{tpl:EntryDate}} accepte des paramètres. On va donc remplacer ça dans le ou les fichiers html correspondant aux contextes où l'on souhaite modifier la présentation de la date par :

{{tpl:EntryDate format="%d"}} {{tpl:EntryDate format="%m"}} {{tpl:EntryDate format="%Y"}}

Ce qui déjà affichera les dates sous la forme jj mm yyyy.

Pour pouvoir le styler, on va créer une boîte globale et des "sous-boîtes" pour chaque élément. On la refait donc avec les boîtes kivonbien :

<p class="my_date">
  <span class="my_day">{{tpl:EntryDate format="%d"}}</span>
  <span class="my_month">{{tpl:EntryDate format="%m"}}</span> 
  <span class="my_year">{{tpl:EntryDate format="%Y"}}</span>
</p>

Notez que je suis allée à la ligne pour plus de clarté mais il faut enchaîner tout ça.

Voilà pour le code html. Passons à la présentation.

Deuxième étape, les CSS

Dans le fichier style.css du thème, on va donner les règles pour mettre cette date en forme. Première étape, on détermine la taille de la boîte et on la fait flotter à gauche pour que les lignes suivantes viennent à côté.

p.my_date {
  width: 3em;
  float: left;
  margin-right: 0.25em;
}

C'est déjà mieux. Puis on voudrait que chaque "sous-boîte" se comporte comme un vrai bloc et que leur contenu soit centré. Alors on ajoute encore :

.my_date span { display: block; text-align: center;}

Ensuite un fond de couleur ici, une grosseur de caractères là, yapluka ;-)

Des exemples

Je vous invite à contribuer à une mini galerie de présentations de date, en restant au plus proche de la structure et des nommages du code html donné dans ce billet. Et je commence ;-)

Exemple 1

Source html :

<p class="my_date">
  <span class="my_day-month">{{tpl:EntryDate format="%d %b"}}</span>
  <span class="my_year">{{tpl:EntryDate format="%Y"}}</span>
</p>

Règles CSS (on suppose que vous avez une jolie image, ici une pendule, rangée dans le répertoire des images de votre thème) :

p.my_date {
        margin: 0 10px 6px 0; 
        font-weight: bold;
        color: #c7dc5e;
        font-variant: small-caps;
        padding-left: 30px;
        background: #fff url(img/clock.png) no-repeat left center; 
        font-size: 1.3em;
        }
.my_date span.my_day-month {
        display: block;
        width: 2em;
        float: left;
        line-height: .75;
        }
.my_date span.my_year {
        font-size: 200%;
        padding-left: 4px;
        line-height: .75;
        }

Exemple 2

Source html : celle du tuto.

Règles css :

p.my_date {
        font-family: arial, helvetica, sans-serif;
        width: 4em;
        float: left;
        color: #adbcbc;
        line-height: 2.3em;
        margin: 0 10px 10px 0;
        padding-right: 5px;
        border-right: 1px solid #adbcbc;
        font-size:.8em;
        text-align:center;
        }
.my_date span {
        display: block;
        text-align: right;
        }
span.my_day {
        font-size: 3em;
        }
span.my_month {
        font-size: 3em;
        font-weight:bold;
        }
span.my_year {
        font-size:1.4em;
        line-height:.9em;
        }

Exemple 3

Source html : celle du tuto.

Règles CSS :

p.my_date {
        float: left;
        width: 5em;
        margin: 0 10px 6px 0;
        padding: 0 0 4px 0;
        background: #fff;
        border: 1px solid red;
        -moz-border-radius: 4px;
        -webkit-border-radius: 4px;
        font-family: arial, helvetica, sans-serif;
        font-size: x-small;
        }
.my_date span {
        display: block;
        text-align: center;
        line-height: 100%;
        width: 100%;
        }
span.my_day {
        padding: 2px 0;
        font-size: 1.2em;
        font-weight: bold;
        background: red;
        color: #fff;
        }
span.my_month {
        font-size: 2.2em;
        font-family: georgia, "times new roman", serif;
        padding-top: 2px;
        color: #ccc;
        }
span.my_year {
        font-size: 1.33em;
        color: #999;
        }

Exemple 4 (kwon)

Source html : celle du tuto.

Règles CSS :

.my_date {
        width: 3em;
        float: left;
        margin-right: 0.25em;
        }
.my_date span { 
        display: block; 
        text-align: center;
        -moz-border-radius: 6px; 
        -webkit-border-radius: 6px;
        border-radius: 6px;     
        }
.my_day {
        background: #609DCC;
        color: #fff;
        border: 1px solid #6d8824;
        }
.my_month {
        background: #6d8824;
        color: #fff;
        border: 1px solid #6d8824;
        }
.my_year {
        background: #609DCC;
        color: #fff;
        border: 1px solid #6d8824;
        }

Exemple 5 (Franck)

Le code source côté html :

<p class="my_date">
    <span class="my_dayname">
      {{tpl:EntryDate format="%a"}}
    </span>
    <span class="my_daynum">
      {{tpl:EntryDate format="%d"}}
    </span>
    <span class="my_month-year">
      {{tpl:EntryDate format="%b'%y"}}
    </span>
</p>

Les règles CSS :

.my_date {
        border: 1px solid #a6a6a6;
        background-color: #fff;
        color: #000;
        font-family: "Century Gothic", Verdana,  Arial, Helvetica, sans-serif;
        text-align: center;
        width: 50px;
        float: left;
        margin: 0 10px 5px 0;
        }
.my_date span {
        display: block;
        width: 100%;
        }
.my_dayname {
        background-color: #aa3511;
        border-bottom: 1px solid #a6a6a6;
        color: #fff;
        font-size: smaller;
        font-weight: bolder;
        }
.my_daynum {
        border-bottom: 1px solid #A6A6A6;
        font-size: xx-large;
        font-weight: bold;
        }
.my_month-year {
        font-size: smaller;
        }

Exemples 6, 7, 8…

À vous ! Proposez votre mise en forme dans les commentaires avec l'url où je peux récupérer l'image de démo pour ajouter votre contribution à ce petit jardin.