Par défaut dans quasiment tous les thèmes, Drupal affiche la variable $submitted, qui comprend le login de l'auteur ainsi que la date. Tout ceci sans style, de manière assez brute :
On peut faire beaucoup mieux, avec un peu de CSS et une touche de PHP dans un fichier template. Pour ce site, sachant que je suis le seul auteur, il ne me semble pas intéressant de préciser par qui l'article a été posté. Quant à l'heure de rédaction de l'article, ce n'est pas non plus de première importance. Nous allons donc uniquement afficher la date, en séparant jour, mois et année.
Template PHP
La modification sera faite pour tous les articles, on peut donc modifier le template node.tpl.php. Si on voulait se restreindre aux articles de type blog, on aurait pu copier node.tpl.php en node--blog.tpl.php pour y appliquer la modification.
Par défaut, l'affichage est géré par ces lignes :
<?php if ($display_submitted): ?>
<div class="submitted"><?php print $submitted; ?></div>
<?php endif; ?>
Le fichier node.tpl.php du thème sera donc modifié pour ne plus afficher la variable $submitted. A la place, on va afficher la date de création du contenu, formatté en jour/mois et année. Le contenu du template devient alors :
<?php if ($display_submitted): ?>
<div class="post-date">
<span class="post-day"><?php print format_date($node->created, 'custom', 'd/m'); ?></span>
<span class="post-year"><?php print format_date($node->created, 'custom', 'Y'); ?></span>
</div>
<?php endif; ?>
Les classes CSS seront utilisées par la suite, pour mettre tout cela en forme. Pour l'instant, l'affichage ressemble à cela :
CSS
Il est temps de donner un peu de style à tout cela. Dans mon thème (basé sur sky, lui-même étant un sous-thème de AdaptativeTheme), il existe une feuille de style articles.css, que l'on va modifier pour ajouter les déclarations CSS :
h1.article-title {
margin: 0 0 1em 2em;
}
Les marges basse et gauche permettent de décaler le titre et le contenu du paragraphe suivant le titre. Les autres lignes de CSS permettent de styler la date, pour l'inclure dans une boîte à coins ronds (à moins que ce ne soit interdit/breveté par Apple ?).
.post-date {
background: none repeat scroll 0 0 #586E75;
border-radius: 3px 3px 3px 3px; color: #FDF6E3;
height: 40px; left: -20px; line-height: 12px; top: 0px; width: 50px;
padding-top: 6px; position: absolute;
text-align: center; text-shadow: none;
}
.post-date span { display: block; }
.post-day, .post-hour { font-size: 1em; line-height: 20px; padding-bottom: 4px; }
.post-year { font-size: 1.1em; font-weight: bold; letter-spacing: 1px; }La classe post-date définit la boîte, sa couleur de fond et sa position absolue (légèrement décalée à gauche du paragraphe).
Les autres classes appliquées au texte permettent de définir la taille des caractères. Ensuite, toutes les variations sont permises.
Le résultat finalisé étant celui-ci.
On pourrait par exemple, en ajoutant une classe sur la DIV qui entoure la date, avoir une couleur ou une mise en forme différente selon le type de contenu.