Préambule
Le layout intègre 6 entités logiques de contenu et structure le html à sa guise.
Les 6 entités sont nommées ici selon la convention ci-dessous, eu égard à leur contenu réel et sans préjuger de la dénomination et de la structure englobante définie par le thème :
- entête fournit la présentation de la page et d’identité
- barre-nav constitue la navigation principale du site - peut être vide
- contenu contient l’information principale de la page
- navigation fournit des éléments de navigation secondaires
- extra fournit des éléments d’information connexes
- pied fournit des éléments de repérages et de rappels secondaires
body
L’élément body porte une ou deux classes distinctives :
- La première correspondant au type de la page préfixé de
page_
:- pour des objets de SPIP (de type rubrique.html, article.html, site.html ..) cela donne
page_rubrique
,page_article
,page_site
- pour les autres pages cela donne toujours
page_page
- pour des objets de SPIP (de type rubrique.html, article.html, site.html ..) cela donne
- La seconde classe correspond à la variante préfixée du type de page
- à la composition pour les objets de SPIP, préfixée par le type de l’objet (
article_album
par exemple) - au nom de la page pour les autres pages, préfixé par
page_
(page_plan
par exemple)
- à la composition pour les objets de SPIP, préfixée par le type de l’objet (
Exemples :
- sur la page sommaire
body
a les classespage_page page_sommaire
- sur une page rubrique
body
a la classepage_rubrique
- sur une page article avec la composition portfolio
body
a les classespage_article article_portfolio
Il est ainsi possible de cibler certaines familles de page pour leur appliquer une mise en forme différente.
entête
Un lien bloc avec la classe .accueil
contenant
- le logo éventuel avec la classe
.spip_logos
, encadré par un élément<a>
- le nom du site dans un identifiant
#nom_site_spip
, qui peut être porté par toute balise. Il appartient au thème de fixer si il doit se comporter comme unblock
ou comme uninline
qui peut contenir un élémenta
- le slogan du site dans un élément avec l’identifiant
#slogan_site_spip
L’entête peut aussi contenir le formulaire de changement de langue, répéré par la classe .formulaire_menu_lang
, qui n’apparaitra que sur les sites multilingues.
barre-nav
Si elle est non vide, elle est structurée d’éléments imbriqués selon les règles suivantes :
- élément englobant avec la classe
.menu-conteneur
- qui encadrent un ou plusieurs éléments
.menu-entree
-
.menu-liste
contient exclusivement des éléments de la classe.menu-entree
-
.menu-entree
doit être dans un élément.menu-liste
-
.menu-entree
contient un unique élémenta
-
.menu-entree
peut contenir un unique élément.sep
contenant un séparateur textuel -
.menu-entree
peut contenir des sous groupes.menu-liste
Cette convention permet par exemple une navigation hiérarchisée de type ul.menu-liste
et li.menu-entree
à un ou plusieurs niveau ou une navigation plate constituée d’une suite de liens.
Le thème devra prendre en charge au moins l’affichage du premier niveau de navigation
le thème pourra prendre en charge l’affichage d’un éventuel menu déroulant à 1 ou plusieurs niveaux si le squelette les fournit.
contenu
Contient les éléments suivants :
-
#hierarchie
pour le fil d’ariane. Il contient :- des liens
<a>
- des éléments séparateurs
.sep
- un élément en exergue
.on
- des liens
- un cartouche de présentation, repéré par la classe
.cartouche
, qui contient- le titre
.titre
- le logo
.spip_logos
- le surtitre
.surtitre
- le sous-titre
.soustitre
- la liste des traductions
.traductions
- les informations de publication
.info-publi
contenant- la date de publication
.published
- la liste des auteurs
.auteurs
séparés éventuellement par des éléments.sep
- une date de publication antérieure
.past-published
- la date de publication
- le titre
- une introduction
.introduction
- un descriptif
.descriptif
- un chapo
.chapo
- un texte
.texte
- un lien
.hyperlien
- un PS
.ps
- des notes
.notes
L’ensemble du contenu principal de chaque page est encadré par un élément de classe .contenu-principal
.
Portfolios :
.documents_portfolio (classe et pas id car il pourrait y en avoir plusieurs)
Forums :
garder la structure de la dist ?
- des info complémentaires de publication dans un conteneur de classe
.meta-publi
, contenant :- un lien « Lire la suite de ... », portant la classe
.lire-la-suite
- un nombre de commentaires, dans une classe
.nb_commentaires
- une date antérieure de publication dans une classe
.date-redac
- un lien « Lire la suite de ... », portant la classe
navigation
Peut contenir
- une navigation de second niveau, structurée comme barre-nav, par
.menu-liste
,.menu-entree
,.sep
et<a>
- Le formulaire de recherche repéré par la classe
.formulaire_recherche
.
Les thèmes qui voudront le placer visuellement dans le bandeau supérieur procèderont par un positionnement absolu - des intertitres
.h1
,.h2
,.h3
,.h4
,.h5
,.h6
- des listes d’items
extra
Peut contenir tout type d’élément.
pied
Aucun élément spécifique au pied n’est défini à ce jour.
Éléments généraux
Les intertitrages
Les intertitres sont repérés par les classes .h1
, .h2
, .h3
, .h4
, .h5
, .h6
Les paginations
Les pagination sont identifiées par la classe .pagination
, qui contient des éléments <a>
, un élément .on
et un séparateur .separateur
Les listes d’items
(liste d’articles, de brèves, de rubriques ...). Les listes items sont constituées d’un élément parent portant la classe .liste-items
qui regroupe des items avec la classe .item
.
La liste peut être dans un élément bloc englobant .liste
qui regroupera aussi un titre, une pagination ...
Les formulaires
Selon la convention décrite dans http://www.spip.net/fr_article3791.html
Les tableaux de données
Les tableaux de données sont générés par les raccourcis typographiques de SPIP, et utilisent la structure suivante :
<table class='spip'>
<caption>...</caption>
<thead>
<tr class='row_first'>
<th>..</th><th>..</th>
</tr>
</thead>
<tbody>
<tr class='row_even'>
<td>..</td><td>..</td>
</tr>
<tr class='row_odd'>
<td>..</td><td>..</td>
</tr>
</tbody>
</table>
Les liens
Les liens peuvent porter plusieurs classes :
-
.spip_note
pour les liens vers des notes de bas de page -
.spip_ancre
pour des liens internes à la page -
.spip_in
pour des liens internes -
.spip_out
pour des liens sortants -
.spip_url
pour les liens sans texte autre que l’url elle-même -
.spip_glossaire
pour les liens vers une encyclopédie
Les documents
Les documents sont encapsulés dans un conteneur portant la classe .spip_documents
.
Lorsqu’un alignement est précisé, il se retrouve sur une classe supplémentaire .spip_documents_left
, .spip_documents_center
, .spip_documents_right
.
Le document contient toujours une balise <img>
, qui référence l’image, une miniature, ou un logo représentant le type du document. Elle peut être incluse dans un lien <a>
.
Un titre et un descriptif peuvent accompagner l’image, portant les classes .spip_doc_titre
et .spip_doc_descriptif
Les pétitions
Les signatures des pétitions sont présentées dans une structure en table qui reprend les nommages des tableaux de données décrits ci-dessus. Elle est donc directement stylées par le thème sans nécessiter d’habillage supplémentaire.
Il est néanmoins possible d’affiner l’habillage au moyen des sélecteurs présents sur chaque cellule de la table qui permet de distinguer les différentes informations.
Autres éléments générés par les raccourcis typogaphiques
(cf spip_styles.css)
-
.spip_code
pour présenter du code inline -
.spip_cadre
pour afficher un bloc de code -
acronym
etabbr
-
blockquote.spip
pour une citation -
blockquote.spip_poesie
pour afficher des vers -
hr.spip
pour une ligne de séparation
Divers
Des éléments utilisés conventionnellement dans les squelettes, ils sont également stylés par défaut par spip_styles.css
-
.spip_surligne
sert à indiquer les mots recherchés présents dans une page -
.nettoyeur
sert à faire un clear après des blocs flottants -
.invisible
est utilisée pour masquer des éléments à l’affichage.
Discussions par date d’activité
6 discussions
Bonjour,
Qu’a voulu dire Cédric à propos du formulaire de recherche dans le paragraphe Navigation ci-dessus par :
Dans un thème il y a deux fichiers principaux :
body.html et habillage.css
Dans lequel des deux fichiers faut-il écrire du code, et de quelle façon ?
Merci soit de votre éclairage, soit d’un lien vers la bonne explication.
Répondre à ce message
Bonjour,
Vous le comprendrez en lisant ce message, je ne suis pas expert en développement web, pour autant j’utilise zpip avec passion pour créer un site, et j’aimerai qu’une âme charitable m’explique le fonctionnement de cet appel de classe, car je n’ai pas trouvé d’explications dans mes docs sur html ou css,
div class=« comment-message forum-message » dans forum.html
Il y a deux classes de mentionnées, « comment-message » et « forum-message » est-ce que la première classe « comment-message » est la classe par défaut et deuxième « forum-message » est une classe de substitution ?
Mon problème : je souhaite arranger le thème Mercurable au niveau des forums, ce thème utilise « comment-message », mais l’habillage ne me convient pas. Par contre certains thèmes utilisent la seconde classe « forum-message » avec des encadrements hiérarchiques bien plus lisibles.
Me faut-il supprimer tout ce qui concerne « content-message » dans habillage.css du thème Mercurable et le remplacer par tout ce qui concerne « forum-message » à partir d’une autre feuille habillage.css ?
Merci, hoss.
Répondre à ce message
Merci pour cet article.
Si je peu me permettre, j’ai du mal à saisir la section body. Tu y parles des compositions ? Pourquoi y a-t-il pour certaines pages le préfixe page_ et pas pour d’autres ? Quel est le rapport entre la classe body et le nom des fichiers ?
En très gros, la plupart des objets éditoriaux de spip (articles, rubriques, ...) sont identifiés par
page_
. seules les compos diffèrent de ce schéma dans la mesure où il faut bien que l’on puisse identifier leur type et l’objet édito auxquels elles se raportent au premier coup d’oeil, doncarticle_truc
ourubrique_machin
, oùtruc
etmachin
sont les noms que tu auras donné à tes compos.C’est plus clair ?
Ca, c’est une règle dont je m’affranchis toujours, pour éviter de perdre trop de temps à renommer ce qui a déjà été fait à l’intégration pour l’adapter à SPIP+Z... Voici les problèmes récurrents :
- la convention pour la page d’accueil est plutôt « .home » et non « .page_sommaire ». J’utilise donc
[(#ENV{home}|oui) home]
sur la balise</body>
.- distinguer la nature des objets SPIP par des « .page_article », « .page_rubrique », etc. est inutile... Si nécessaire, mieux vaut plus simplement « .article » ou « .rubrique ». Cela est généré par
[ (#ENV{type}|=={page}|non)[(#ENV{type})]]
sur la balise</body>
, en prenant soin de tester pour empêcher d’afficher « page », qui est un sélecteur courrament utilisé par ailleurs.- préfixer les sélecteurs par « page_ » est trop verbeux... et déroutant, car à contresens de la notion de page dans SPIP+Z où « page » ne désigne pas une « page web », mais un « non objet spip ».
- je n’aime pas trop, mais j’ajoute souvent
[ rubrique(#ID_RUBRIQUE)]
et[ secteur(#ID_SECTEUR)]
, car ça reste un moyen simple et inégalé, pour varier le look d’une partie du site.- distinguer les compositions selon la nature des objets SPIP auxquelles elles s’appliquent est absurde et inutilement pénible. Mieux vaut un simple« .agenda », « .actu » ou « .trombinoscope » généré par
[ (#ENV{composition})]
. Si besoin était de distinguer selon les objets éditoriaux, il suffit de cibler en CSS, par exemple «.actu.rubrique {...}
» ou «.actu.article {...}
».Répondre à ce message
Bonjour,
J’utilise Zpip pour l’ensemble d’un site. J’aimerai pouvoir ne pas afficher la colonne de navigation (et du coup élargir la partie contenu) pour UNE SEULE PAGE du site.
Toucher au body.html me parait une méthode de sagouin.
Jouer sur les largeurs des parties dans la feuille de style serait sans doute plus clean, mais j’ignore si on peut conditionner les dimensions de bloc à une rubrique donnée.
Vos idées les bienvenues.
Salut,
tu pourrais annuler les « float » dans la feuille de style pour retrouver les blocs principaux les uns à la suite des autres.
Tu peux aussi consulter la collection de dispositions « Layout Gala » disponible à l’adresse http://blog.html.it/layoutgala/.
Voilà pour un début de piste, si tu n’as pas déjà trouver la solution à ton problème.
Répondre à ce message
Bonjour,
j’ai encore quelques doutes par rapport au nommage.
J’aimerais que pour chaque rubrique, les articles aient une mise en page différente.
J’ai bien compris où il faut placer les fichiers (squelettes/contenu,squelettes/extra, etc....) mais je comprends pas comment les nommer pour que ça marche par défaut.
Par exemple pour la rubrique 1, est-ce que c’est article-1.html ?
merci d’avance !
Répondre à ce message
Juste pour signaler une coquille dans l’exemple de la section body :
Sur une page article avec la composition portfolio body a les classes page_article et article_portfolio.
Ouep, vu aussi. J’ai corrigé.
Ca, c’est fait !
Répondre à ce message
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |