Profil

  • Christelle
  • retrouvez-moi sur : http://www.awerpi.fr
  • retrouvez-moi sur : http://www.awerpi.fr

Photo.Graph

Catégories

30 janvier 2009 5 30 /01 /janvier /2009 14:00

Voici quelques précisions pour modifier l'apparence des articles de son blog en CSS chez Over-Blog...

 

 

 

Les généralités des articles :

#article

Et dans cette classe on y retrouve tout ce qui suit

 

Remarque : #articleSeul

C'est la même chose, mais seulement lorsque l'article est affiché tout seul (sans les autres articles) ou avec ses commentaires.

 

 

Tout l'article :

.article

 

 

Le haut des articles :

Ce qui contient tout le haut des articles (titre, date...)

.beforeArticle

 

L'apparence du texte du titre des articles :

.titreArticle

 

L'apparence du texte du titre des articles non survolé par la souris:

.titreArticle a

 

L'apparence du texte du titre des articles survolé par la souris:

.titreArticle a:hover

 

L'espace qui contient le titre de l'article

.divTitreArticle h2

 

La date

.date

 

 

Au milieu des articles :

Tout le corps des articles sans le haut (date, titre...) et sans le bas (ajout de commentaire, publié par...)

.contenuArticle

 

 

 

En bas des articles :

Toute la partie inférieure des articles qui contient l'auteur, le lien des commentaires...

.afterArticle

 

Les liens dans .afterArticle :

.afterArticle a

 

Les liens dans .afterArticle survolés par la souris :

.afterArticle a:hover

 

Publié par

.publishedBy

 

Publié dans (pour les catégories)

.topic

 

L'espace qui contient l'ajout de commentaire

.spanAddComment

 

Le texte de lien d'ajout de commentaire

.linkAddComment{}

 

Le texte de lien des commentaires

.linkComment{}

 

L'espace qui contient le nombre de commentaires (x) 

.spanLinkComment

 

L'espace qui contient le lien recommander

.spanRecommend

 

Le texte de lien pour recommander

.linkRecommend{}

 

Créer un trackback c'est inutile de le laisser, puisque Over-Blog a arrêté l'utilisation des trackbacks... je l'indique tout de même, on ne sait jamais !

.spanAddTrackback

 

Le lien des trackback :

.linkTrackback{}

 





Petits exemples pour la compréhesion : 
Je veux que la date de mes articles soit affichée en blanc, en arial, en 12px, soit alignée à droite...
.date {color:#FFFFFF; font-family:Arial; font-size:12px; text-align:right;}
 
Je veux que publié par ... soit écrit en rouge, en 16px et centré :
.publishedBy {color:#CC0000; font-size:16px; text-align:center;}

Je veux que mon titre d'article ait une image en fond :
.divTitreArticle
{background-image: url(http://adresseduneimage.gif);}

Partager cet article

Repost 0
Published by Christelle Vinsonneau - dans webdesign
commenter cet article

commentaires

Lise 24/01/2010 00:19


Bonsoir et félicitations pour ton blog qui est top !! Merci de cette aide "over-blogique"!

J'en profite pour te demander : comment enlever le texte "Commentaires" situé au dessus de la liste des commentaires ?

J'ai trifouillé comme je pouvais mais je n'ai pas réussi! Alors soit j'ai mal compris et mal appliqué.... ou n'est ce pas possible ?....

( Ou du moins si c'est vraiment impossible, de le déplacer car le "Commentaires" est collé, enfin juste au dessus, du premier commentaire...)

En tous cas, merci pour ce que tu fais !!!


Christelle Vinsonneau 31/01/2010 12:12



Si tu veux enlever "commentaires" tu ajoutes ça à la fin de ton cade CSS :


.h2commentMessage {display none;}


 


Si tu veux le modifier, du moins mettre une marge avant les commentaires qui suivent, tu mets ça : (remplace30px par la valeur de ton choix)


.h2commentMessage {margin-bottom:30px;}


 


 


 



dissertation proposal 24/08/2009 06:40

Blogs are so informative where we get lots of information on any topic. Nice job keep it up!!

Christelle Vinsonneau 24/08/2009 09:25


again ?


Nat 10/08/2009 19:38

génial, merci
cela fait un moment que je cherchais ça
connais tu la syntaxe pour changer : publier dans (pour les communautés) ?
il me reste maintenant à inserer des séparations en fin d'article , sais tu dans quelle direction chercher ? s'agit il des modules a personnamiser ?
quoi qu'il en soit, merci pour cet article
bonne journée
nat

Christelle Vinsonneau 24/08/2009 09:00


il faut que tu ajoutes ou que tu modifies : .linkTopic {}


loukass 10/06/2009 11:25

j'ai réussi a faire exactement comme je voulais, cependant une partie resiste : en article seul : en dessous des commentaire, je n'arrive pas a trouver la syntaxe pour changer le fond pour les lien article précédent suivant ect...

Christelle Vinsonneau 10/06/2009 15:10


Je pense que tu sauras trouver ce que tu cherches dans cet article : http://photo.graph.over-blog.com/article-32073752.html



luna 07/02/2009 13:57

merci christelle
pour l'instant j'ai enlevé l'album sur mon blog car de toutes facons meme avant je n'aimais guére leur présentation....avant de passer en mode classique je voudrais essayer de trouver comment changer la couleur de police a l'intérieur des modules ( oui tjs le meme probléme sourire ..) je vais lire tous tes articles je trouverais surement la soluce.....ravie d'apprendre que les albums vont changé je vais d'ailleurs revoir le lien que tu m'a mis

Christelle Vinsonneau 07/02/2009 15:35


Je ne peux que te conseiller de passer en classique avant de faire tes modifications... car au lieu de devoir trouver quoi modifier dans tous les onglets (global, accueil, article, page...), tu t'y
retouveras vraiment plus facilement si tu fais les modifications uniquement en global comme le permet le mode classique.
M'enfin, moi je dis ça... tu fais comme bon te semble !