Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
27 novembre 2010 6 27 /11 /novembre /2010 03:00

Tout ce qu'on peut trouver "au centre" de la cellule des articles étudiée dans l'article précédent : La cellule des articles.

[1] Infos générales - Haut et bas de page

[2] La cellule des articles

[3] Articles et quasi-articles

  1. Article - cas général
  2. Résumé d'article
  3. Extrait d'article (200 caractères)
  4. Article d'accueil
  5. OB-page

[4] Annexes des articles

[5] Modules

[6] Diablogs

Sur les formes abrégées d'articles le vocabulaire d'OB est fluctuant, mêlant les termes 'résumé', 'summary' et 'extrait' dans les classes et les identifiants. Je me suis efforcé de rester cohérent : ici, 'résumé' désigne ce qu'on obtient en cochant une certaine case dans la config du module 'articles' (=nombre de caractères réglable, vignette de la première photo de l'article) et 'extrait' ce qu'on trouve dans la liste complète des articles (=200 premiers caractères, jamais de vignette).

Article - cas général

divarticle
Article. Son identifiant dépend du contexte :
cas général : articleN indique son ordre.
page de l'article : articleSeul
Porte aussi la classe article_even ou article_odd
divoption beforeArticle
Infos diverses, configurables dans l'admin (détails)
divdivTitreArticle
Emballage du titre d'article
h2
Emballage intermédiaire
atitreArticle
Le titre, avec lien vers l'URL de l'article
divcontenuArticle
Le texte de l'article
tout et rien
Le texte écrit par vous
divclear
Assure que le contenuArticle se termine en-dessous des flottants.
divclear
Protection contre les flottants.
divsocialShare
Liens de réseaux sociaux, configurables dans l'admin (détails)
divclear
Protection contre les flottants, uniquement avec un article seul.
divsocialPopup
Fenêtre de partage, configurable dans l'admin (détails), uniquement avec un article seul.
divclear
Protection contre les flottants.
divoption afterArticle
Infos diverses, configurables dans l'admin (détails)
divarticle_navigation
Bandeau précédent/accueil/suivant (détails), uniquement avec un article seul.
Trois choses ne figurent que dans le cas "article seul" (avec ou sans ses comms) :
  • un div.clear de protection,
  • le div.socialPopup = le petit popin de partage
  • le div.article_navigation = le bandeau précédent/accueil/suivant.
Ces trois éléments figurent DANS le div.article, autour du bandeau div.option afterArticle.
Mise à jour avril 2012 : ajout de socialShare et socialPopup.

Résumé d'article

divextraitArticle
Résumé d'article. Son identifiant extraitArticleN indique son ordre.
Porte aussi la classe article_summary_even ou article_summary_odd
divdateExtrait
Infos complémentaires, équivaut à option beforeArticle (détails)
divinfoExtrait
Titre de l'article, équivaut à divTitreArticle
spantitreExtrait
Emballage
atitreExtrait
Lien vers l'article. Attention : même classe que le span !
hrhrExtrait
Trait horizontal
divextrait
Le résumé lui-même
a
Lien vers l'article via une image cliquable. Absent si pas de photo dans l'article.
imgimgExtraitCon
Vignette 150x150 pixels de la 1ère photo de l'article
br
Retour à la ligne (le seul dans l'extrait)
pas de balise
Texte du résumé (longueur réglable dans l'admin)
a
texte "[...]" : lien vers l'article.
divclear
Assure que le extrait se termine en-dessous des flottants.
divclear
Protection contre les flottants.
divsocialShare
Liens de réseaux sociaux, configurables dans l'admin (détails)
divclear
Protection contre les flottants.
divplusExtrait
Infos complémentaires, équivaut à option afterArticle (détails)
Attention à la terminologie !
  • L'admin OB ne parle que de 'résumé' d'article alors que les noms des classes mêlent 'extrait' et 'résumé' (summary)
  • dateExtrait et plusExtrait, malgré leurs noms, contiennent la même chose que beforeArticle et afterArticle, respectivement.
Mise à jour avril 2012 : ajout de socialShare.

Extrait d'article (200 caractères)

lilistArticles
Extrait
Porte aussi la classe article_item_even ou article_item_odd
a
Titre de l'article, lien vers l'article
pas de balise
texte "("
spanDateListe
Date de l'article, au format jj/mm/aaaa (format imposé)
spancategorieArticle
Catégorie de l'article
pas de balise
texte "publié dans"
a
Lien vers la catégorie
pas de balise
texte ")"
br
Saut de ligne
divresumeArticle
Début du texte de l'article
pas de balise
200 premiers caractères (nombre imposé)
a
texte "(...)" : lien vers l'article
divclear
Assure que le resumeArticle se termine en-dessous des flottants.
  • Un extrait d'article ne porte pas d'identifiant.
  • Le peu de classes indiquées rend délicate la construction des sélecteurs CSS, c'est pourquoi j'ai détaillé tous les éléments.
  • Attention à la terminologie ! L'admin OB ne parle ici ni de 'résumé' ni d' 'extrait' alors que les noms des classes mêlent 'liste' et 'résumé'. Comprenne qui pourra.

Article d'accueil

divarticle articleAccueilarticleAccueil
Article d'accueil
Se place avant ou après les articles/résumés normaux
divdivTitreArticle
Emballage du titre d'article
h2
Le titre (qui n'est pas un lien)
divcontenuArticle
Le texte de l'article
tout et rien
Le texte écrit par vous
divclear
Assure que le contenu d'article se termine en-dessous des flottants éventuels.
divoption afterArticle
Présent mais vide
Cet article est construit comme un article normal, en plus simple. Particularités :
  • le titre n'est pas un lien
  • il n'y a qu'un seul des deux div.option, et il est vide. Pur auxiliaire de mise en page, donc.
  • impossible de laisser des commentaires.
  • cet article, selon les choix faits dans l'admin, se place au début ou à la fin du column_content de la cellule des articles
  • toujours selon les choix faits dans l'admin, il figure sur toutes les pages du blog (même les CGU !) ou seulement sur les pages d'accueil.

OB-page

divpage
La page
divbeforePage
Vide
divdivPageTitle
Emballage du titre de page
h2
Titre de la page
divpageContent
Le texte de la page
tout et rien
Le texte écrit par vous
divclear
Protection contre les flottants.
divsocialShare
Liens de réseaux sociaux, configurables dans l'admin (détails)
divclear
Protection contre les flottants.
divsocialPopup
Fenêtre de partage, configurables dans l'admin (détails).
divclear
Assure que le pageContent se termine en-dessous des flottants.
divafterPage
Vide
  • Structure similaire à celle d'un article seul, en beaucoup plus simple et avec d'autres noms de classes.
  • Mise à jour avril 2012 : ajout de socialShare et socialPopup.

Oublis, erreurs : merci de me les signaler en commentaire :-)

par Aïe mes doigts ! - dans Briques
commenter cet article

commentaires

Archives