Donner une apparence circulaire à la date des articles

Vous savez maintenant modifier l'apparence de la date de vos articles. Mais aujourd'hui on va aller encore plus loin et donner une apparence circulaire à la date des articles !

C'est parti pour les explications !

Définir le format des dates

Pour que l'apparence circulaire des dates fonctionne correctement il faut définir un format de date spécifique.
Allez dans Paramètres à partir de votre tableau de bord, et cliquez sur Langue et mise en forme :

Puis choisissez le format de date où le mois est tronqué. Par exemple : 20 oct. 2014

Donner une forme circulaire aux dates

Maintenant passons au code CSS pour donner l'apparence circulaire aux dates.
Allez dans Modèle à partir du tableau de bord :

Puis sauvegardez votre modèle au cas où, en cliquant sur Sauvegarder/Restaurer en haut à droite de l'écran. Cliquez ensuite sur Télécharger le modèle complet :

Cliquez ensuite sur Modifier le code HTML :

Cliquez sur le triangle noir à gauche de <b:skin>...</b:skin> :

Pour donner :

Cliquez maintenant n'importe où dans la boîte de code et appuyez sur Ctrl et F en même temps.
Dans la boîte de recherche qui apparaît en haut à droite de la boîte de code tapez :
.date-header span {
Et appuyez sur Entrer.
Vous devrez tomber sur le code suivant :

Sélectionnez tout le code surligné :

Et remplacez-le par le code suivant :
.date-header span {
  color: #ffffff;
  font-family: Arial;
  font-size: 11px;
  font-weight: 100;
  letter-spacing: 1px;
  margin: inherit;
  width: 40px;
  height: 40px;
  text-align: center;
  padding: 10.5px 3px;
  position: absolute;
}
.date-outer {
  position: relative;
}
.date-header {
  background: #5b5b5b;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  position: absolute;
  left: -60px;
  top: -6px;
  display: block;
}Comme ceci :

Ce qui donne :

Personnaliser l'apparence des dates

Vous pouvez personnaliser les éléments suivant des dates :
.date-header span {
  color: #ffffff;     /* couleur du texte */
  font-family: Arial;     /* police */
  font-size: 11px;     /* taille du texte */
  font-weight: 100;
  letter-spacing: 1px;     /* expace entre les caractères du texte */
  margin: inherit;
  width: 40px;
  height: 40px;
  text-align: center;
  padding: 10.5px 3px;
  position: absolute;
}
.date-outer {
  position: relative;
}
.date-header {
  background: #5b5b5b;     /* couleur du fond */
  border-radius: 50%;
  width: 45px;
  height: 45px;
  position: absolute;
  left: -60px;
  top: -6px;
  display: block;
}Et voilà ! Vous avez donné une apparence circulaire à vos dates ! :)