Les classes d'OverBlog 2/2

Voici la deuxième partie de mon article un peu long sur les classes d'OverBlog. Après avoir expliqué le principe et fonctionnement, ainsi que le lien avec le CSS, voici le moment tant attendu de lister les classes Obiennes ! (mon Dieu que ça va être long )

III - Les classes obiennes, en rang 2 par 2 !

Plan de ce chapitre :

A - Structure globale
B - Articles
C - Commentaires
D - Pages
E - Modules
F - Résumés d'articles
G - La liste d'articles
H - Pagination
I - Formulaire d'ajout de commentaires

---

A - Structure globale

#global	L'ensemble du contenu de votre blog. (attention ! La barre #legals n'est pas prise dedans !)
#header	l'en-tête
#top	l'en-tête
.ln	.ln est répété 3 fois dans le blog. Il découpe en fait le #global en trois. Chaque partie correspond respectivement à l'en-tête (#ln_0), le corps du blog (#ln_1) et le pied de page (#ln_2)
#ln_0 #ln_1 #ln_2	ces trois classes comme dit dans l'article précédent identifie les parties du blog (explication juste au-dessus)
.cl	.cl a un peu le même fonctionnement que .ln, mais est imbriqué dans celui-ci. Il est répété lui aussi plusieurs fois (voir plus bas)
#cl_0_0	l'en-tête
#cl_1_0	Les trois classes suivantes désignent le corps du blog. Celle-ci correspond à la colonne la plus à gauche.
#cl_1_1	la colonne du milieu (lorsqu'il n'y a que deux colonnes, c'est la colonne de droite)
#cl_1_2	la colonne la plus à droite(lorsqu'il y a trois colonnes !)
#cl_2_0	le pied de page
#footer	le pied de page

"Mais pourquoi y a-t-il autant de classes pour l'en-tête et le pied de page ??"

Dans l'article précédent, je vous ai montré que les classes étaient imbriquées les unes dans les autres comme un jeu de légo. En fait, un Overblog ressemble à ceci :




Mon schéma est peut-être moche, mais il résume tout ce qu'il faut savoir sur la structure de votre blog. Tout n'est finalement que cube et imbrication !
Vous avez peut-être compris le système des #cl et #ln, sinon je vais essayer de vous expliquer avec ce tableau :



Ainsi, on peut voir ici que le premier chiffre correspond à la ligne, et le deuxième à la colonne (attention ! On commence par 0 et non par 1 !) Petite précision, vu que l'en-tête et le pied de page ne sont pas découpés en colonne, on prend la valeur 0 pour la colonne.

Haut de Page

---

B - Articles

.articles	Le bloc regroupant tous les articles ainsi que la pagination par exemple.
.article	L'article en entier regroupant titre/date/contenu/etc.
.beforeArticle	Le bloc au-dessus du contenu de l'article (celui qui contient la date la plupart du temps)
.date	la date
.divTitreArticle	Le bloc contenant le titre de l'article
.titreArticle	Le titre de l'article en lui-même
.contenuArticle	Le contenu de l'article. C'est en fait l'article que vous écrivez dans l'éditeur.
.afterArticle	Le bloc en dessous du contenu de l'article (celui qui contient l'ajout de commentaire ainsi que la catégorie la plupart du temps)
.publishedBy	La partie "Publié par [...]"
.topic .linkTopic	La partie "Publié dans [...]" Le lien de la catégorie dans cette même partie
.linkComment	La partie "Voir les commentaires"
.linkAddComment	La partie "Ecrire un commentaire"
.linkRecommend .facebook	Le lien "Recommander" L'icône Facebook
.separator	Le tiret entre les différentes parties comme entre "Voir les commentaires" et "Ecrire un commentaire"
.article_navigation	Le bloc regroupant les trois classes ci-dessous.
.previousArticle a	Lien de l'article "Précédent"
.linkAllArticles a	Lien "Retour à l'accueil"
.nextArticle a	Lien de l'article "Suivant"

Si vous avez à peu près compris jusque là, vous avez compris que ce schéma s'insère dans une des colonnes #cl_1_X. Tout dépend de de la structure de votre blog : avec un blog à une colonne dur la gauche, ce schéma correspond à la partie #cl_1_1.

Haut de Page

---

C - Commentaires

.h2CommentMessage	Le titre "Commentaire"
.commentsList	Le bloc regroupant tous les commentaires et réponses.
.commentMessage	Les commentaires (attention, les changements ici s'applique aussi aux réponses !)
.commentOption	Les informations sous les commentaires (attention, les changements ici s'applique aussi aux informations des  réponses !)
.newWindow	Le site web du commentateur
.reponseMessage .responseMessage	Les réponses aux commentaires. Les deux marchent de la même façon, à choisir donc.
.reponseOption .responseOption	Les informations sous les réponses. Pareil : les deux marchent de la même façon.
.afterReactions	Bloc en dessous de l'ensemble des commentaires.

J'ai simplifié ici un peu le schéma : les .reponseMessage et .reponseOption devrait se trouver respectivement dans des  cadres .commentMessage et .commentOption. Mais si vous comprenez le schéma, c'est l'essentiel : ne retenez que ça !
Juste une chose : j'ai utilisé sur le schéma des .reponseXXX, vous pouvez évidemment mettre la version anglaise comme indiqué dans le tableau, de la forme .responseXXX.

Haut de Page

---

D - Pages

.pages	La page en entière regroupant le titre et le contenu.
.beforePage	Le bloc au-dessus du contenu du blog (généralement vide)
.divPageTitle .divPageTitle h2	Le bloc contenant le titre de la page Le titre de la page en lui-même
.pageContent	Le contenu de la page (ce que vous écrivez dans l'éditeur)
.afterPage	Le bloc sous le contenu du blog (généralement vide)

Pas grand chose à dire ici : même fonctionnement que pour les articles. La seule chose ici, comme dit dans le tableau : le .beforePage et le .afterPage sont généralement vide, donc une modification là-dedans ne se verra pas... sauf si vous faites comme moi pour mes pages, mais ça je ne vous l'expliquerais pas ici.

Haut de Page

---

E - Modules

.box	Le module entier regroupant le titre et le contenu.
.box0 .box1 .box2 ...	Chaque module possède un chiffre qui lui est associé (0, 1, 2, etc.) Attention, comme montré ici, le compte commence à 0 ! On compte de haut en bas.
.box-titre	Le titre du module
.box-content	Le contenu du module
.box-footer	Le pied du module
Les différents modules
.articlerecent .listAll em	Le module des articles récents Le lien "liste complète"
.commentrecent	Les module des commentaires récents
.pages	Le module de la liste des pages
.profil	Le module du profil
.presentation	La présentation du blog
.lien	Le module des liens
.archive	Le module des archives
.categorie	La liste des catégories
.album	Le module "Album photo"
.aleaim	Le module des images aléatoires
.community	Le module de vos catégories
.calendrier	Le calendrier
.newsletter	Le module d'inscription à la newsletter
.recommander	Le module pour recommander votre blog
.recherche	Le modue de recherche
.concours	Le module "Créer un blog sur OverBlog"
.w3c	Le module "syndication" (qui vous donne le fil rss de vos articles)
.text	Les modules "texte-libre"

Ici j'ai rajouté la classe .column_content. Je ne vous conseille pas forcément de l'utiliser. Si je l'ai mise ici c'est seulement pour vous montrer qu'elle existe. En fait elle est répétée plusieurs fois sur les blogs (une fois pour chaque colonne) et on arrive très vite à faire des bêtises si on l'utilise (ça sent le vécu )
Deuxième chose : les classes telles que .calendrier ou .presentation se loge dans les cases rouges sur le schéma.
Et dernière chose, les blocs .box-footer sont vides normalement, mais permettent de rajouter des petits effets en bas des modules. Ils permettent aussi de laisser une marge entre les différents modules.

Haut de Page

---

F - Résumés d'articles

.extraitArticle	Le bloc contenant la date, l'extrait de l'articles ainsi que les informations supplémentaires
.article_summary_even .article_summary_odd	Les blocs .extraitArticle s'alternent : ces deux classes servent à les distinguer (ce sera plus clair sur le schéma)
#extraitArticle1 #extraitArticle2 #extraitArticle3 ...	Chaque bloc .extraitArticle peuvent s'identifier indépendemment grâce à leur id. Attention ! Ici le décompte débute à 1 et non à 0 ! (contrairement aux .box)
.dateExtrait .date	Le bloc contenant la date de l'extrait. La date de l'extrait (attention, on retrouve cette classe pour les articles !)
.infoExtrait .titreExtrait	Le bloc contenant le titre de l'extrait. Le titre de l'extrait.
.hrExtrait	La barre horizontale entre le titre et l'extrait.
.extrait	L'extrait de l'article en lui-même.
.plusExtrait	Bloc contenant l'ajout de commentaires, leur lecture, etc. Correspond au bloc .afterArticle des articles.

Quelques petites chose importantes donc ici.
J'ai placé les résumés dans le bloc .articles (avec un "s") car c'est dans ce bloc qu'on les retrouve, mais sachez que vous n'avez pas forcément besoin de l'utiliser.
Je n'ai pas mis ce que vous pouvez trouver dans le bloc .plusExtrait puisque c'est exactement ce que vous pouvez trouver dans .afterArticle.
Pour le deuxième bloc rouge, son contenu est exactement le même que dans le premier, mais je ne voulais pas encombrer mon schéma. La différence ici se trouve au niveau du .article_summary_odd qui remplace donc le .article_summary_even. Ces deux classes s'alternent, nous avons donc .article_summary_even | .article_summary_odd | .article_summary_even | .article_summary_odd | etc.
Quant au #extraitArticle1 et #extraitArticle2, c'est seulement qu'on les compte un par un. Par contre, contrairement à ce qu'on a pu voir plus haut avec les .box, le décompte se fait à partir de 1 et non de 0 !

Haut de Page

---

G - Liste d'articles

.listArticles	Le bloc contenant le résumé de l'article ainsi que les informations relatives à celui-ci
.article_item_even .article_item_odd	Les blocs .listArticles s'alternent : ces deux classes servent à les distinguer. C'est le même principe que pour .article_summary_even et .article_summary_odd.
.listArticles a	Le titre du résumé d'article
.DateList	La date du résumé de l'article
.categorieArticle	La catégorie du résumé de l'article
.resumeArticle	Le résumé de l'article en lui-même

Je ne pense pas à avoir à plus expliquer ici : c'est le même fonctionnement que pour les résumés d'articles.

Haut de Page

---

H - Pagination

.before_articles	Le bloc contenant la pagination avant les articles (n'oubliez pas le "s" !)
.after_articles	Le bloc contenant la pagination après les articles (n'oubliez pas le "s" !)
.pagination	Le bloc pagination en lui-même
.textFirst	Le lien "début"
.textPrevious	Le lien "précédent"
.previousPage	Les liens "1 2 3 4 etc."
.currentPage	Correspond à la page sur laquelle vous êtes.
.textNext	Le lien "suivant"
.textLast	Le lien "fin"

A savoir que la classe .previousPage peut se répéter jusqu'à 9 fois tandis que les autres n'apparaissent qu'une seule fois. Le contenu de .after_articles est le même que celui .before_articles évidemment.

Haut de Page

---

I - Formulaire d'ajout de commentaires

Attention ! Cette partie est plus compliquée que les précédentes ! En effet, les formulaires d'ajout de commentaires ne sont pas prévu pourêtre modifiés !

.diablog	La fenêtre d'ajout de commentaires
.ob_form	Le cadre principal qui contient toutes les données sauf le titre et les boutons
.buttons	Le cadre contenant les boutons
.title	Le titre du module
.diablog label	Les informations : "Votre nom :", "Votre e-mail :" et "Votre site :"
.w100prct	Les cadres où vous devez mettre vos informations (sauf le cadre où vous mettez le commentaire)
.inline	Les différentes informations comme "Rédigez ici votre commentaire"
.mceToolbar	La barre d'outil de l'éditeur de texte
.diablog textarea	La case où vous écrivez votre commentaire
.diablog p	Le paragraphe indiquant que vous êtes responsable du contenu de votre commentaire
.diablog em	L'information "Visible uniquement par l'auteur du blog"

J'ai essayé de développer le plus possible ce schéma en répétant autant de fois que possible les classes... autant de fois qu'elles le sont en réalité. Cependant il se peut que certaines choses aient été oubliées vu que les formulaires ne sont pas les trucs les plus faciles à modifier ! J'espère que vous saurez vous débrouiller avec ceci. Vous pouvez sinon aller sur le blog de Francis (le lien est en bas de l'article) puisque c'est chez lui que j'ai récupéré les classes. J'ai juste essayé de simplifier au maximum.
(ATTENTION ! Du fait que j'ai simplifié un maximum, peut-être certaines choses ne fonctionneront pas correctement. Je vais essayer tout de suite ces classes... si tout est fonctionnel je pourrais enlever ce message ^^)

Haut de Page

---

Et bien voilà... Je crois que j'ai fait le tour des classes les plus utilisées sur OverBlog... et non ! Toutes ne sont pas référencées ici (je vous laisse imaginer le nombres ) Et attention ! Il reste encore des classes importantes que je n'ai pas référencées. Il s'agit en fait de celles qui sont incorporées dans le HTML et qui n'ont besoin ni de point "." ni de dièse "#" pour les précéder. Si vous voulez une liste, rendez-vous ici.

"Mais tu nous dit qu'il existe d'autres classes sur OverBlog mais tu nous les donne pas... Et comment on fait si on en a besoin un jour ?"

Ça c'est le petit bonus pour les motivés... Bon déjà premièrement, vous allez me virer Internet Explorer si vous le possédez, et vous adoptez immédiatement Mozilla Firefox comme navigateur Internet par défaut (c'est gratuit et bien mieux, pourquoi se priver ??)
Ceci étant fait, vous installez la web-dev. Voilà... Maintenant, appuyez sur les touches ctrl, shift (la touche au dessus de ctrl) et F en même temps, visez l'endroit que vous cherchez, cliquez... et pouf ! Vous avez dans une fenêtre toutes les informations que vous recherchez. Sachez aussi que la web-dev permet bien plus de choses que ça, mais je vous laisse la découvrir.
Maintenant pour ceux qui ne veulent pas installer la web-dev, il suffit de rechercher dans le code source (ctrl+U) les balises de la forme <div class="XXX"> Mais ça peut vite devenir fastidieux si on n'est pas habitué. Personnellement j'utilise les deux méthodes qui se complètent.

Et bien... je crois que je peux vous laisser là. Je ne pensais pas en écrire autant en me lançant dans cet article, mais expliquer comment fonctionne les classes est une chose importante à mes yeux pour comprendre ce que l'on fait. Évidemment mon article/cours n'est pas complet et il manque sans doute beaucoup de choses, mais je pense avoir été clair. Si ce n'est pas le cas, n'hésitez pas à poser vos questions en commentaires !

FIN

Sources :
Le blog de Titia
Le blog de Cln
Le blog de Francis
Le site du zéro
schémas faits sous The Gimp