Eléments CSS d'over-blog (Partie 1)

Publié le par Francisek

Introduction

L'objet de cet article est deréférencer tous les identifiants utilisés dans over-blog afin de vousaider à personnaliser votre blog.

Pour modifier le style d'un module en particulier, il faut définir dans le CSS un sélecteur basé sur l'identifiant du module.
Ce type de sélecteur commence toujours par un # suivi de l'identifiant de l'élément HTML, celui-ci correspond à l'attribut id en HTML.
Ainsi, si dans ma page j'ai un élément

id="monElement">Blabla
, son identifiant est monElement et je pourrai modifier son style dans le CSS en créant une ligne #monElement { color: rgb(255, 0, 153); }.

 

Les selecteurs CSS basés sur des identifiants HTML d'over-blog

Pour les modules :


Nom du moduleIdentifiantSélecteur CSS
Album photos Album #Album
Archives Archive #Archive
Articles récents ArticleRecent #ArticleRecent
Calendrier Calendrier #Calendrier
Catégories Categorie #Categorie
Commentaires CommentRecent #CommentRecent
 Image Aléatoire
aleaIm  #aleaIm
Liens Lien #Lien
Newsletter Newsletter #Newsletter
 Presentation Presentation  #Presentation 
Recherche Recherche #Recherche
Texte libre (droite) RightPart #RightPart
Texte libre (gauche) LeftPart #LeftPart
W3C W3C #Syndication

 

Pour les éléments de la page (modèles 1, 2 et 3 uniquement) :

 

ElementElément parentIdentifiantSélecteur CSS
Page complète *
Body main1 (2 colonnes)
main2 (1 colonne à droite)
main3 (1 colonne à gauche)
#main1
#main2
#main3
Tableau contenant les éléments (modèles 1 -2 - 3) * main1, main2 ou main3 MainTab #MainTab
Entête *
MainTab * top #top
Colonne de gauche
MainTab * leftnav #leftnav
Colonne de droite MainTab * rightnav #rightnav
Colonne principale (articles, album photo MainTab * content #content
Article
Liste des articles d'une catégorie
content article .article
Date de l'article article Date .Date
Ligne Posté par, Commentaires, Trackbacks, Recommander article Option .Option
Adresse de trackback content addTrackback #addTrackback
Block Commentaires et trackbacks content comment #comment
Texte d'un commentaire comment commentMessage .commentMessage
Informations sur l'auteur du commentaire comment commentOption .commentOption
Photo dans la visionneuse - photo #photo


Prochainement, nous verrons les principales classes CSS utilisées.
Mises à jour : 03/03/2006 : W3C devient Syndication - 28/04/2005

Publié dans CSS et Design

Commenter cet article

Kin 30/07/2006 15:00

Re bonjour

j'ai effectué les changements que tu m'as dit , mais lorsque je met le CSS "validé" , mon blog ne ressemble plus du tout à ce qu'il était avant o_o? , et même en débarassant le miens des lignes erronées , celà ne fonctionne pas ..

Merci encore pour ton aide

Francisek 30/07/2006 21:24

 Ton CSS n'est toujours pas valide. Tant que tu auras des erreurs de syntaxe, la suite de ton CSS ne pourra être prise en compte.

Kin' 29/07/2006 14:04

Bonjour Francisek , et oui encore moi :p

je désirerai mettre des espaces comme l'image ci-dessous http://img100.imageshack.us/my.php?image=blogcopiewp8.gif

J'ai bidouiller mon CSS dans tout les sens sans succès :/

/*mie en forme des articles*/

.Option { margin-top:5px; }
.Date { margin:5px; }

Merci beaucoup !

Francisek 29/07/2006 23:31

 En corrigeant les erreurs de ton CSS, la fin du fichier devrait être prise en compte et tes espacements aussi.

catbaz 07/02/2006 16:18

Bonjour, tu m'as été déjà d'un grand secours pour du texte déroulant mais n'étant pas douée en informatique, j'aimerais avoir mon fond bleu marine et mes colonnes latérales rouges. Que dois-je faire ? j'ai vraiment peur de me planter merci beaucoup

Francisek 07/02/2006 18:31

 Pour les colonnes rouges et le centre bleu, le mieu est encore d'utiliser une image de fond et de l'appliquer dans #MainTab en lui donnant la largeur de l'image (comment ça elle n'est pas claire mon explication ?).

khalia 20/01/2006 19:00

bonjour et big bisous pour tes précieux conseils. Un ange, un génie tu es, si si ! Mais comment je fais pour vérifier que je n'ai pas fait de sottises dans mon css, je crois que j'ai changé des trucs qu'il ne fallait pas...

Francisek 20/01/2006 23:02

 Tu peux vérifier que ton CSS répond aux normes du W3C en utilisant leur validateur : (ici pour ton CSS) et constater qu'il est valide. Ca c'est pour le coté syntaxique. Pour le coté conceptuel, il te "suffit" d'ouvrir les différents écrans de ton blog sur divers navigateurs.

Swordman 13/01/2006 20:18

Je me posais juste une question: j'ai le bon code pour afficher un arrière plan fixe, mais j'ai l'impression qu'over-blog réduit considérablement la taille des images up-ées, je les up dans Mes photos. Est-ce que le répertoire serait le mauvais?

Francisek 14/01/2006 22:01

 Attention à ne pas confondre les miniatures avec les images associées dans les url de fond (les images taille réélle n'ont pas le mot thumbs dans leur url). D'autre part en confiance, les images sont optimisées d'office et leur taille réduite.