(OverBlog) Modifier les résumés d'Articles

Pour afficher vos articles sous forme de résumés, vous devez vous rendre dans Configurer > petit marteau en haut à droite de l'article.

Nous allons modifier le design de ces extraits : police, puces, background et encadrements.

Vous devez vous rendre dans votre (ou vos) CSS : Design > Mode CSS
Lorsque la ligne n'existe pas, vous la créez ; lorsqu'elle existe, vous la complétez.

MODIFICATION DES POLICES

La date

.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

.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

.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

.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

.plusExtrait .linkTopic {text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
.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

.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

.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

.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é

.plusExtrait .community{text-align : center ; color : red ; font-weight : bold ; text-decoration : underline ; font-size : 20px ; font-style : italic ; font-family : Comic Sans MS ;}
.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

.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

.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

.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

.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

.extraits {border:solid 1px #D8D7D7}

Pour encadrer le titre de l'extrait

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

Pour encadrer l'extrait

.extrait {border:solid 1px #D8D7D7}

Pour encadrer la zone en fin d'extrait

.plusExtrait {border:solid 1px #D8D7D7}

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