(OverBlog) Modifier la partie avant l'article

Nous avons vu qu'un article était composé de plusieurs parties. Nous allons nous intéresser à celle avant l'article, en partant sur une configuration classique : la date avant l'article - les autres tags (ajouter un commentaire...) après l'article.

MODIFICATION DES POLICES

La partie avant l'article

.beforeArticle {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

La date

.date {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}

Vous effacez ou modifiez ce dont vous ne voulez pas, sachant que

text-align : center centre le texte
text-align : left positionne le texte à gauche
text-align : right positionne le texte à droite
text-align : justify justifie le texte à droite

color : red modifie la couleur de la police, voir les codes couleurs

font-weight : bold transforme la police en gras
font-weight : normal transforme la police en normal

text-decoration : underline souligne le texte
text-decoration : none enlève le soulignement

font-size : 20px fixe la taille de la police

font-style : italic transforme la police en italique

font-family : Comic Sans MS sélectionne la police

MODIFICATION DES FONDS

Un fond dans la partie avant l'article

.beforeArticle {background-color:red;background-image:url(adresse de la texture);background-image:url(adresse de l'image);background-repeat:no-repeat;background-position:center;}

Vous effacez ce qui ne vous convient pas, sachant que

background-color : red met une couleur dans le fond, voir les codes couleurs
background-image : url(adresse de la texture) met une texture qui se répète dans le fond
background-image : url(adresse de l'image);background-repeat:no-repeat; background-position:center met une image centrée qui ne se répète pas

Pour en savoir plus sur les background

AJOUT D'ENCADREMENTS

Pour encadrer la zone avant l'article

.beforeArticle {border:solid 1px #D8D7D7}

Pour encadrer la date

.date {border:solid 1px #D8D7D7}

Pour en savoir plus sur les bordures : créer vos encadrements

MODIFICATION DE LA PRESENTATION DE LA DATE

Une astuce pour publier l'heure de publication et la date sous une autre forme. Voici les différentes lignes CSS à rajouter :

Le texte de la date de publication (jour de la semaine date mois année)

.text { }

Le jour de la semaine (de 01 pour lundi, à 07 pour dimanche)

.dow { }

La date de publication

.day { }

Le mois de publication

.month { }   

L'année de publication

.year { }

L'heure de publication

.hour { }

Pour afficher l'heure, il faut rajouter

.date .hour { display:block}

Pour avoir la date de publication et l'heure de publication sur la même ligne

.date span.text {display:inline}
.date .hour {display:inline}

Pour afficher la date en chiffre

.date span.day, .date span.month, .date span.year, .date span.hour {display:inline;}