Julien FALCONNET, Informaticien Indépendant

Ajouter une langue à SPIP

Julien Falconnet — 2010-10-15T11:47:56Z

Pour un site SPIP, nous voulions pouvoir avoir des traductions même rares en de nombreuses langues, dont :
– hébreux
– hindi
– swahili

Or ces trois dernières langues ne sont pas intégrées, faute de traduction complète, dans SPIP. Mais des embryons existent qui seront bien suffisants pour nos besoin. Mais comment les ajouter à spip ?

Préambule

On considère que l'on a déjà des articles en plusieurs langues et que le multilinguisme est installé, mais que pour certains articles on ne trouve pas les langues appropriées dans SPIP. On cherche donc à ajouter une nouvelle langue.

Justification

Après quelques recherche, il s'avère difficile de trouver une aide concrète pour un site SPIP en version 2.1. Il y a des questions similaires pour d'anciennes versions, il y des question et des réponses sur le multilinguisme et sur le fait d'aider à la traduction de SPIP. Mais je n'ai rien trouvé de synthétique sur l'ajout en tant que tel d'une nouvelle langue en SPIP 2.1. Et surtout google ne nous sort rien de pertinent sur la requête "ajouter une langue à spip".

Le périple

En cherchant on voit que l'on a besoin de 3 fichiers pour chaque langue :
– ecrire_lang.php
– public_lang.php
– spip_lang.php

où lang est le code langue. Par exemple, pour le français c'est 'fr' (ecrire_fr.php, public_fr.php, spip_fr.php), pour l'anglais c'est 'en', pour l'italien c'est 'it', etc. Il existe plusieurs standards pour définir une langue, celui utilisé ici semble être le ISO 639-1 (voir liste exhaustive) avec, parfois, une variante pays (pt_br).

Je trouvais un tableau très prometteur avec la liste des traductions en cours : http://www.spip.net/rubrique4.html

Mais encore fallait il pouvoir récupérer les fichiers correspondant.

Dans cette quête de fichiers, un certain nombre de liens semblent brisés, notamment dans spip-contrib (la gestion des langues semble avoir été gérée dans spip-contrib). D'autre sur spip.net semblent au contraire amener sur une mailing liste ou l'interface privée (inaccessibles sans inscription).

Finalement la meilleure piste semble le suivi de développement en cours :
– http://core.spip.org/trac/spip/browser/ecrire/lang
Après tout on sait bien qu'on va chercher quelque chose qui n'est pas finit mais qui est déjà bien mieux que rien.

On y trouve en particulier he (hébreux), mais aucun des autres qui m'intéressent.

Après beaucoup de recherches et un peu de chance je trouve une adresse magique : http://www.spip.net/fichier_langue.php

Cette petite adresse permet de récupérer n'importe quel fichier de langue pour peu qu'il existe et qu'on soit capable de deviner son nom.

Dans mon cas, je cherchais :
– spip_sw.php, ecrire_sw.php, public_sw.php
– spip_hi.php, ecrire_hi.php, public_hi.php
– spip_he.php, ecrire_he.php, public_he.php

Et par exemple pour récupérer le premier, j'ai pu utiliser l'adresse :

http://www.spip.net/fichier_langue.php?f=spip_sw

Une fois cela n'a pas résolu tous mes problèmes puisque je n'ai pu récupérer qu'une partie des fichiers dont j'avais besoin :

spip_sw.php
spip_hi.php
spip_he.php
public_he.php
ecrire_hi.php
ecrire_he.php

De plus en les parcourant, on remarque que :
– pour l'hébreu ça semble ok même si dans écrire, il reste des traductions à faire.
– pour l'hindi, rien ne semble fait ou presque. (outre qu'il manque un fichier)
– pour le swahili, c'est en fait une base en anglais. (outre qu'il manque deux fichiers)

Il aurait fallu que je puisse traduire les fichiers manquants ou incorrects. Mais n'ayant ni les compétence, ni le temps, je décidais plutôt de mettre en place des artifices approximatifs qui permettrait quand même de profiter de l'extraordinaire moteur multilingue de SPIP. Donc, j'utilisais les fichiers les plus adaptés (l'anglais) pour remplacer les fichiers manquants ou erronés.

Je récupérai donc spip_en.php, ecrire_en.php et public_en.php et les copiais/renommais pour obtenir

spip_hi.php
ecrire_hi.php
public_hi.php
ecrire_sw.php
public_sw.php

Ensuite restait à mettre tout ça en place dans /ecrire/lang .

Mais, grande déception, les nouvelles langues n'apparaissent pas dans la liste des langues disponibles. On vérifie rapidement ecrire/inc/lang_liste.php pour voir que, pourtant, elles ont été prévues.

En cherchant dans l'interface d'administration, on trouve dans Configuration>Gestion des langues>Multilinguisme la liste des langues à activer.
Au passage on note que les langues soulignées sont celles qui ont des fichiers spécifiques (pour les autres, on utilisera la langue par défaut)

Procédure Synthétique

1. Trouver le code langue de la langue recherchée

Soit dans spip dans le fichier ecrire/inc/lang_liste.php
Soit sur le site : http://www.loc.gov/standards/iso639... colonne ISO 639-1 mais attention certains ajustements sont fait par spip.
A partir de là, on sait que l'on aura besoin de :

spip_<_code>.php
ecrire_<_code>.php
public_<_code>.php

Par exemple pour l'allemand, ce serait spip_de.php, ecrire_de.php, public_de.php

2. Récupérer les fichiers des langues qui nous intéressent

On utilise l'adresse http://www.spip.net/fichier_langue.php?f= pour récupérer les fichiers de langue (en remplacant par le nom du fichier recherché sans le ".php"

Par exemple pour l'allemand ce serait :

http://www.spip.net/fichier_langue.php?f=spip_de
http://www.spip.net/fichier_langue.php?f=ecrire_de

http://www.spip.net/fichier_langue.php?f=public_de

2bis. Inventer ceux qui nous manquent

Si par hasard, les fichiers ne sont pas disponibles ou sont erronés, il faut :
– soit les traduire (et je vous y invite fortement si vous avez les compétences et à participer à l'effort de traduction de SPIP)
– soit choisir une langue disponible la plus proche ou la plus appropriée (souvent l'anglais). Une fois la langue choisit on trouve les trois fichiers dans /ecrire/lang et on les copie en les renommant pour qu'il semblent représenter la langue voulue.

Par exemple, si on ne trouve pas l'hindi et qu'on décide de le remplacer par l'anglais, on copie /ecrire/lang/spip_en.php en /ecrire/lang/spip_hi.php, /ecrire/lang/public_en.php en /ecrire/lang/public_hi.php et /ecrire/lang/ecrire_en.php en /ecrire/lang/ecrire_hi.php

3. Mettre en place leur utilisation

Une fois les fichiers en place il reste à les activer dans l'administration de spip : Configuration>Gestion des langues>Multilinguisme . Cette page propose, en dessous des options de configuration linguistiques générales, la liste des langues disponibles et activables. Il ne reste plus qu'à cliquer votre nouvelle langue pour l'activer et qu'elle soit disponible dans l'interface.

3bis. Mettre en place leur utilisation, langue rare

Si d'aventure, la langue n'apparaissait pas dans la liste de la page Configuration>Gestion des langues>Multilinguisme, il faudrait la rajouter à la main dans le fichier : ecrire/inc/lang_liste.php

Ressources

Voici les ressources qui m'ont bien aidé :
– http://forum.spip.org/fr_208428.html (ajout du chinois non-simplifié en 2008)
– http://www.eklesia.net/spip.php?article75
– http://www.spip.net/rubrique4.html (ou l'on trouve l'état d'avancement des traductions.

Notes

On s'occupe bien ici de rajouter une nouvelle langue à SPIP. La gestion d'un site multilingue (avoir des articles/ rubriques/pages etc.) est un sujet extrêmement bien documenté. Par exemple :
– http://www.spip.net/fr_article1972.html
– http://www.spip.net/fr_article2128.html

La version que j'utilise de spip propose 40 langues dans l'interface privée. Pourtant étrangement il y a 45 fichiers de langues dans /ecrire/lang. Et on trouve 189 code langues dans ecrire/inc/lang_liste.php.
Cela tient au fait que 189 langues ont été prévues. 45 sont livrées par défaut mais 5 ne sont pas activées par défaut :

asturianu [ast]
Indonesia [id]
Cambodian [km]
Burmese [my]
svenska [sv]

SPIP : Analyse d'une metastructure de la DIST

Julien Falconnet — 2007-09-26T17:37:14Z

Le jeu de squelettes par défaut de SPIP (appelé DIST) est riche en possibilités. Il est souvent possible d'obtenir exactement la présentation de vos rêves, avec quelques modifications seulement. Encore faut-il savoir où aller faire ces modifications et savoir en anticiper les effets secondaires. Pour cela il est nécessaire de voire clairement comment sont constitués les principaux squelettes.

Objectif

Il s'agit de mieux comprendre la structure générale des squelettes de la DIST, en distinguant les constructions communes et les différences.

Méthode

On se restreint aux principaux squelette et on cherche les éléments communs pour essayer de dégager une meta-structure commune à tous. Ensuite on s'intéresse aux parties variantes et particulières de chaque page. Cette analyse porte sur SPIP 1.9.2.

Les squelettes étudiés sont les plus communs : sommaire, rubrique, plan, forum, site.

Structure générale

#CACHE{...} ... "parfois une mention de boucle"  [(#NOM_SITE_SPIP|textebrut)] [    [(#REM) Entete de la page + titre du site ]  [(#REM) Fil d'Ariane ]  ... 
  ...  ... 
 [(#REM) Menu de navigation par rubriq  ... ... 
 
 [(#REM) Pied de page ]

... "parfois la fin de la boucle de tete"

Tableau de variations

Ce tableau propose une vision synthétique des constantes et des variation dans les squelettes. Une première colonne présente les constantes, les autres indiquent les variantes pour chaque squelette.

Constantes	Variations
#CACHE...	sommaire : rubrique : #CACHE7200 article : #CACHE86400 plan : #CACHE7200 forum : #CACHE3600 #HTTP_HEADER"Cache-Control : max-age=3600, must-revalidate" site : #CACHE7200
	sommaire : - rubrique : article : plan : - forum : - site :

	sommaire : rubrique : - article : - plan : - forum : - site : `[(#REM) Les sites n'ont pas de "lang" a proprement parler`

`...`	sommaire : `[(#NOM_SITE_SPIP\|textebrut)]` rubrique :`[(#TITRE\|textebrut) - ][(#NOM_SITE_SPIP\|textebrut)]` article :`[(#TITRE\|textebrut) - ][(#NOM_SITE_SPIP\|textebrut)]` plan :`<:plan_site:> - [(#NOM_SITE_SPIP\|textebrut)]` forum :<:poster_message:> - [(#NOM_SITE_SPIP\|textebrut)]</tit</code></p> <p>site :<code class='spip_code spip_code_inline' dir='ltr'><title>[(#NOM_SITE\|textebrut) - ][(#NOM_SITE_SPIP\|textebrut)]</code></p> </td></tr> <tr class='row_odd odd'> <td headers='id2ab3_c0'></td> <td headers='id2ab3_c1'>sommaire :<code class='spip_code spip_code_inline' dir='ltr'>[<meta name="description" content="(#DESCRIPTIF_SITE_SPIP\|cou</code> <p>rubrique :<code class='spip_code spip_code_inline' dir='ltr'>[<meta name="description" content="(#INTRODUCTION\|couper{150}</code></p> <p>article :<code class='spip_code spip_code_inline' dir='ltr'>[<meta name="description" content="(#INTRODUCTION\|couper{150}</code></p> <p>plan :<code class='spip_code spip_code_inline' dir='ltr'>[<meta name="description" content="(#DESCRIPTIF_SITE_SPIP\|cou</code></p> <p>forum : -</p> <p>site :<code class='spip_code spip_code_inline' dir='ltr'>[<meta name="description" content="(#DESCRIPTIF\|couper{150}\|t</code></p> </td></tr> <tr class='row_even even'> <td headers='id2ab3_c0'><code class='spip_code spip_code_inline' dir='ltr'><INCLURE{fond=inc-head}></code></td> <td headers='id2ab3_c1'>sommaire : <p>rubrique :</p> <p>article :</p> <p>plan :</p> <p>forum :</p> <p>site :</p> </td></tr> <tr class='row_odd odd'> <td headers='id2ab3_c0'><code class='spip_code spip_code_inline' dir='ltr'><body class="..."></code></td> <td headers='id2ab3_c1'>sommaire :<code class='spip_code spip_code_inline' dir='ltr'><body class="page_sommaire"></code> <p>rubrique :<code class='spip_code spip_code_inline' dir='ltr'><body class="page_rubrique"></code></p> <p>article :<code class='spip_code spip_code_inline' dir='ltr'><body class="page_article"></code></p> <p>plan :<code class='spip_code spip_code_inline' dir='ltr'><body class="page_plan"></code></p> <p>forum :<code class='spip_code spip_code_inline' dir='ltr'><body class="page_forum"></code></p> <p>site :<code class='spip_code spip_code_inline' dir='ltr'><body class="page_site"></code></p> </td></tr> <tr class='row_even even'> <td headers='id2ab3_c0'><code class='spip_code spip_code_inline' dir='ltr'><div id="page"></code></td> <td headers='id2ab3_c1'>sommaire : <p>rubrique :</p> <p>article :</p> <p>plan :</p> <p>forum :</p> <p>site :</p> </td></tr> <tr class='row_odd odd'> <td headers='id2ab3_c0'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>[(#REM) Entete de la page + titre du site ] _ <INCLURE{fond=inc-entete}></code></pre></div></td> <td headers='id2ab3_c1'>sommaire : <p>rubrique :</p> <p>article :</p> <p>plan :</p> <p>forum :</p> <p>site :</p> </td></tr> <tr class='row_even even'> <td headers='id2ab3_c0'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>[(#REM) Fil d'Ariane ] _ <div id="hierarchie">...</div></code></pre></div></td> <td headers='id2ab3_c1'>sommaire :<code class='spip_code spip_code_inline' dir='ltr'><div id="hierarchie"><:accueil_site:></div></code> <p>rubrique :<code class='spip_code spip_code_inline' dir='ltr'><div id="hierarchie"><a href="#URL_SITE_SPIP/"><:accu</code></p> <p>article :<code class='spip_code spip_code_inline' dir='ltr'><div id="hierarchie"><a href="#URL_SITE_SPIP/"><:accu</code></p> <p>plan :<code class='spip_code spip_code_inline' dir='ltr'><div id="hierarchie"><a href="#URL_SITE_SPIP/"><:accu</code></p> <p>forum :<code class='spip_code spip_code_inline' dir='ltr'>voire source</code></p> <p>site :<code class='spip_code spip_code_inline' dir='ltr'><div id="hierarchie"><a href="#URL_SITE_SPIP/"><:accu</code></p> </td></tr> <tr class='row_odd odd'> <td headers='id2ab3_c0'><code class='spip_code spip_code_inline' dir='ltr'><div id="contenu">...</div></code></td> <td headers='id2ab3_c1'>sommaire :<div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>[(#REM) Les deux derniers articles ] ... [(#REM) Articles suivants ] ...<div class="contre-encart"> ....</div>... <div class="encart"> [(#REM) Breves ] ... <div class="breves"> ... [(#REM) Liens des forums ] ... <div class="forums"> .... [(#REM) Sur le Web ] ... <div class="syndic"> .... </div><!-- fin encart --></code></pre></div> <p>rubrique :</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><div class="cartouche"> ... <div class="#EDIT{texte} chapo"> ... <div class="contre-encart"> [(#REM) Articles de la rubriq ... <div class="rubriques"> ... [(#REM) Documents joints a la ... </div><!-- fin contre-encart --> ... <div class="encart"> [(#REM) Breves du secteur ] <div class="breves"> ... [(#REM) Sites de la rubrique <div class="syndic"> ... [(#REM) Proposer un site ] #FORMULAIRE_SITE </div><!-- fin encart --></code></pre></div> <p>article :</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><div class="cartouche"> ... <div class="#EDIT{chapo} chapo"> ... <div class="#EDIT{texte} texte"> ... [(#REM) Portfolio : album d'images ] ... <BOUCLE_afficher_document(DOCUMENTS) ... [(#REM) Autres documents joints... ... [(#REM) Petition... ... [(#REM) Forum de l'article ] ...</code></pre></div> <p>plan :</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><div class="cartouche"> ... [(#REM) Articles et sous-rubriques ... <div class="encart"> ... [(#REM) Breves ] ... [(#REM) Sur le Web ] ... </div><!-- fin encart --> ...</code></pre></div> <p>forum :</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><div class="cartouche"> ... <BOUCLE_forum_parent ... <BOUCLE_article ... <BOUCLE_breve ... <BOUCLE_rubrique ... #FORMULAIRE_FORUM ...</code></pre></div> <p>site :</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><div class="cartouche"> ... [(#REM) Articles issus de la syndicat ...</code></pre></div></td></tr> <tr class='row_even even'> <td headers='id2ab3_c0'><code class='spip_code spip_code_inline' dir='ltr'></div><!-- fin contenu --></code></td> <td headers='id2ab3_c1'>sommaire : <p>rubrique :</p> <p>article :</p> <p>plan :</p> <p>forum :</p> <p>site :</p> </td></tr> <tr class='row_odd odd'> <td headers='id2ab3_c0'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>[(#REM) Menu de navigation laterale ] <div id="navigation"></code></pre></div></td> <td headers='id2ab3_c1'>sommaire : <p>rubrique :</p> <p>article :</p> <p>plan :</p> <p>forum :</p> <p>site :</p> </td></tr> <tr class='row_even even'> <td headers='id2ab3_c0'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>[(#REM) Menu de navigation par rubriq <INCLURE{fond=inc-rubriques}>...</code></pre></div></td> <td headers='id2ab3_c1'>sommaire : - <p>rubrique :<code class='spip_code spip_code_inline' dir='ltr'><INCLURE{fond=inc-rubriques}{id_rubrique}</code></p> <p>article :<code class='spip_code spip_code_inline' dir='ltr'><INCLURE{fond=inc-rubriques}{id_rubrique}</code></p> <p>plan : -</p> <p>forum : -</p> <p>site :<code class='spip_code spip_code_inline' dir='ltr'><INCLURE{fond=inc-rubriques}{id_rubrique}</code></p> </td></tr> <tr class='row_odd odd'> <td headers='id2ab3_c0'><code class='spip_code spip_code_inline' dir='ltr'>...</code></td> <td headers='id2ab3_c1'>sommaire : <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>[(#REM) Inscription au site ] #FORMULAIRE_INSCRIPTION</code></pre></div></td> <td><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>[(#REM) Menu de navigation mots-cles <B_mots>...</B_mots></code></pre></div></td> <td><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>[(#REM) Articles dans la meme rubriqu ... [(#REM) Menu de navigation mots-cles #MODELE{article_mots}</code></pre></div> <p>rubrique : -</p> <p>article : -</p> <p>plan :</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>[(#REM) Autres sites web ] ... [(#REM) Menu de navigation mots-cles ...</code></pre></div> <p>forum : -</p> <p>site : -</p> </td></tr> <tr class='row_even even'> <td headers='id2ab3_c0'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code></div><!-- fin navigation --> </div><!-- fin conteneur --></code></pre></div></td> <td headers='id2ab3_c1'></td></tr> <tr class='row_odd odd'> <td headers='id2ab3_c0'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>[(#REM) Pied de page ] <INCLURE{fond=inc-pied}{skel=#SQUELETTE}> </div><!-- fin page --> </body> </html></code></pre></div></td> <td headers='id2ab3_c1'></td></tr> <tr class='row_even even'> <td headers='id2ab3_c0'><code class='spip_code spip_code_inline' dir='ltr'>..</code></td> <td headers='id2ab3_c1'>sommaire : <p>rubrique :<code class='spip_code spip_code_inline' dir='ltr'></BOUCLE_rubrique_principal></code></p> <p>article :<code class='spip_code spip_code_inline' dir='ltr'></BOUCLE_article_principal></code></p> <p>plan :</p> <p>forum :</p> <p>site :<code class='spip_code spip_code_inline' dir='ltr'></BOUCLE_site></code></p> </td></tr> </tbody> </table><table class="table spip"> <thead><tr class='row_first'><th id='id8b79_c0'>Commun</th><th id='id8b79_c1'>sommaire</th><th id='id8b79_c2'>rubrique</th><th id='id8b79_c3'>article</th><th id='id8b79_c4'>plan</th><th id='id8b79_c5'>forum</th><th id='id8b79_c6'>site</th></tr></thead> <tbody> <tr class='row_odd odd'> <td headers='id8b79_c0'>#CACHE...</td> <td headers='id8b79_c1'>#CACHE<i>7200</i></td> <td headers='id8b79_c2'>#CACHE<i>7200</i></td> <td headers='id8b79_c3'>#CACHE<i>86400</i></td> <td headers='id8b79_c4'>#CACHE<i>7200</i></td> <td headers='id8b79_c5'>#CACHE<i>3600</i> <br>#HTTP_HEADER<i>"Cache-Control : max-age=3600, must-revalidate"</i></td> <td headers='id8b79_c6'>#CACHE<i>7200</i></td></tr> <tr class='row_even even'> <td headers='id8b79_c0'></td> <td headers='id8b79_c1'></td> <td headers='id8b79_c2'><code class='spip_code spip_code_inline' dir='ltr'><BOUCLE_rubrique_principal(RUBRIQUES) {id_rubrique}></code></td> <td headers='id8b79_c3'><code class='spip_code spip_code_inline' dir='ltr'><BOUCLE_article_principal(ARTICLES) {id_article}></code></td> <td headers='id8b79_c4'></td> <td headers='id8b79_c5'></td> <td headers='id8b79_c6'><code class='spip_code spip_code_inline' dir='ltr'><BOUCLE_site(SITES){id_syndic}></code></td></tr> <tr class='row_odd odd'> <td headers='id8b79_c0'><code class='spip_code spip_code_inline' dir='ltr'><!DOCTYPE...</code></td> <td headers='id8b79_c1'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c2'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c3'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c4'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c5'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c6'><code class='spip_code spip_code_inline' dir='ltr'></code></td></tr> <tr class='row_even even'> <td headers='id8b79_c0'><code class='spip_code spip_code_inline' dir='ltr'><html dir="#LANG_DIR" lang="#LANG"></code></td> <td headers='id8b79_c1'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c2'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c3'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c4'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c5'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c6'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>[(#REM) Les sites n'ont pas de "lang" a proprement parler <BOUCLE_lang(RUBRIQUES){id_rubrique}><br><html dir="#LANG_DIR" ...</code></pre></div></td></tr> <tr class='row_odd odd'> <td headers='id8b79_c0'><code class='spip_code spip_code_inline' dir='ltr'><head></code></td> <td headers='id8b79_c1'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c2'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c3'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c4'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c5'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c6'><code class='spip_code spip_code_inline' dir='ltr'></code></td></tr> <tr class='row_even even'> <td headers='id8b79_c0'><code class='spip_code spip_code_inline' dir='ltr'><title>...	`[(#NOM_SITE_SPIP\|textebrut)]`	`[(#TITRE\|textebrut) - ][(#NOM_SITE_SPIP\|textebrut)]`	`[(#TITRE\|textebrut) - ][(#NOM_SITE_SPIP\|textebrut)]`	`<:plan_site:> - [(#NOM_SITE_SPIP\|textebrut)]`	<:poster_message:> - [(#NOM_SITE_SPIP\|textebrut)]</tit</code></td> <td headers='id8b79_c6'><code class='spip_code spip_code_inline' dir='ltr'><title>[(#NOM_SITE\|textebrut) - ][(#NOM_SITE_SPIP\|textebrut)]</code></td></tr> <tr class='row_odd odd'> <td headers='id8b79_c0'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c1'><code class='spip_code spip_code_inline' dir='ltr'>[<meta name="description" content="(#DESCRIPTIF_SITE_SPIP\|cou</code></td> <td headers='id8b79_c2'><code class='spip_code spip_code_inline' dir='ltr'>[<meta name="description" content="(#INTRODUCTION\|couper{150}</code></td> <td headers='id8b79_c3'><code class='spip_code spip_code_inline' dir='ltr'>[<meta name="description" content="(#INTRODUCTION\|couper{150}</code></td> <td headers='id8b79_c4'><code class='spip_code spip_code_inline' dir='ltr'>[<meta name="description" content="(#DESCRIPTIF_SITE_SPIP\|cou</code></td> <td headers='id8b79_c5'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c6'><code class='spip_code spip_code_inline' dir='ltr'>[<meta name="description" content="(#DESCRIPTIF\|couper{150}\|t</code></td></tr> <tr class='row_even even'> <td headers='id8b79_c0'><code class='spip_code spip_code_inline' dir='ltr'><INCLURE{fond=inc-head}></code></td> <td headers='id8b79_c1'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c2'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c3'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c4'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c5'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c6'><code class='spip_code spip_code_inline' dir='ltr'></code></td></tr> <tr class='row_odd odd'> <td headers='id8b79_c0'><code class='spip_code spip_code_inline' dir='ltr'><body class="..."></code></td> <td headers='id8b79_c1'><code class='spip_code spip_code_inline' dir='ltr'><body class="page_sommaire"></code></td> <td headers='id8b79_c2'><code class='spip_code spip_code_inline' dir='ltr'><body class="page_rubrique"></code></td> <td headers='id8b79_c3'><code class='spip_code spip_code_inline' dir='ltr'><body class="page_article"></code></td> <td headers='id8b79_c4'><code class='spip_code spip_code_inline' dir='ltr'><body class="page_plan"></code></td> <td headers='id8b79_c5'><code class='spip_code spip_code_inline' dir='ltr'><body class="page_forum"></code></td> <td headers='id8b79_c6'><code class='spip_code spip_code_inline' dir='ltr'><body class="page_site"></code></td></tr> <tr class='row_even even'> <td headers='id8b79_c0'><code class='spip_code spip_code_inline' dir='ltr'><div id="page"></code></td> <td headers='id8b79_c1'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c2'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c3'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c4'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c5'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c6'><code class='spip_code spip_code_inline' dir='ltr'></code></td></tr> <tr class='row_odd odd'> <td headers='id8b79_c0'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>[(#REM) Entete de la page + titre du site ] <INCLURE{fond=inc-entete}></code></pre></div></td> <td headers='id8b79_c1'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c2'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c3'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c4'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c5'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c6'><code class='spip_code spip_code_inline' dir='ltr'></code></td></tr> <tr class='row_even even'> <td headers='id8b79_c0'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>[(#REM) Fil d'Ariane ] <div id="hierarchie">...</div></code></pre></div></td> <td headers='id8b79_c1'><code class='spip_code spip_code_inline' dir='ltr'><div id="hierarchie"><:accueil_site:></div></code></td> <td headers='id8b79_c2'><code class='spip_code spip_code_inline' dir='ltr'><div id="hierarchie"><a href="#URL_SITE_SPIP/"><:accu</code></td> <td headers='id8b79_c3'><code class='spip_code spip_code_inline' dir='ltr'><div id="hierarchie"><a href="#URL_SITE_SPIP/"><:accu</code></td> <td headers='id8b79_c4'><code class='spip_code spip_code_inline' dir='ltr'><div id="hierarchie"><a href="#URL_SITE_SPIP/"><:accu</code></td> <td headers='id8b79_c5'><code class='spip_code spip_code_inline' dir='ltr'>voire source</code></td> <td headers='id8b79_c6'><code class='spip_code spip_code_inline' dir='ltr'><div id="hierarchie"><a href="#URL_SITE_SPIP/"><:accu</code></td></tr> <tr class='row_odd odd'> <td headers='id8b79_c0'><code class='spip_code spip_code_inline' dir='ltr'><div id="contenu">...</div></code></td> <td headers='id8b79_c1'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>[(#REM) Les deux derniers articles ] ... [(#REM) Articles suivants ] ...<div class="contre-encart"> ....</div>... <div class="encart"> [(#REM) Breves ] ... <div class="breves"> ... [(#REM) Liens des forums ] ... <div class="forums"> .... [(#REM) Sur le Web ] ... <div class="syndic"> .... </div><!-- fin encart --></code></pre></div></td> <td headers='id8b79_c2'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><div class="cartouche"> ... <div class="#EDIT{texte} chapo"> ... <div class="contre-encart"> [(#REM) Articles de la rubriq ... <div class="rubriques"> ... [(#REM) Documents joints a la ... </div><!-- fin contre-encart --> ... <div class="encart"> [(#REM) Breves du secteur ] <div class="breves"> ... [(#REM) Sites de la rubrique <div class="syndic"> ... [(#REM) Proposer un site ] #FORMULAIRE_SITE </div><!-- fin encart --></code></pre></div></td> <td headers='id8b79_c3'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><div class="cartouche"> ... <div class="#EDIT{chapo} chapo"> ... <div class="#EDIT{texte} texte"> ... [(#REM) Portfolio : album d'images ] ... <BOUCLE_afficher_document(DOCUMENTS) ... [(#REM) Autres documents joints... ... [(#REM) Petition... ... [(#REM) Forum de l'article ] ...</code></pre></div></td> <td headers='id8b79_c4'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><div class="cartouche"> ... [(#REM) Articles et sous-rubriques ... <div class="encart"> ... [(#REM) Breves ] ... [(#REM) Sur le Web ] ... </div><!-- fin encart --> ...</code></pre></div></td> <td headers='id8b79_c5'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><div class="cartouche"> ... <BOUCLE_forum_parent ... <BOUCLE_article ... <BOUCLE_breve ... <BOUCLE_rubrique ... #FORMULAIRE_FORUM ...</code></pre></div></td> <td headers='id8b79_c6'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code><div class="cartouche"> ... [(#REM) Articles issus de la syndicat ...</code></pre></div></td></tr> <tr class='row_even even'> <td headers='id8b79_c0'><code class='spip_code spip_code_inline' dir='ltr'></div><!-- fin contenu --></code></td> <td headers='id8b79_c1'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c2'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c3'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c4'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c5'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c6'><code class='spip_code spip_code_inline' dir='ltr'></code></td></tr> <tr class='row_odd odd'> <td headers='id8b79_c0'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>[(#REM) Menu de navigation laterale ] <div id="navigation"></code></pre></div></td> <td headers='id8b79_c1'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c2'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c3'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c4'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c5'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c6'><code class='spip_code spip_code_inline' dir='ltr'></code></td></tr> <tr class='row_even even'> <td headers='id8b79_c0'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>[(#REM) Menu de navigation par rubriq <INCLURE{fond=inc-rubriques}>...</code></pre></div></td> <td headers='id8b79_c1'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c2'><code class='spip_code spip_code_inline' dir='ltr'><INCLURE{fond=inc-rubriques}{id_rubrique}</code></td> <td headers='id8b79_c3'><code class='spip_code spip_code_inline' dir='ltr'><INCLURE{fond=inc-rubriques}{id_rubrique}</code></td> <td headers='id8b79_c4'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c5'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c6'><code class='spip_code spip_code_inline' dir='ltr'><INCLURE{fond=inc-rubriques}{id_rubrique}</code></td></tr> <tr class='row_odd odd'> <td headers='id8b79_c0'><code class='spip_code spip_code_inline' dir='ltr'>...</code></td> <td headers='id8b79_c1'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>[(#REM) Inscription au site ] #FORMULAIRE_INSCRIPTION</code></pre></div></td> <td headers='id8b79_c2'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>[(#REM) Menu de navigation mots-cles <B_mots>...</B_mots></code></pre></div></td> <td headers='id8b79_c3'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>[(#REM) Articles dans la meme rubriqu ... [(#REM) Menu de navigation mots-cles #MODELE{article_mots}</code></pre></div></td> <td headers='id8b79_c4'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c5'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c6'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>[(#REM) Autres sites web ] ... [(#REM) Menu de navigation mots-cles ...</code></pre></div></td></tr> <tr class='row_even even'> <td headers='id8b79_c0'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code></div><!-- fin navigation --> </div><!-- fin conteneur --></code></pre></div></td> <td headers='id8b79_c1'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c2'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c3'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c4'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c5'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c6'><code class='spip_code spip_code_inline' dir='ltr'></code></td></tr> <tr class='row_odd odd'> <td headers='id8b79_c0'><div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>[(#REM) Pied de page ] <INCLURE{fond=inc-pied}{skel=#SQUELETTE}> </div><!-- fin page --> </body> </html></code></pre></div></td> <td headers='id8b79_c1'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c2'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c3'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c4'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c5'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c6'><code class='spip_code spip_code_inline' dir='ltr'></code></td></tr> <tr class='row_even even'> <td headers='id8b79_c0'><code class='spip_code spip_code_inline' dir='ltr'>..</code></td> <td headers='id8b79_c1'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c2'><code class='spip_code spip_code_inline' dir='ltr'></BOUCLE_rubrique_principal></code></td> <td headers='id8b79_c3'><code class='spip_code spip_code_inline' dir='ltr'></BOUCLE_article_principal></code></td> <td headers='id8b79_c4'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c5'><code class='spip_code spip_code_inline' dir='ltr'></code></td> <td headers='id8b79_c6'><code class='spip_code spip_code_inline' dir='ltr'></BOUCLE_site></code></td></tr> </tbody> </table></div> </article> <article> <h1>SPIP : Composer les squelettes par défaut (DIST) avec les CSS</h1> <p>Julien Falconnet — 2007-09-16T01:03:49Z</p> <div class='rss_chapo'><p>La version 1.9 de SPIP a apporté un squelette par défaut (nommé DIST) particulièrement bien construit, permettant de nombreuses personnalisation du site en passant simplement par l'édition de fichiers CSS. Il s'agit dans cet article d'explorer pratiquement quelques unes des possibilités de composition.</p></div> <div class='rss_texte'><h2 class="spip">Objectif</h2> <p>L'objectif de cet article est de "tordre" la présentation de la DIST pour lui faire exprimer tout ce qu'elle "a dans le ventre" en terme de composition/maquette, et ce en touchant seulement aux fichiers CSS.</p> <h2 class="spip">Pré-requis</h2> <p>Pour profiter pleinement de cet article le lecteur doit etre familier avec les notions suivantes : <br /><span class="spip-puce ltr"><b>–</b></span> CSS<span class="spip_note_ref"> [<a href="#nb1" class="spip_note" rel="appendix" title="Cascading Style Sheet" id="nh1">1</a>]</span> <br /><span class="spip-puce ltr"><b>–</b></span> <a href="http://www.spip.net/" class="spip_out" rel="external">SPIP</a> 1.9<span class="spip_note_ref"> [<a href="#nb2" class="spip_note" rel="appendix" title="Système de Publication pour l'Internet Version 1.9" id="nh2">2</a>]</span> <br /><span class="spip-puce ltr"><b>–</b></span> DIST<span class="spip_note_ref"> [<a href="#nb3" class="spip_note" rel="appendix" title="Squelettes par défaut de SPIP, appelé suivant le nom du répertoire où sont (…)" id="nh3">3</a>]</span> (savoir que c'est la présentation par défaut de SPIP) <br /><span class="spip-puce ltr"><b>–</b></span> La lecture de l'article de <a href='https://falconnet.eu/SPIP-Analyse-de-la-CSS-des.html' class="spip_in">présentation générale de la CSS de la DIST</a> est fortement recommandée. <br /><span class="spip-puce ltr"><b>–</b></span> Il n'est PAS nécessaire de savoir faire ses propres squelettes.</p> <p><i>De plus, on rappelle que toutes les modifications dont il sera fait état ici, doivent être réalisées dans un répertoire /squelettes et non pas dans /dist au risque de perdre tout son travail à la prochaine mise à jour. Pour les vrais nouveaux je rappelle qu'il suffit de créer un répertoire /squelettes dans /spip et d'y copier les fichiers qu'on veut modifier (ici les .css). Après une mise à jours du cache ce seront automatiquement ces fichiers qui seront utilisés.</i></p> <h2 class="spip">Méthode générale</h2> <p>Pour chaque type de modification proposée on fonctionnera de la même façon : <br /><span class="spip-puce ltr"><b>–</b></span> Analyse du fonctionnement par défaut. <br /><span class="spip-puce ltr"><b>–</b></span> Proposition de portions de code à personnaliser et à insérer. Ces insertions se font facilement en <strong>fin du fichier habillage.css</strong>. Comme c'est le dernier fichier css appelé, les déclarations finales auront la priorité sur toutes les précédentes, hormis les règles de priorité classiques qui obligeront parfois certaine déclarations à être particulièrement précises. A terme, il peut être discutable de laisser des ajout 'scotchés' en fin de fichier, mais dans un premier temps cela permet de faire rapidement des modifications puissantes.</p> <p><strong>Masquer une zone (ou la révéler) </strong></p> <p>Pour certaines compositions, il est parfois nécessaire de masquer certaines informations. Par exemple, il peut être nécessaire de masquer le titre du site lorsqu'on préfère le remplacer par une bannière en image. Par ailleurs dans DIST plusieurs informations sont <strong>masquées par défaut</strong> grâce à la <strong>classe .invisible</strong>. La définition de cette classe est :</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>/* Non visible a l'ecran / .invisible { position: absolute; top: -3000em; height: 1%; }</code></pre></div> <p>On voit que plutôt qu'un display:none ; les auteurs ont préféré déplacer hors de la page les informations. Comme ce sont souvent des informations utiles (comme des titres) on peut penser qu'elle sont laissées pour aider au référencement. Si on choisi de masquer des portions du squelette par défaut, ce sera sans doute dans le même esprit, donc on choisi de conserver cette <strong>manière de masquer</strong> :</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>position: absolute; top: -3000em; height: 1%; </code></pre></div> <p>Ensuite, il suffit d'ajouter ce code aux déclarations qui nous intéressent pour les voir disparaitre.</p> <p>Par exemple pour masquer le titre du site :</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>#nom_site_spip{ position: absolute; top: -3000em; height: 1%; }</code></pre></div> <p>A l'inverse, il peut être intéressant de <strong>révéler</strong> certains éléments masqués de la structure par défaut. Par exemple pour révéler tous les éléments invisibles :</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>.invisible{ position: relative; top: 0em; }</code></pre></div> <p><i>PS : attention cette méthode ne fait pas disparaitre le contenu, les petits malins pourront toujours le trouver. Donc pour les informations que vous voulez vraiment rendre inaccessibles il faudra le faire au niveau du squelette ou de l'interface d'administration.</i></p> <p><strong>Jouer avec les "float", de gauche à droite et vice versa</strong></p> <p>La composition des pages de la DIST utilise massivement les float:left et float:right, pour mettre en place une <strong>construction en colonnes</strong>. Par exemple la mise dans une colonne droite du cadre (noisette) Rubrique et dans la colonne gauche le reste du contenu est composé grâce à ce système.</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>#conteneur #contenu {float: left;} #conteneur #navigation {float: right;}</code></pre></div> <p>C'est le même fonctionnement pour la composition de l'<strong>entête</strong> avec le titre à gauche et le formulaire de recherche à droite.</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>#entete #nom_site_spip, #entete a .spip_logos {float: left;} #entete .formulaire_recherche { float: right; }</code></pre></div> <p>On retrouve encore cette idée pour composition du bas de la page sommaire (accueil) ou la colonne principale (#contenu) se divise entre les articles plus anciens et les commentaires/fluxRss.</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>#contenu .contre-encart {float: left;} #contenu .encart {float: right;}</code></pre></div> <p>Dés lors, la modification est triviale, il suffit d'échanger left et right pour voir s'inverser la composition.</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>#conteneur #contenu {float: right;} #conteneur #navigation {float: left;} #contenu .contre-encart {float: right;} #contenu .encart {float: left;} #entete #nom_site_spip, #entete a .spip_logos {float: right;} #entete .formulaire_recherche { float: left; }</code></pre></div> <p>Ce n'est pas forcément joli (surtout dans l'entête) mais c'est simple et <strong>diablement efficace</strong>. Enfin à fin documentaire, voici toutes les lignes qui utilisent la directive float. Comme on le voit les autres utilisation sont plus classiques et consistent à laisser glisser à droite du texte des documents liés (images, documents joints...)</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>/spip_style/ .spip_documents_left { float: left; } .spip_documents_right { float: right;} .spip_modele { float: right;} /habillage/ #conteneur #contenu {float: left;} #conteneur #navigation {float: right;} #contenu .contre-encart {float: left;} #contenu .encart {float: right;} #entete #nom_site_spip, #entete a .spip_logos {float: left;} #entete .formulaire_recherche { float: right; } .cartouche .spip_logos {float: right;} .liste-articles li .spip_logos {float: right;} .liste-articles li .enclosures {float: right;} .spip_bouton input { float: right; } .formulaire_login_forum .spip_logos { float: right;} ul.choix_mots { float: left; } </code></pre></div> <p><strong>Ajouter une bannière</strong></p> <p>ATTENTION : Il existe une manière de faire cela sans toucher à la CSS. Je laisse cette section pour mémoire<span class="spip_note_ref"> [<a href="#nb4" class="spip_note" rel="appendix" title="Pour mettre une bannière avec la DIST, il suffit d'aller dans Configuration (…)" id="nh4">4</a>]</span>.</p> <p>La bannière est souvent devenue incontournable (qui a dit malheureusement ? ) pour la plupart des sites. Elles sont souvent très travaillées, servant de base à l'ambiance du site, à son identité visuelle. Pourtant SPIP semble les avoir complètement oublié dans sa composition par défaut. Vraiment ? Pas tout à fait ! En fait il est très facile d'ajouter une bannière avec peu de travail. Voici une méthode parmi d'autres.</p> <p>Pour ajouter la bannière, il va falloir résoudre trois problèmes : <br /><span class="spip-puce ltr"><b>–</b></span> placer la bannière quelque part. <br /><span class="spip-puce ltr"><b>–</b></span> lui faire de la place. <br /><span class="spip-puce ltr"><b>–</b></span> supprimer ce qui pourrait le masquer.<br class='manualbr' />Et puis il faut l'image du bannière, mais ça c'est votre problème ;).</p> <p>Pour <strong>placer la bannière</strong>, on va choisir l'entête qui se trouve à peu près là ou se trouve où on attend ce type d'image.</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>#entete{ background-image:url(ma_banniere.png); background-repeat:no-repeat; }</code></pre></div> <p>Il va maintenant falloir agrandir un peu l'entête, pour <strong>faire de la place à la bannière</strong>.</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>#entete{ padding-top:90px; / Penser à mettre la taille de la bannière plus quelques px/ }</code></pre></div> <p>Enfin, nous allons <strong>cacher</strong> ce qui défigure notre jolie présentation</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>#entete{ border:0px; / pour retirer le trait qui souligne le titre/ } #nom_site_spip{ position: absolute; top: -3000em; height: 1%; }</code></pre></div> <p>Après c'est à vous d'ajuster. En condensé cela donne :</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>#entete{ background-image:url(ma_banniere.png); background-repeat:no-repeat; padding-top:90px; border:0px; } #nom_site_spip{ position: absolute; top: -3000em; height: 1%; }</code></pre></div> <p>Bien sur il pourrait être plus propre de faire une vraie image ( <p><strong>Faire ressortir la "page"</strong></p> <p>Il existe une division qui passe complètement inaperçue dans la composition par défaut, mais qu'il peut être intéressante de personnaliser pour donner un effet de mise en relief. Cette division a l'id <strong>#page</strong>. Elle englobe tous les éléments de la page sauf ceux réservés à l'administration. Telle qu'elle, elle est transparente et ne sert qu'à fixer la largeur fixe de la composition générale et à la centrer. Voici sa déclaration.</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>#page { width: 48em; text-align: left; margin-left: auto; margin-right: auto; }</code></pre></div> <p>Le principal défaut de cette division invisible dans cette déclaration est que ce bloc adhère au contenu (padding nul), donc un changement de couleur seul donne un rendu laid. Il faut corriger alors grâce à un padding plus important. Chacun trouvera les réglages adaptés à son site et à sa charte graphique mais voici, une proposition pour passer simplement la DIST sur un arrière plan bleu foncé.</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>body{ background:#003; } #page { background:#FFF; padding:10px; }</code></pre></div> <p><strong>Modifier la largeur par défaut de la page</strong></p> <p>L'autre intérêt de <strong>#page</strong> est qu'il fixe la largeur d'affichage du bloc général. En modifiant sa déclaration on peut donc jouer sur la largeur des informations à afficher. Mais les sous-divisions, ont aussi leurs largeurs propres. Il faut donc les modifier également.</p> <p>Voici un exemple d'élargissement :</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>#page { width: 60em;} #conteneur #contenu {width: 43em;} #conteneur #navigation{width: 15em;} #contenu .encart {width: 20em;} #contenu .contre-encart {width: 20em;}</code></pre></div> <p>Et un exemple de rétrécissement :</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>#page { width: 30em;} #conteneur #contenu {width: 20em;} #conteneur #navigation{width: 9em;} #contenu .encart {width: 7em;} #contenu .contre-encart {width: 11em;}</code></pre></div> <p><strong>Divers trucs</strong></p> <p>Pas de quoi faire un article à proprement parler mais c'est intéressant quand même. <br /><span class="spip-puce ltr"><b>–</b></span> <strong>Ajuster</strong> le texte des articles (pour que ce soit bien droit à droite) :<br class='autobr' /> <code class='spip_code spip_code_inline' dir='ltr'>.texte , .chapo{text-align:justify;}</code> <br /><span class="spip-puce ltr"><b>–</b></span> Des <strong>lettrines</strong> pour les titres. Si vous avez une petite icones dont vous voulez qu'elle décore joliment vos titres, vous pouvez jouer avec le code suivant (pour une image de 30px de coté) :</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>.titre, H3.spip{ line-height : 30px; padding-left : 30px; vertical-align: middle; background : url('h1.png') no-repeat 0 0; }</code></pre></div> <p><br /><span class="spip-puce ltr"><b>–</b></span> Bouger les blocs à la main. Nettement plus discutable et dangereuse, cette méthode peut demander beaucoup de temps pour ajuster le positionnement surtout si vous voulez être compatible avec de nombreux navigateurs. Il s'agit ici de positionner certains blocs "à la main" (<strong>position : absolute</strong>) pour réussir une composition complètement originale. Attention pourtant on rencontrera rapidement des limites liées à la composition des squelettes, en particulier du fait de l'imbriquement des blocs.</p></div> <hr /> <div class='rss_notes'><div id="nb1"> <p><span class="spip_note_ref">[<a href="#nh1" class="spip_note" title="Notes 1" rev="appendix">1</a>] </span>Cascading Style Sheet</p> </div><div id="nb2"> <p><span class="spip_note_ref">[<a href="#nh2" class="spip_note" title="Notes 2" rev="appendix">2</a>] </span>Système de Publication pour l'Internet Version 1.9</p> </div><div id="nb3"> <p><span class="spip_note_ref">[<a href="#nh3" class="spip_note" title="Notes 3" rev="appendix">3</a>] </span>Squelettes par défaut de SPIP, appelé suivant le nom du répertoire où sont contenus tous les fichier : /dist/ sans doute pour squelettes de DISTribution</p> </div><div id="nb4"> <p><span class="spip_note_ref">[<a href="#nh4" class="spip_note" title="Notes 4" rev="appendix">4</a>] </span>Pour mettre une bannière avec la DIST, il suffit d'aller dans Configuration et de mettre un logo pour le site. Ce logo prendra naturellement place là où se trouve le titre habituellement, en faisant disparaître le titre</p> </div></div> <div class='rss_ps'><p>Il est possible de faire beaucoup de chose avec les CSS, mais attention, au bout d'un moment il devient tout de même plus efficace de modifier les squelettes.</p></div> </article> <article> <h1>SPIP : Colorier des squelettes par défaut (DIST) avec les CSS</h1> <p>Julien Falconnet — 2007-08-27T14:27:07Z</p> <div class='rss_chapo'><p>La version 1.9 de SPIP a apporté un squelette par défaut (nommé DIST) particulièrement bien construit, permettant de nombreuses personnalisations du site en passant simplement par l'édition de fichiers CSS. Il s'agit dans cet article d'explorer pratiquement quelques unes des possibilités de personnalisation des couleurs.</p></div> <div class='rss_texte'><h2 class="spip">Objectif</h2> <p>Il s'agit dans cet article de se doter d'une méthode simple et rapide pour redéfinir complètement les couleurs de DIST.</p> <h2 class="spip">Pré-requis</h2> <p>Pour profiter pleinement de cet article le lecteur doit etre familier avec les notions suivantes : <br /><span class="spip-puce ltr"><b>–</b></span> CSS<span class="spip_note_ref"> [<a href="#nb2-1" class="spip_note" rel="appendix" title="Cascading Style Sheet" id="nh2-1">1</a>]</span> <br /><span class="spip-puce ltr"><b>–</b></span> <a href="http://www.spip.net/" class="spip_out" rel="external">SPIP</a> 1.9<span class="spip_note_ref"> [<a href="#nb2-2" class="spip_note" rel="appendix" title="Système de Publication pour l'Internet Version 1.9" id="nh2-2">2</a>]</span> <br /><span class="spip-puce ltr"><b>–</b></span> DIST<span class="spip_note_ref"> [<a href="#nb2-3" class="spip_note" rel="appendix" title="Squelettes par défaut de SPIP, appelé suivant le nom du répertoire où sont (…)" id="nh2-3">3</a>]</span> (savoir que c'est la présentation par défaut de SPIP) <br /><span class="spip-puce ltr"><b>–</b></span> La lecture de l'article de <a href='https://falconnet.eu/SPIP-Analyse-de-la-CSS-des.html' class="spip_in">présentation générale de la CSS de la DIST</a> est fortement recommandée. <br /><span class="spip-puce ltr"><b>–</b></span> Il n'est PAS nécessaire de savoir faire ses propres squelettes.</p> <p><i>De plus, on rappelle que toutes les modifications dont il sera fait état ici, doivent être réalisées dans un répertoire /squelettes et non pas dans /dist au risque de perdre tout son travail à la prochaine mise à jour. Pour les vrais nouveaux je rappelle qu'il suffit de créer un répertoire /squelettes dans /spip et d'y copier les fichiers qu'on veut modifier (ici les .css). Après une mise à jours du cache ce seront automatiquement ces fichiers qui seront utilisés.</i></p> <h2 class="spip">Colorisation générale</h2> <p>Il est possible de changer l'ensemble des couleurs de SPIP/DIST à partir des feuilles de style. Le problème est que les déclarations de couleurs sont perdues dans le code abondant des fichiers spip_style.css et habillage.css (je laisse volontairement de côté spip_admin.css). Pour faire des modifications rapides et se faire une idée du résultat tout en gardant la possibilité de revenir en arrière, une bonne solution est de <strong>se placer à la fin de habillage.css</strong> (pensez à travailler dans /squelettes/ et pas dans /dist/). En effet comme c'est la dernière feuille de style inclue, les déclarations ajoutées à la fin primeront sur toutes les autres (à condition bien sûr que les autres règles de priorités CSS ne priment pas).</p> <p>Voici donc un jeu de déclaration que l'on peut placer en fin de fichier habillage.css. En remplissant les # par des couleurs, vous allez colorer l'ensemble de votre site (ou presque). Cela vous permettra de faire des essais ou des maquettes rapidement. J'ai étayé autant que possible le code de commentaires. Les couleurs indiquées sont celles utilisées par défaut dans DIST.</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>/****************** /* >> COLORIER << / /****************/ / > pour toutes les pages / body{background:#FFFFFF; /le fond de page/ color:#000000;} /la couleur par défaut (essentiellement pour des broutilles/ .texte { color: #000000; } / L'essentiel des contenus / a { color: #000000; }/Attention ce sont la plupart des titres/ a.on{ color: #000000; }/ Pour les liens menant vers la page courante / .cartouche .titre {color: #000000; } / > Pour les petits cadres de liens (noisettes ou assimilés) / / Pour chaque, le fond général puis le fond du titre du cadre (.menu-titre) / .rubriques { background: #EAFFEA;} .rubriques .menu-titre { background: #F2FFF2; } .breves { background: #EAFFEA; } .breves .menu-titre { background: #F2FFF2; } .syndic { background: #E8F8F8; } .syndic .menu-titre { background: #F0FCFC; } .forums { background: #EAFFEA; } /sert notamment pour le cadre "auteurs"/ .forums .menu-titre { background: #F2FFF2; } .divers { background: #E8F8F8; } .divers .menu-titre { background: #F0FCFC; } / > Détails de pages particulières / .page_plan #contenu h2 {background: #EEEEEE;} /Affichage des rubriques de niveau 1/ .forum-texte{background: transparent;} / le textes des commentaires/ ul .forum-chapo {background: #C4E0E0; } / les titres des commentaire en fonction de leur profondeur / ul ul .forum-chapo { background: #D4E8E8; } ul ul ul .forum-chapo { background: #E4F0F0; } ul ul ul ul .forum-chapo { background: #F4F8F8;} ul ul ul ul ul .forum-chapo { background: #FFF; }</code></pre></div> <p>Quelques remarques sur ce code :</p> <ol class="spip" role="list"><li> Il est minimaliste : les fonds et les couleurs</li><li> On peut compliquer en ajoutant des background et des color. Attention au mauvais goût.</li><li> On peut encore compliquer en jouant sur les bordures (ajout, retrait, personnalisation). Attention à la mise en page avec des bordure larges.</li><li> Même pour les choses de bases on peut compliquer. En jouant par exemple sur #page (mais attention, sans toucher à la composition ça risque d'être moche). En ajoutant des images de fond (mais encore il risque de falloir ajouter de la composition pour obtenir un résultat satisfaisant)</li><li> On peut aussi compliquer en jouant sur les polices.</li></ol><h2 class="spip">Un code encore plus concis</h2> <p>En poussant plus loin et en essayant de faire plus rapide, voici un code plus court. C'est un peu moins fin, mais ça va nettement plus vite pour se faire une idée. J'ai fonctionné par factorisation en regroupant les sections qui ont de bonnes raisons d'avoir les même couleurs (texte par défaut et texte des articles par exemple).</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>body{background:#;} body, a,.forum-chapo .forum-titre a { color: #; } a.on{ color: #; } .cartouche .titre {color: #; } .texte, .forum-texte { color: #; } .rubriques,.breves,.forums, .syndic, .divers, .forum-texte { background: #;} .forum .forum-chapo, .page_plan #contenu h2, .rubriques .menu-titre,.breves .menu-titre,.forums .menu-titre,.syndic .menu-titre, .divers .menu-titre { background: #; }</code></pre></div><h2 class="spip">Quelques exemples</h2> <p>Et en guise d'exemples, voici trois blocs à copier coller pour se faire une idée (ils sont laids mais représentatifs ;) ).</p> <p><i>Si vous êtes sous Firefox/Iceweasel et avez installé le greffon "web developeur", vous pouvez même tester en direct avec un ctrl+maj+e puis en copiant collan à la fin de habillage.css .</i></p> <p><strong>COULEURS GRISES</strong></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>body{background:#EEF; color:#A00;} .texte { color: #800; } a,.forum-titre a { color: #606; } a.on{ color: #A00; } .cartouche .titre {color: #800; } .rubriques,.breves,.forums, .syndic, .divers { background: #DDD;} .rubriques .menu-titre,.breves .menu-titre,.forums .menu-titre,.syndic .menu-titre, .divers .menu-titre { background: #CCC; } .page_plan #contenu h2 {background: #CCC;} .forum-texte{background: #DDD;color:#333;} .forum .forum-chapo {background: #CCC; } </code></pre></div> <p><strong>COULEURS FONCEES </strong></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>body{background:#202;} body, a,.forum-chapo .forum-titre a { color: #AFA; } a.on{ color: #CFC; } .cartouche .titre {color: #3F3; } .texte, .forum-texte { color: #0F0; } .rubriques,.breves,.forums, .syndic, .divers, .forum-texte { background: #000;} .forum .forum-chapo, .page_plan #contenu h2, .rubriques .menu-titre,.breves .menu-titre,.forums .menu-titre,.syndic .menu-titre, .divers .menu-titre { background: #606; }</code></pre></div> <p><strong>COULEURS ROSES</strong></p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>body{background:#F88;} body, a,.forum-chapo .forum-titre a { color: #008; } a.on{ color: #33D; } .cartouche .titre {color: #22D; } .texte, .forum-texte { color: #008; } .rubriques,.breves,.forums, .syndic, .divers, .forum-texte { background: #FFA;} .forum .forum-chapo, .page_plan #contenu h2, .rubriques .menu-titre,.breves .menu-titre,.forums .menu-titre,.syndic .menu-titre, .divers .menu-titre { background: #FF8; }</code></pre></div><h2 class="spip">Documentation complémentaire</h2> <p>Et enfin, en guise de documentation complémentaire, un recensement des définitions de couleurs dans la DIST. C'est notamment utile lorsqu'on cherche à comprendre pourquoi telle ou telle définition ne veut pas s'appliquer (recherche de priorité css). Les définitions ont été reclassées en fonction de leur type : <br /><span class="spip-puce ltr"><b>–</b></span> color (couleur de la police) <br /><span class="spip-puce ltr"><b>–</b></span> background (couleur du fond) <br /><span class="spip-puce ltr"><b>–</b></span> border (couleur et paramètres des bordures).</p> <div class="precode"><pre class='spip_code spip_code_block' dir='ltr' style='text-align:left;'><code>/********************************** /* SYNTHESE DES LIGNES A COULEURS DE LA DIST / /*********************************/ /Color/ body{color: #333;} .cartouche .titre {color: #000; } .texte {color: #000;} .reponse_formulaire { color: #e86519; } .forum-chapo .forum-titre, .forum-chapo .forum-titre a {color: #333; } .forum-texte { color: #333;} a { color: #333; } a.spip_note {} / liens vers notes de bas de page / a.spip_in { color: #900; } / liens internes / a.spip_out { color: #009; } / liens sortants / a.spip_url { color: #009; } / liens url sortants / a.spip_glossaire { color: #060; } / liens vers encyclopedie / .on { color: #000; } / liens exposes / /Background/ body {background: #FFF;} .rubriques { background: #EAFFEA;} .rubriques .menu-titre { background: #F2FFF2; } .breves { background: #FFEAEA; } .breves .menu-titre { background: #FFF2F2; } .syndic { background: #E8F8F8; } .syndic .menu-titre { background: #F0FCFC; } .forums { background: #EAEAFF; } .forums .menu-titre { background: #F2F2FF; } .divers { background: #F8F8E8; } .divers .menu-titre { background: #FCFCF0; } .spip_surligne { background: #FF6; } .lien {background: #EEE;} table.spip tr.row_first {background: #FFC; } table.spip tr.row_odd {background: #DDD; } table.spip tr.row_even { background: #EEE; } table.spip_barre a img {background: #FDA;} table.spip_barre a:hover img { background: #FFF;} table.spip_barre input.barre { background: #EEE; } .page_plan #contenu h2 {background: #EEE;} ul .forum-chapo { background: #C4E0E0; } ul ul .forum-chapo { background: #D4E8E8; } ul ul ul .forum-chapo { background: #E4F0F0; } ul ul ul ul .forum-chapo { background: #F4F8F8; } ul ul ul ul ul .forum-chapo { background: #FFF; } #signatures td.signature-date { background: #E4F0F0;} #signatures td.signature-nom { background: #ECF4F4;} #signatures td.signature-message { background: #F4F8F8;} /Border*/ .spip_modele {border: 1px dotted #666; } #entete {border-bottom: 2px solid #333;} #pied { border-top: 1px dotted #CCC;} .rubriques, .breves, .syndic, .forums, .divers {border: 1px solid #CCC;} .menu-titre {border-bottom: 1px dotted #CCC;} .lien {border: 1px solid #CCC;} .ps, .notes { border-top: 2px solid #CCC; } table.spip_barre a img {border: 1px outset #999; } table.spip_barre a:hover img { border: 1px solid #999; } #documents_portfolio { border-top: 2px solid #CCC; } #documents_joints { border-top: 2px solid #CCC; } .liste-articles li .texte {border: 1px solid #CCC;} .page_plan #contenu h2 {border: 1px solid #CCC;} fieldset.reponse_formulaire { border-color: #e86519; } .forum-repondre, .forum-decompte { border-top: 2px solid #CCC;} ul .forum-message { border: 1px solid #666; } ul ul .forum-message { border: 1px solid #A4A4A4; } ul ul ul .forum-message { border: 1px solid #B8B8B8; } ul ul ul ul .forum-message { border: 1px solid #CCC; } ul ul ul ul ul .forum-message { border: 1px solid #E0E0E0; } ul ul ul ul ul ul .forum-message { border: 1px dotted #E0E0E0; } ul .forum-chapo { border-bottom: 1px dotted #B8B8B8; } ul ul ul ul .forum-chapo { border-bottom: 1px dotted #E0E0E0; }</code></pre></div> <p><i>Ces lignes ont pu être obtenues facilement grace à grep.</i></p> <h2 class="spip">Conclusion</h2> <p>Voici, je pense, l'essentiel de ce qui est nécessaire pour modifier les couleurs de la distribution par défaut (DIST) de SPIP. On s'en est volontairement tenu ici à la coloration, sans jamais toucher à la composition (sauf bien sûr si on élargit à l'excès les bordures, ce qui est à éviter vues les différences d'interprétations des navigateurs) .</p></div> <hr /> <div class='rss_notes'><div id="nb2-1"> <p><span class="spip_note_ref">[<a href="#nh2-1" class="spip_note" title="Notes 2-1" rev="appendix">1</a>] </span>Cascading Style Sheet</p> </div><div id="nb2-2"> <p><span class="spip_note_ref">[<a href="#nh2-2" class="spip_note" title="Notes 2-2" rev="appendix">2</a>] </span>Système de Publication pour l'Internet Version 1.9</p> </div><div id="nb2-3"> <p><span class="spip_note_ref">[<a href="#nh2-3" class="spip_note" title="Notes 2-3" rev="appendix">3</a>] </span>Squelettes par défaut de SPIP, appelé suivant le nom du répertoire où sont contenus tous les fichier : /dist/ sans doute pour squelettes de DISTribution</p> </div></div> <div class='rss_ps'><p>A terme il n'est pas très propre de multiplier les redéfinitions css, donc une fois votre charte bien définies, n'hésitez pas à aller intégrer vos déclarations dans le flot normal des fichiers css.</p></div> </article> <article> <h1>SPIP : Analyse de la CSS des squelettes par défaut (DIST) (v1.9)</h1> <p>Julien Falconnet — 2007-08-03T23:07:26Z</p> <div class='rss_chapo'><p>Ayant passé de nombreuses heures à décortiquer et analyser la DIST, j'ai accumulé de nombreuses informations sur ces squelettes si particuliers de SPIP 1.9. Une des innovation de la DIST 1.9 est justement que la composition CSS a été repensée pour permettre de personnaliser au maximum la présentation juste en jouant avec les fichiers CSS (et donc en limitant le besoin de s'attaquer aux squelettes). Encore faut-il, pour profiter pleinement ce ces possibilités, prendre en main les fichiers CSS et pouvoir s'y retrouver rapidement. Cet article est une synthèse de mes recherches, à la fois fiche pratique et notes de travail. En espérant qu'il fera gagner un peu de temps à d'autres.</p></div> <div class='rss_texte'><h2 class="spip">Présentation générale et notes préliminaires</h2> <p>Certaines des informations contenues dans cet article se trouvent certainement ailleurs. J'ai au cours de mes recherches parcouru des centaines de pages et je serai incapable de citer tous les sites qui m'ont permis de me faire une vision d'ensemble. J'espère juste que le point de vue que je me suis formé sur le sujet contribuera à enrichir la panoplie d'aides disponible pour SPIP, et en particulier pour DIST, le jeu de squelette par défaut (<a href="http://www.spip.net/fr_article3437.html" class="spip_out" rel="external">pour plus d'explication sur la notion de squelette</a>).</p> <p>Cet article se décomposera en deux parties : <br /><span class="spip-puce ltr"><b>–</b></span> On essaiera de distinguer dans la présentation des squelettes par défaut (de la v1.9), les grandes zones CSS, afin d'avoir une vision générale des pages. On se limitera aux pages les plus utilisées (sommaire, rubrique, article). <br /><span class="spip-puce ltr"><b>–</b></span> On dépouillera les fichier de style par défaut.</p> <h2 class="spip">Analyse des pages</h2> <p>Les différents squelettes proposés dans le répertoire DIST sont constitués de manière similaire.</p> <p>Voici la structure CSS commune retrouvée dans les squelettes que j'ai étudiés (en noir les balises, en vert les class, en rouge les id). Ces structures sont basées sur mes pages web, donc il est possible que les pages soient plus riches que celles présentées (ou plus pauvres pour un site plus sommaire).</p> <div class='spip_document_1 spip_document spip_documents spip_document_image spip_documents_center spip_document_center spip_document_avec_legende' data-legende-len="114" data-legende-lenx="xx" > <figure class="spip_doc_inner"> <figcaption class='spip_doc_legende'> <div class='spip_doc_titre '><strong>Structure CSS générale de spip/dist </strong></div> <div class='spip_doc_descriptif '>Schéma de la structure CSS des principaux squelettes par défauts de SPIP1.9. </div> </figcaption></figure> </div> <p><i>on note que le body a une classe différente sur chaque page qui permet de spécifier des modifications ne devant intervenir que sur certains squelettes. J'ai ignoré les sections qui étaient invisibles, notament les .invisible et les br.nettoyeur</i></p> <p>Ensuite ce qui change c'est essentiellement dans la partie #contenu.</p> <p>Voici, une analyse un peu plus fine de la composition de la partie #contenu du squelette sommaire.html (la page d'accueil).</p> <div class='spip_document_3 spip_document spip_documents spip_document_image spip_documents_center spip_document_center spip_document_avec_legende' data-legende-len="32" data-legende-lenx="x" > <figure class="spip_doc_inner"> <figcaption class='spip_doc_legende'> <div class='spip_doc_titre '><strong>Structure CSS de sommaire.html </strong></div> </figcaption></figure> </div> <p>Voici, une analyse un peu plus fine de la composition de la partie #contenu du squelette rubrique.html (la page de présentation d'une rubrique).</p> <div class='spip_document_2 spip_document spip_documents spip_document_image spip_documents_center spip_document_center spip_document_avec_legende' data-legende-len="43" data-legende-lenx="x" > <figure class="spip_doc_inner"> <figcaption class='spip_doc_legende'> <div class='spip_doc_titre '><strong>Structure CSS du contenu de rubrique.html </strong></div> </figcaption></figure> </div> <p>Voici, une analyse un peu plus fine de la composition de la partie #contenu du squelette article.html (la page d'article).</p> <div class='spip_document_4 spip_document spip_documents spip_document_image spip_documents_center spip_document_center spip_document_avec_legende' data-legende-len="46" data-legende-lenx="x" > <figure class="spip_doc_inner"> <figcaption class='spip_doc_legende'> <div class='spip_doc_titre '><strong>Structure CSS du squelette dist/article.html </strong></div> </figcaption></figure> </div> <p>Pour compléter ces schéma il faudrait les refaire pour tous les squelettes de dist et descendre plus en détail, mais les grandes structures de composition sont déjà bien identifiées.</p> <h2 class="spip">Analyse des fichiers css de dist</h2> <p>Pour la plupart des squelettes on trouve 3 fichiers css qui sont utilisés par dist : <br /><span class="spip-puce ltr"><b>–</b></span> spip_style.css <br /><span class="spip-puce ltr"><b>–</b></span> habillage.css <br /><span class="spip-puce ltr"><b>–</b></span> spip_admin.css<br class='autobr' /> Détaillons le rôle de chacun.</p> <p><strong>spip_admin.css</strong></p> <p>Ne sert que pour l'affichage des boutons supplémentaires, lorsque le visiteur est identifié comme un auteur potentiel ("Espace privé", "Recalculer cette page" par exemple). Ce fichier a peut de chance d'avoir vraiment besoin d'être modifié et il est simple.</p> <p><strong>spip_style.css</strong></p> <p>Comme clairement mentionné en tête du fichier, celui-ci sert pour mettre en forme le code généré par SPIP et ses définitions sont nécessaires pour un bon affichage final (on peut les changer mais faut les définir). Dans la mesure où ce fichier est basique, appelé en premier et ses déclarations souvent redéfinies dans habillage.css, il est peut probable qu'il soit nécessaire de le modifier.</p> <p>Sa structure est la suivante en se basant sur les commentaires (entre parenthèse les styles qui y sont définis) : <br /><span class="spip-puce ltr"><b>–</b></span> Raccourcis typographiques de SPIP (<i>i.spip strong.spip hr.spip .spip_puce ul.spip ol.spip li.spip h3.spip </i>) <br /><span class="spip-puce ltr"><b>–</b></span> Paragraphes, citations, code et poésie (<i>p.spip p.spip_note blockquote.spip .spip_serif blockquote.spip div.spip_poesie div.spip_poesie .spip_code .spip_cadre .spip_cadre .spip_surligne</i> ) <br /><span class="spip-puce ltr"><b>–</b></span> Tableaux (<i>table.spip table.spip caption tr.row_first tr.row_odd tr.row_even</i>) <br /><span class="spip-puce ltr"><b>–</b></span> Logos, documents et images (<i>img .spip_logos .spip_documents .spip_documents_center span.spip_documents_center .spip_documents_left .spip_documents_right .spip_doc_titre <br class='autobr' /> .spip_doc_descriptif </i>) <br /><span class="spip-puce ltr"><b>–</b></span> Images typographiques (<i>.format_png</i>) <br /><span class="spip-puce ltr"><b>–</b></span> modèles par défaut (<i>.spip_modele</i>) <br /><span class="spip-puce ltr"><b>–</b></span> Barre de raccourcis typographiques (<i>table.spip_barre input.barre</i>) <br /><span class="spip-puce ltr"><b>–</b></span> Couleurs des liens de Spip(<i>.spip_note .spip_in .spip_out .spip_url .spip_glossaire .on</i>)</p> <p><strong>habillage.css</strong></p> <p>Ce fichier est LE fichier correspondant aux squelettes de dist. C'est lui qui contient non seulement toutes les définitions des classes, ids etc. des squelettes par défaut mais aussi une redéfinition de la plupart de ceux correspondant au code généré. Comme il est appelé en dernier c'est lui qui prévaut. C'est l'endroit idéal pour travailler sur une personnalisation graphique de la dist.</p> <p>La première chose qui m'a frappé c'est le choix des em comme unité de quasiment toutes les tailles. Il y a bien des px et des % mais ils sont pour les détails.</p> <p>Pour le reste le fichier est construit de manière trés ordonnée pour qu'on puisse s'y retrouver facilement.</p> <ul class="spip" role="list"><li> Correction des styles HTML par defaut (body</li></ul><ul class="spip" role="list"><li> Disposition a l'écran des blocs principaux (<i>#page #conteneur #conteneur #contenu #conteneur #navigation </i>) <ul class="spip" role="list"><li> Blocs du contenu (c-a-d. la colonne principale)(<i>.contre-encart .encart</i>)</li><li> Entête (<i>#entete #nom_site_spip a .spip_logos .formulaire_recherche</i>)</li><li> Fil d'Ariane (<i>#hierarchie</i>)</li><li> Pied de page (<i>#pied small img</i>)</li><li> Espaceur de blocs (<i>.nettoyeur</i>)</li><li> Non visible a l'écran (<i>.invisible</i>)</li></ul></li></ul><ul class="spip" role="list"><li> Typographie générale du site <ul class="spip" role="list"><li> Typo pour les menus et la navigation (<i>body #navigation .encart .formulaire_spip</i>)</li><li> Typo pour le contenu (<i>#contenu</i>)</li><li> Typo pour les citations et extraits introductifs (<i>q, blockquote, .liste-articles li .texte, h3.spip, .voirskel</i>)</li></ul></li></ul><ul class="spip" role="list"><li> Habillage des menus et de la navigation <ul class="spip" role="list"><li> Habillage général des menus de navigation (<i>.rubriques .breves .syndic .forums .divers .menu-titre #navigation .encart </i>)</li><li> Des couleurs spécifiques selon les types de menus (<i>.rubriques .breves .menu-titre .syndic .forums .divers </i>)</li></ul></li></ul><ul class="spip" role="list"><li> Habillage du contenu <ul class="spip" role="list"><li> Cartouche et titraille (<i>.cartouche .titre #contenu .surtitre .soustitre .spip_logos .traductions </i>)</li><li> Mise en forme des textes du contenu (<i>.chapo .lien .texte .ps .notes</i>)</li><li> Portfolio (<i>#documents_portfolio #document_actif</i>)</li><li> Listes de documents joints (a un article ou une rubrique) (<i>#documents_joints .spip_doc_titre .spip_doc_titre small .spip_doc_descriptif </i>)</li><li> Listes d'articles et extraits introductifs (<i>.liste-articles .titre .spip_logos .enclosures .texte .pagination </i>)</li></ul></li></ul><ul class="spip" role="list"><li> Habillage spécifique du plan du site (<i>.cartouche .page_plan #contenu .contre-encart</i>)</li></ul><ul class="spip" role="list"><li> Habillage des formulaires (<i>.formulaire_spip fieldset legend label .forml </i>) <ul class="spip" role="list"><li> Boutons (<i>.spip_bouton input</i>)</li><li> Réponse du formulaire (<i>fieldset .reponse_formulaire</i>)</li><li> Prévisualisation du message (<i>fieldset.previsu</i>)</li><li> Formulaire de login au forum (<i>.formulaire_login_forum .forml .spip_logos </i>)</li><li> Choix des mots-clefs (<i>choix_mots label</i>)</li><li> Formulaire de recherche (<i>.formulaire_recherche label</i>)</li></ul></li></ul><ul class="spip" role="list"><li> Habillage des forums (<i>.forum-repondre, .forum-decompte .forum .forum-fil .forum-chapo .forum-titre .forum-chapo .forum-texte .forum-lien .forum-repondre-message </i>) <ul class="spip" role="list"><li> Boite d'un forum : éclaircissement progressif des bords (<i>.forum-message</i>)</li><li> Boite de titre d'un forum : mise en couleur selon la profondeur du forum (<i>.forum-chapo</i>)</li></ul></li></ul><ul class="spip" role="list"><li> Habillage des pétitions (<i>#signatures .signature-date .signature-nom .signature-message</i>)</li></ul><ul class="spip" role="list"><li> Couleurs des liens (<i>a a:hover</i>)</li></ul><h2 class="spip">Conclusion</h2> <p>Ayant en main à la fois le schéma d'organisation des principales pages et une lecture détaillée des principaux fichiers CSS, nous avons presque tout ce qui nous faut pour modifier le dist avec facilité. Nous verrons dans un article ultérieur quelques cas de mise en pratique.</p> <p><strong>Articles de mise en pratique</strong></p> <ul class="spip" role="list"><li> <a href='https://falconnet.eu/SPIP-Colorier-des-squelettes-par.html' class="spip_in">Colorier la DIST</a></li><li> <a href='https://falconnet.eu/SPIP-Composer-les-squelettes-par.html' class="spip_in">Composer la DIST</a></li></ul></div> </article> </main></body></html>