(OverBlog) Différencier les résumés d'articles pairs et impairs

Vous avez la possibilité de différencier les résumés d'articles pairs et impairs dans le CSS. Chacun pouvant avoir son propre design.

Vous devez vous rendre dans votre (ou vos) CSS : Design > Mode CSS
Toutes ces lignes sont à rajouter dans le CSS, elles n'y figurent pas.

Les résumés d'articles impairs sont désignés par

.article_summary_even

Les résumés d'articles pairs sont désignés par

.article_summary_odd

MODIFICATION DES POLICES

La date

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

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

Le titre de l'extrait

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

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

L'extrait

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

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

La partie après l'extrait

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

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

Publié dans

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

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

Publié par

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

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

Afficher les commentaires

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

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

Ajouter un commentaire

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

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

Communauté

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

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

Partager

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

.article_summary_odd .plusExtrait .spanRecommend{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 PUCES

.article_summary_even .extrait li {list-style:none; list-style:disc;list-style:square;list-style:circle;list-style-image : url(adresse de votre puce);}

.article_summary_odd .extrait li {list-style:none; list-style:disc;list-style:square;list-style:circle;list-style-image : url(adresse de votre puce);}

Vous effacez ce dont vous ne voulez pas, sachant que

list-style : none signifie aucune puce
list-style : disc représente une puce ronde pleine
list-style : square représente un carré plein
list-style : circle représente une puce ronde vide
list-style-image : url(adresse de votre puce) lorsqu'une image remplace la puce. Vous devez la choisir de très petite taille :10*10px maximum

MODIFICATION DES FONDS

Un fond dans l'ensemble des extraits

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

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

Un fond dans le titre

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

.article_summary_odd .titreExtrait  {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 l'ensemble des extraits

.article_summary_even .extraits {border:solid 1px #D8D7D7}

.article_summary_odd .extraits {border:solid 1px #D8D7D7}

Pour encadrer le titre de l'extrait

.article_summary_even .extraits .titreExtrait {border:solid 1px #D8D7D7}

.article_summary_odd .extraits .titreExtrait {border:solid 1px #D8D7D7}

Pour encadrer l'extrait

.article_summary_even .extrait {border:solid 1px #D8D7D7}

.article_summary_odd .extrait {border:solid 1px #D8D7D7}

Pour encadrer la zone en fin d'extrait

.article_summary_even .plusExtrait {border:solid 1px #D8D7D7}

.article_summary_odd .plusExtrait {border:solid 1px #D8D7D7}

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