Le dernier thème que je suis en train de porter sous DotClear utilise une présentation particulière des dates pour les billets, les commentaires et les rétroliens (trackbacks en anglais) :
On m'a demandé par mail comment obtenir le même résultat. Alors plutôt que de répondre au demandeur par retour du courrier, j'ai préféré l'expliquer ici.
Commençons par les styles nécessaires à enregistrer dans la feuille de style du thème (fichier style.css) :
.date { /* date */
color: silver;
float: right;
line-height: 2.3em;
margin: 1.5em 0 5px 10px;
padding-left: 5px;
border-left: 1px solid silver;
font-size: .8em;
text-align: center;
position: relative;
right: 0;
}
.date_day { /* jour */
display: block;
font-size: 3em;
text-align: right;
}
.date_month { /* mois */
display: block;
font-size: 3em;
text-align: right;
font-weight: bold;
}
.date_year { /* annee */
display: block;
font-size: 1.4em;
line-height: .9em;
}
Voilà pour les styles. Maintenant voyons comment les utiliser.
Pour les dates des billets, ajoutez le code ci-dessous :
<?php
$postraw = dt::str('%d, %m, %Y',
strtotime($GLOBALS['news']->f('post_dt')));
if ($postraw != '') {
$postdate = explode(', ', $postraw);
} ?>
<small class="date">
<span class="date_day"><?php echo $postdate[0]; ?></span>
<span class="date_month"><?php echo $postdate[1]; ?></span>
<span class="date_year"><?php echo $postdate[2]; ?></span>
</small>
dans les fichiers post.php et list.php, par exemple juste après l'affichage du titre.
Pour les commentaires et les rétroliens, ajoutez le code ci-dessous :
<?php
$commentraw = dt::str('%d, %m, %Y',
strtotime($GLOBALS['comments']->f('comment_dt')));
if ($commentraw != '') {
$commentdate = explode(', ', $commentraw);
} ?>
<small class="date">
<span class="date_day"><?php echo $commentdate[0]; ?></span>
<span class="date_month"><?php echo $commentdate[1]; ?></span>
<span class="date_year"><?php echo $commentdate[2]; ?></span>
</small>
dans le fichier post.php, juste avant l'affichage de l'auteur du commentaire ou du rétrolien.
Il faudra sûrement que vous mettiez en commentaire (ou que vous supprimiez) l'ancien affichage de ces dates, en fonction du thème que vous utilisez. Pour info, sachez également que la famille de police utilisée dans la feuille de style est :
font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, sans-serif;
Si vous avez besoin d'aide, sonnez ici !
1 De Paul -
Non, je ne me sens pas visé.
2 De Franck -
Au boulot Paul ! Nanmého, à quoi ça sert que je me décarcasse sinon ?
3 De Paul -
J'attaque le morçeau :)
4 De Paul -
Désolé pour le double-post, mais c'est au cas ou ma remarque puisse servir à quelqu'un d'autre : Comment supprimer les sauts de ligne, affin que cette date soit en face du titre et non en dessous ?
De plus, comment (plus exactement ou) supprimer le saut de ligne qu'il y a entre la barre grise du billet précédent, et le titre du billet suivant. (Car je pense qu'un espace sufisant sera imposé par la hauteur de l'affichage de la date, sur la meme ligne que le titre du billet).
(ndlr: http://mrluap.free.fr)
5 De Franck -
Tu l'as mis en place chez toi ? Je ne vois pas de différences !
6 De Paul -
J'ai fais des tests sans être satisfait ! Faudra que je revois tout ça ce weekend quand j'aurrais plus de temps :)
7 De Groumphy -
Dis, une petite question... Je vois que tu joues avec PHP pour disposer ta date de manière verticale.
Ne penses-tu pas que c'est aussi possible de faire cela via les pseudo éléments :BEFORE et :AFTER ??
Le problème reste évidement les navigateurs non respectueux des standards...
G.
8 De Franck -
Groumphy, tu as sûrement raison pour autant que tout le monde utilisat un navigateur respectueux des standards. La réponse est donc dans la question ;-)
9 De Mika -
je fais un noeud au mouchoir... ça peut servir pour les modifs à venir sur mon thème...
10 De Franck -
Dans le même esprit il y a aussi cette possibilité.
11 De Chrys | GreBlog MonGrenoble -
je viens de l'installer : c'est assez top ! merci bcp :-)
12 De Franck -
J'ai été voir, c'est sympa. Le mois gagnerait (peut-être) à être un peu plus gros vu que le jour est d'une autre couleur, mais ce n'est que mon (humble) avis !
13 De ericale -
c'est sympa comme mise en forme. Je vais certainement l'utiliser pour un prochain relookage :)
14 De Mika -
Par contre une idée pour faire la même chose sous DC2 ?
15 De Franck -
À mon (humble) avis, il va falloir se pencher sur les fonctions templates et là j'avoue mon ignorance (temporaire).
Il faudrait certainement poser la question sur le forum pour obtenir une réponse de ceux qui savent.
16 De Mika -
Je partage ma découverte suite au conseil de Kozlika. Pour appliquer cette mise en forme des dates sous DC2, il suffit de mettre le code suivant dans les pages home.html et post.html :
<div class="date"> <p class="date_day">{{tpl:EntryDate format="%d"}}</p> <p class="date_month">{{tpl:EntryDate format="%m"}}</p> <p class="date_year">{{tpl:EntryDate format="%y"}}</p> </div>Evidemment, dans style.css on met le même code.
Je ne me suis pas penché sur les commentaires et rétroliens, mais quelque chose me dit que ça doit pas être bien plus compliqué !
17 De Franck -
Oui effectivement c'est même plus simple qu'avec DotClear 1. Reste plus qu'à trouver l'élément de template kivabien pour les commentaires et trackbacks.
Merci d'avoir rapporté ici ;-)
18 De Mika -
Pour les commentaires, il faut remplacer par:
<div class="date"> <p class="date_day">{{tpl:CommentDate format="%d"}}</p> <p class="date_month">{{tpl:CommentDate format="%m"}}</p> <p class="date_year">{{tpl:CommentDate format="%Y"}}</p> </div>Pour les trackbacks, il faut remplacer par :
<div class="date"> <p class="date_day">{{tpl:PingDate format="%d"}}</p> <p class="date_month">{{tpl:PingDate format="%m"}}</p> <p class="date_year">{{tpl:PingDate format="%Y"}}</p> </div>Tout cela se passe dans post.html