SPIP

Une typographie personnalisée

Antoine — 2004-04-14T22:51:38Z

Après une introduction générale sur les feuilles de style, nous allons maintenant passer en revue quelques-uns de leurs usages les plus courants sous SPIP.

Sommaire

Intéressons-nous ici aux styles créés lorsque des raccourcis typographiques sont insérés dans un texte entré sous SPIP. Que l'on affiche un article, une brève, une rubrique ou autre n'a aucune importance : les styles portent toujours les mêmes noms. Cela ne nous empêchera pas de découvrir comment y appliquer éventuellement des habillages graphiques distincts...

Le texte de base

Même le texte de base sous SPIP, celui que vous entrez dans un des formulaires de l'espace privé, en tapant au kilomètre, génère des tags HTML particuliers. En effet, il est découpé en paragraphes ; à chaque paragraphe correspond un tag

. Nous pouvons donc associer à ces paragraphes un style bien précis, qui ne sera pas appliqué au reste du texte de la page.

Commençons par choisir une police de caractères. Pour cela on utilise la propriété font-family, qui prend pour valeur un ou plusieurs noms de polices de caractères à utiliser. Pour un corps de texte comme celui d'un article il vaut mieux une fonte à empattements ; mettons que vous vous décidiez pour « Bookman Old Style ». Ajoutez donc à votre fichier mes_styles.css la règle suivante :

p.spip { font-family: "Bookman Old Style"; }

(notez qu'un nom de fonte en plusieurs mots doit être entouré de guillemets...) Un problème peut survenir si la police « Bookman Old Style » n'est pas installée sur l'ordinateur de vos visiteurs : chaque ordinateur a une configuration différente, et n'oubliez pas que les fontes « gratuites » de Microsoft sont rarement installées sur Linux et Macintosh... Il est préférable de prévoir ce cas et spécifier une ou plusieurs polices de remplacement successives :

p.spip { font-family: "Bookman Old Style", "Times New Roman", serif; }

On spécifie ici comme remplaçantes successives de Bookman, la classique « Times New Roman », et en dernier recours « serif ». « serif » n'est pas une police en soi, c'est un code générique qui indique au navigateur de prendre la police à empattements par défaut de l'ordinateur ; de même « sans-serif » spécifie la police sans empattements par défaut (en général Arial ou Helvetica).

On retiendra cette règle importante : dans la propriété font-family, il convient toujours de proposer plusieurs choix successifs pour s'adapter aux polices de caractères installées sur l'ordinateur du visiteur. Notons que cette règle est aussi valable pour le tag du HTML traditionnel.

Bien évidemment d'autres propriétés sont à votre disposition. Vous pouvez par exemple régler la taille du texte avec la propriété font-size. Notez cependant que les navigateurs disposent d'un réglage pour configurer la taille du texte par défaut, et le texte principal de vos pages ne devrait pas outrepasser ce réglage, pour des raisons de confort visuel : c'est l'utilisateur qui choisit la taille de base, non le webmestre.

Notez bien que les styles que vous appliquez aux tags

s'appliquent à chaque paragraphe en tant qu'objet autonome. Cela autorise certains effets intéressants, comme par exemple d'indenter la première ligne des paragraphes en utilisant la propriété text-indent. Par défaut, cette propriété prend pour valeur zéro, c'est-à-dire qu'il n'y a pas d'indentation. On peut la modifier pour obtenir, sur chaque première ligne, un décalage de soixante pixels à droite :

p.spip { text-indent: 60px; }

Appliquer un traitement différencié

Plutôt que de nous étendre sur la panoplie de styles générés automatiquement par les raccourcis typographiques de SPIP, et que vous pourrez habiller à votre guise (ils sont passés en revue dans les articles suivants de cette même rubrique), étudions ici le cas où vous voulez appliquer un habillage différent à un même style, selon sa position dans ce squelette. Ce besoin est légitime : on veut par exemple afficher le corps de texte dans une police à empattements avec indentation en début de paragraphe, mais le post-scriptum dans une police plus « lisse » (sans empattements) et plus petite, sans indentation.

Cette opération est en réalité très simple. Il faut d'abord modifier votre squelette afin d'introduire les éléments qui permettront de discriminer le texte et le post-scriptum. Cela prendra par exemple, à l'intérieur de la boucle ARTICLES principale, la forme suivante :

#TEXTE
 #PS

Il faut ici recalculer la page (car on a modifié le HTML...). L'affichage du navigateur est toujours le même : normal, nos nouveaux styles ne faisant l'objet d'aucune règle dans la feuille de style, ils sont ignorés par le navigateur. Remédions-y :

.texte p.spip { font-family: "Times New Roman", serif; text-indent: 50px; } .ps p.spip { font-family: Tahoma, Arial, sans-serif; font-size: 90%; }

La grande nouveauté ici ne réside pas dans les propriétés graphiques mais dans la façon dont on les applique au code HTML. En effet, « .texte p.spip » signifie : « cette règle s'applique à tous les tags

qui sont contenus dans un tag ayant un attribut class égal à “texte” ». On pourrait restreindre un peu cette règle en spécifiant que le tag parent doit en plus être un tag

(le début de la règle s'écrirait alors « div.texte p.spip ») ; mais comme nous maîtrisons la structure de nos propres squelettes, il n'est pas utile de rendre la feuille de style très restrictive.

Toujours est-il que cette feuille de style a le résultat voulu : les paragraphes du corps de texte s'affichent avec une indentation, ceux du post-scriptum dans une fonte plus petite et sans indentation. Pour vérifier que ces règles s'appliquent bien à chacun des paragraphes

et non au

englobant, on peut s'amuser à définir un cadre noir :

.texte p.spip { border: 1px solid black; }

On note que chaque paragraphe du corps de texte (mais pas du post-scriptum) est entouré de son propre cadre noir. Si on avait simplement écrit « .texte » au lieu de « .texte p.spip », c'est le texte tout entier qui serait entouré d'un unique cadre noir englobant. Remarquons en passant l'apparition de la propriété border...

Note : cette astuce, consistant à tracer un cadre de couleur pour savoir à quels éléments s'applique précisément une règle, peut être très utile quand votre feuille de style s'enrichit. N'hésitez pas à l'utiliser si vous commencez à perdre pied...

Cette méthode est très puissante et se généralise avec profit pour la structuration de votre mise en page.

Ils sont beaux, mes formulaires !

Antoine, tetue — 2004-04-14T22:51:33Z

Vous avez personnalisé la mise en page et la typographie de votre site, mais maintenant ce sont les formulaires SPIP qui jurent totalement sur le reste ! Pas de panique, là aussi les feuilles de style remédient au problème.

Sommaire

Différents formulaires sont utilisés dans le site public, pour le moteur de recherche interne, la rédaction des messages des forums, les inscriptions à l'espace privé, etc. Il en va pour ces formulaires SPIP comme pour le reste : leur aspect graphique peut être modifié via CSS afin de s'insérer sans hiatus dans votre design.

Pour tirer profit de cet article, mieux vaut connaître les balises HTML propres aux formulaires.

À chaque formulaire son style

Tous les formulaires SPIP utilisés dans le site public sont contenus dans une div dotée du même style, .formulaire_spip, qui permet d'appliquer facilement une modification devant concerner l'ensemble de ces formulaires.

Par exemple, pour mettre en gras tous les descriptifs des champs de saisie () de vos formulaires, vous stylerez ainsi :

.formulaire_spip label { font-weight: bold; }

Chaque formulaire est, de plus, doté d'un style qui lui est propre. Celui-ci permet, inversement, de modifier l'apparence de certains formulaires en particulier, sans interférer sur les autres.
Chacun de ces styles est nommé de même que la balise appelant le formulaire et son squelette. Par exemple, le fichier HTML du formulaire de recherche est formulaire_recherche.html ; celui-ci est inséré dans les squelettes grâce à la balise #FORMULAIRE_RECHERCHE ; et le style qui lui est associé est donc .formulaire_recherche.
Les squelettes des formulaires sont ainsi nommés : dist/formulaires/recherche.html.

Styles des champs de saisie

Le style .forml est appliqué aux champs de saisie des formulaires. Il permet de définir la couleur du fond et la largeur des champs de saisie, mais aussi leur taille et police de caractère. Par exemple :

.forml { width: 99%; padding: 1px; border: 1px solid #666; font-family: Verdana; font-size: 11px; }

Ce style est particulièrement utile pour homogénéiser l'ensemble des champs de saisie, quelques soient les balises qui le reçoivent, telles que et </code>, toutes deux présentes dans le formulaire de forum.</p> <p>Chaque champ de saisie est étiqueté d'un terme explicatif, enveloppé dans une balise HTML <code class='spip_code spip_code_inline' dir='ltr'><label></code>. On modifiera l'apparence de ces étiquettes par cette définition de style : <strong><code class='spip_code spip_code_inline' dir='ltr'>.formulaire_spip label</code></strong>.</p> <p>Les styles CSS permettent non seulement de changer les couleurs et les polices de caractères, mais aussi de gérer le positionnement relatif des objets dans la page. Ils permettent même de définir précisément la disposition des éléments entre eux (par exemple : <code class='spip_code spip_code_inline' dir='ltr'><input></code>, <code class='spip_code spip_code_inline' dir='ltr'><textarea></code> et <code class='spip_code spip_code_inline' dir='ltr'><label></code>), sans utiliser de <code class='spip_code spip_code_inline' dir='ltr'><table></code></p> <p> pour la mise en page.</p> </section><section class="sommaire-section sommaire-section_niveau1 sommaire-section_h2" aria-labelledby="Des-boutons-a-vos-couleurs"><h2 class="h2" id='Des-boutons-a-vos-couleurs'>Des boutons à vos couleurs<a class='sommaire-back sommaire-back-4' href='#s-Des-boutons-a-vos-couleurs' title='Retour au sommaire'></a></h2> <p>Une nouvelle qui ravira les débutant-e-s en CSS : on peut changer la couleur des champs mais aussi des boutons des formulaires<span class="spip_note_ref"> [<a href="#nb1" class="spip_note" rel="appendix" title="Notons cependant que certains navigateurs imposent leurs propres boutons (…)" id="nh1">1</a>]</span>. Le style <strong><code class='spip_code spip_code_inline' dir='ltr'>.spip_bouton</code></strong> est celui utilisé pour les boutons des formulaires SPIP.</p> <p>Par exemple, pour que les boutons aient un fond bleu clair, et une bordure suffisemment visible (épaisse, en relief et bleue foncée), modifiez la règle suivante dans votre feuille de style :</p> <div class="precode"><pre data-language="css" class='spip_code spip_code_block language-css' dir='ltr' style='text-align:left;'><code>.spip_bouton { background-color: #b0d0FF; border: 2px outset #000060; color: black; } </code></pre></div> <p>Le formulaire de forum propose une barre de raccourcis typographiques. L'apparence de celle-ci est contrôlée par le style <strong><code class='spip_code spip_code_inline' dir='ltr'>.spip_barre</code></strong>. Ainsi, pour modifier l'apparence des icônes qui la composent, et, par exemple, distinguer celles-ci au survol de la souris, vous définirez les styles pour <code class='spip_code spip_code_inline' dir='ltr'>.spip_barre a img</code> puis <code class='spip_code spip_code_inline' dir='ltr'>.spip_barre a:hover img</code>.</p> </section><section class="sommaire-section sommaire-section_niveau1 sommaire-section_h2" aria-labelledby="Organiser-ces-elements-de-facon-visiblement-logique"><h2 class="h2" id='Organiser-ces-elements-de-facon-visiblement-logique'>Organiser ces éléments de façon visiblement logique<a class='sommaire-back sommaire-back-4' href='#s-Organiser-ces-elements-de-facon-visiblement-logique' title='Retour au sommaire'></a></h2> <p>Les différents éléments d'un formulaire sont plus rigoureusement regroupés en « blocs logiques » grâce aux balises HTML dédiées <code class='spip_code spip_code_inline' dir='ltr'><fieldset></code> et <code class='spip_code spip_code_inline' dir='ltr'><legend></code>. Leur apparence est donc contrôlée par <strong><code class='spip_code spip_code_inline' dir='ltr'>.formulaire_spip fieldset</code></strong> et <strong><code class='spip_code spip_code_inline' dir='ltr'>.formulaire_spip legend</code></strong>. Utile pour encadrer chaque partie d'une bordure, et aérer vos formulaires en espaçant ces blocs les uns des autres, par exemple.</p> <p>Quelques styles complémentaires permettent d'affiner encore la présentation de vos formulaires :</p> <p>- L'apparence des messages d'erreur et autres réponses renvoyées par les formulaires peut être personnalisée par le style <strong><code class='spip_code spip_code_inline' dir='ltr'>.reponse_formulaire</code></strong>.</p> <p>- Certains formulaires permettent de prévisualiser les informations saisies avant de les envoyer. L'apparence de cette prévisualisation est contrôlée par le style <strong><code class='spip_code spip_code_inline' dir='ltr'>.previsu</code></strong>.</p> <p>- Enfin, ce dernier style n'est pas utilisé dans les formulaires, mais est lié au formulaire de recherche interne au site : <strong><code class='spip_code spip_code_inline' dir='ltr'>.spip_surligne</code></strong> permet de mettre en évidence les termes recherchés dans les pages de résultats.</p></section></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>Notons cependant que certains navigateurs imposent leurs propres boutons stylisés et ne vous laisseront pas en changer l'aspect.</p> </div></div> <div class='rss_ps'><p>Cet article de Pompage.net introduit au style des formulaires : « <a href="http://www.pompage.net/traduction/cssdezero-13" class="spip_out" rel="external">CSS : on reprend tout à zéro ! (13ème épisode)</a> ».<br class='manualbr' />Lire aussi : <a href="https://www.alsacreations.com/actu/lire/453-comment-ne-pas-styler-les-elements-de-formulaire.html" class="spip_out" rel="external">Comment ne pas styler les éléments de formulaire ?</a></p></div> </article> <article> <h1>Mettez-y votre style !</h1> <p>Antoine, tetue — 2004-04-14T22:51:21Z</p> <div class='rss_chapo'><p>Vous pouvez modifier les styles fournis avec SPIP et ajouter les votres, en créant votre propre feuille de style. Voici comment.</p></div> <div class='rss_texte'><div class="well nav-sommaire nav-sommaire-4" id="nav6a066f4bb8ded7.17406972"> <h2>Sommaire</h2><ul class="spip" role="list"><li> <a id="s-Creez-votre-feuille-de-style"></a><a href="#Creez-votre-feuille-de-style" class="spip_ancre">Créez votre feuille de style</a></li><li> <a id="s-Respectez-la-lt-lt-cascade"></a><a href="#Respectez-la-lt-lt-cascade" class="spip_ancre">Respectez la « cascade »</a></li><li> <a id="s-Des-styles-qui-ont-de-la-lt-lt-class"></a><a href="#Des-styles-qui-ont-de-la-lt-lt-class" class="spip_ancre">Des styles qui ont de la « class »</a></li><li> <a id="s-La-gestion-du-cache"></a><a href="#La-gestion-du-cache" class="spip_ancre">La gestion du cache</a></li></ul></div><p><strong>Si vous connaissez le langage CSS</strong> (sinon lisez d'abord cet article : « <a href='https://www.spip.net/fr_article2330.html' class="spip_in">Introduction aux feuilles de style</a> »), vous pouvez très facilement modifier l'apparence de votre site, sans même avoir besoin de connaître le langage des boucles et balises de SPIP.</p> <section class="sommaire-section sommaire-section_niveau1 sommaire-section_h2" aria-labelledby="Creez-votre-feuille-de-style"><h2 class="h2" id='Creez-votre-feuille-de-style'>Créez votre feuille de style<a class='sommaire-back sommaire-back-4' href='#s-Creez-votre-feuille-de-style' title='Retour au sommaire'></a></h2> <p>Lors de l'installation de SPIP, les squelettes sont distribués avec plusieurs « feuilles de style externes » qui regroupent les indications produisant l'habillage graphique du site. Vous pouvez modifier ces fichiers et ajouter vos propres définitions de style, mais il est préférable de le faire dans votre propre fichier CSS afin de pas voir vos ajouts « écrasés » lorsque vous installerez une nouvelle version de SPIP.</p> <blockquote class="spip"> <p><strong>Important :</strong> ne travaillez jamais directement dans les fichiers fournis par défaut, sinon vous risqueriez de perdre toutes vos modifications à chaque mise à jour de SPIP ! Pour éviter cela, faites une copie des fichiers que vous souhaitez modifier.</p> </blockquote> <p>1. Créez un fichier <code class='spip_code spip_code_inline' dir='ltr'>mes_styles.css</code> (ou tout autre nom que vous avez décidé de lui donner) et rangez-le dans votre <a href='https://www.spip.net/fr_article3347.html' class="spip_in">dossier « squelettes »</a>. Vous copierez dans ce fichier les définitions de styles que vous souhaitez utiliser et modifier ; mais pour la suite de ce tutorial, nous allons considérer que vous partez d'une feuille vierge.</p> <p>2. Appelez cette feuille de style dans l'entête de votre squelette, c'est-à-dire entre les balises <code class='spip_code spip_code_inline' dir='ltr'><head></code> du fichier HTML (aux côtés du <code class='spip_code spip_code_inline' dir='ltr'>title</code> et autres <code class='spip_code spip_code_inline' dir='ltr'>meta</code>). De la façon suivante :</p> <div class="precode"><pre data-language="spip" class='spip_code spip_code_block language-spip' dir='ltr' style='text-align:left;'><code><link rel="stylesheet" type="text/css" href="#CHEMIN{mes_styles.css}" /> </code></pre></div> <p>Bien souvent une seule feuille de style suffit pour tout l'habillage graphique d'un site, mais vous pouvez déclarer de cette façon autant de feuilles de style que nécessaire.</p> <p>- <strong>SPIP vous facilite la vie : perso.css</strong></p> <p>Pour découvrir un peu la personnalisation des styles, vous pouvez aussi tout simplement créer un fichier <code class='spip_code spip_code_inline' dir='ltr'>perso.css</code> dans le dossier <code class='spip_code spip_code_inline' dir='ltr'>squelettes/css/</code>.</p> <p>Comme SPIP charge ce fichier en dernier dans le head, les styles qui y sont définis ou redéfinis deviendront prioritaires. L'utilisation de ce fichier est bien pratique pour :</p> <ul class="spip" role="list"><li> modifier l'un ou l'autre style</li><li> tester des modifications</li><li> déclarer des styles perso</li></ul> <p>Pour des développements et personnalisations plus conséquentes, il reste conseillé d'utiliser vos propres feuilles de style déclarées comme indiqué ci-dessus.</p> </section><section class="sommaire-section sommaire-section_niveau1 sommaire-section_h2" aria-labelledby="Respectez-la-lt-lt-cascade"><h2 class="h2" id='Respectez-la-lt-lt-cascade'>Respectez la « cascade »<a class='sommaire-back sommaire-back-4' href='#s-Respectez-la-lt-lt-cascade' title='Retour au sommaire'></a></h2> <p>Il est important de garder à l'esprit le fonctionnement « <strong>en cascade</strong> » du <abbr title="Cascading Style Sheets" lang="en">CSS</abbr> (<i>Cascading Style Sheets</i> signifie littéralement « feuilles de style en cascade ») : lorsque plusieurs définitions de style concernent un même élément, <strong>est appliqué en priorité le style le plus proche de l'élément</strong>. L'ordre dans lequel les styles sont « lus » a donc une importance.</p> <p>- <i> <strong>Feuilles de style externes</strong> </i></p> <p>Si vous utilisez plusieurs feuilles de style, notez que l'ordre dans lequel celles-ci sont appelées dans l'entête de la page a une importance. Si vous appelez <i>d'abord</i> <code class='spip_code spip_code_inline' dir='ltr'>mes_styles.css</code> et <i>ensuite</i> <code class='spip_code spip_code_inline' dir='ltr'>spip_style.css</code> : ce sont les styles de cette dernière, plus <i>proches</i>, qui s'appliqueront prioritairement aux votres. Pensez donc à faire l'inverse :</p> <div class="precode"><pre data-language="spip" class='spip_code spip_code_block language-spip' dir='ltr' style='text-align:left;'><code><link rel="stylesheet" type="text/css" href="#CHEMIN{spip_style.css}"> <link rel="stylesheet" type="text/css" href="#CHEMIN{mes_styles.css}"> </code></pre></div> <p>- <i> <strong>Styles définis dans le code HTML</strong> </i></p> <p>Si vous ne souhaitez pas toucher aux fichiers CSS, vous pouvez continuer à insérer, par endroits, des indications graphiques directement dans le code HTML de vos squelettes : en définissant quelques styles dans le <code class='spip_code spip_code_inline' dir='ltr'>head</code>, et/ou en plaçant des indications de style directement dans les balises HTML de la page.</p> <p>Les styles placés directement dans les balises, étant au plus <i>proches</i> des éléments concernés, seront prioritaires sur ceux définis dans le <code class='spip_code spip_code_inline' dir='ltr'>head</code>, eux-mêmes prioritaires sur ceux des feuilles de style <i>externes</i>.</p> </section><section class="sommaire-section sommaire-section_niveau1 sommaire-section_h2" aria-labelledby="Des-styles-qui-ont-de-la-lt-lt-class"><h2 class="h2" id='Des-styles-qui-ont-de-la-lt-lt-class'>Des styles qui ont de la « class »<a class='sommaire-back sommaire-back-4' href='#s-Des-styles-qui-ont-de-la-lt-lt-class' title='Retour au sommaire'></a></h2> <p>Comment fait-on alors pour changer, par exemple, l'apparence de tous les intertitres SPIP ? C'est très simple. Ouvrez votre fichier <code class='spip_code spip_code_inline' dir='ltr'>mes_styles.css</code> dans un éditeur de texte et ajoutez-y la ligne suivante :</p> <p><code class='spip_code spip_code_inline' dir='ltr'>h3.spip { color: red; font-size: 18px; }</code></p> <p>Rechargez la page : tous les intertitres apparaissent comme par magie en rouge ; remarquez de plus que les autres <code class='spip_code spip_code_inline' dir='ltr'>h3</code> de votre page, s'il y en a, ne sont <i>pas</i> affichés en rouge.</p> <p>Expliquons brièvement la syntaxe de cette règle de mise en page :</p> <p>- <code class='spip_code spip_code_inline' dir='ltr'>h3.spip</code> juste avant les accolades signifie que la règle ne s'applique qu'aux <code class='spip_code spip_code_inline' dir='ltr'><h3></code> dotés d'un attribut <code class='spip_code spip_code_inline' dir='ltr'>class</code> égal à « <code class='spip_code spip_code_inline' dir='ltr'>spip</code> ». Notez bien : ni les <code class='spip_code spip_code_inline' dir='ltr'><h3></code> n'ayant pas cet attribut, ni les balises ayant cet attribut sans être des <code class='spip_code spip_code_inline' dir='ltr'><h3></code>, ne seront concernés.</p> <p>Si vous ajoutez vos propres styles, sachez que la valeur donnée à l'attribut <code class='spip_code spip_code_inline' dir='ltr'>class</code> est totalement arbitraire. La seule chose qui compte, est que vous utilisiez bien le même nom dans le code HTML (<code class='spip_code spip_code_inline' dir='ltr'>class="toto"</code>) et dans votre feuille de style CSS (<code class='spip_code spip_code_inline' dir='ltr'>.toto { ... }</code>).<br class='autobr' /> Rappelons toutefois que vous ne pouvez pas renommer les <code class='spip_code spip_code_inline' dir='ltr'>class</code> associées au code généré par SPIP (dont les définitions de style sont regroupées dans <code class='spip_code spip_code_inline' dir='ltr'>[spip_style.css->1177]</code>).</p> <p>- Les accolades contiennent la liste des propriétés graphiques associées au style ainsi défini. Ici nous voyons que la couleur est réglée à rouge et que la police de caractères doit être affichée avec une taille de 18 pixels.</p> <p>Notons que toutes les propriétés non définies dans cette liste garderont leur valeur habituelle pour la balise considérée ; dans le cas présent, le <code class='spip_code spip_code_inline' dir='ltr'>h3</code> générera toujours un texte en gras, car rien dans cette définition de style ne dit le contraire.</p> </section><section class="sommaire-section sommaire-section_niveau1 sommaire-section_h2" aria-labelledby="La-gestion-du-cache"><h2 class="h2" id='La-gestion-du-cache'>La gestion du cache<a class='sommaire-back sommaire-back-4' href='#s-La-gestion-du-cache' title='Retour au sommaire'></a></h2> <p>Le fait que les styles soient définis dans un fichier séparé a une conséquence importante. En effet, ce fichier, au contraire de vos squelettes n'est pas géré par SPIP (il n'en a pas besoin !). Cela signifie que <strong>si vous modifiez une feuille de style, vous n'avez pas besoin de vider le cache de SPIP : il suffit de recharger la page dans votre navigateur.</strong> Cela rend le réglage de la mise en page encore plus aisé.</p> <p>Rappelons tout de même que votre feuille de style doit être déclarée dans vos fichiers HTML, et que ceux-ci doivent être recalculés une première fois pour que cette déclaration soit prise en compte. ... <code class='spip_code spip_code_inline' dir='ltr'></quote></code></p></section></div> </article> <article> <h1>Introduction aux feuilles de style</h1> <p>Antoine — 2004-04-14T22:51:15Z</p> <div class='rss_chapo'><p>Les feuilles de style permettent de centraliser et de gérer de manière beaucoup plus aisée les indications graphiques que l'on insérait traditionnellement dans le HTML. Elles s'écrivent dans un langage spécifique : le CSS.</p></div> <div class='rss_texte'><div class="well nav-sommaire nav-sommaire-2" id="nav6a066f4bbaa9f5.71252913"> <h2>Sommaire</h2><ul class="spip" role="list"><li> <a id="s-Pourquoi-les-feuilles-de-style"></a><a href="#Pourquoi-les-feuilles-de-style" class="spip_ancre">Pourquoi les feuilles de style ?</a></li><li> <a id="s-Concretement"></a><a href="#Concretement" class="spip_ancre">Concrètement</a></li></ul></div><p>Comme vous le savez déjà, SPIP traite séparément le contenu de sa mise en page et son habillage graphique : les squelettes trient et affichent les contenus souhaités en pages HTML, dont l'habillage graphique est réalisé par des feuilles de style <abbr title="Cascading Style Sheets" lang="en">CSS</abbr>. Passez à la vitesse supérieure pour habiller vos squelettes : utilisez les feuilles de style avec SPIP !</p> <section class="sommaire-section sommaire-section_niveau1 sommaire-section_h2" aria-labelledby="Pourquoi-les-feuilles-de-style"><h2 class="h2" id='Pourquoi-les-feuilles-de-style'>Pourquoi les feuilles de style ?<a class='sommaire-back sommaire-back-2' href='#s-Pourquoi-les-feuilles-de-style' title='Retour au sommaire'></a></h2> <p>Si vous réalisez des pages Web de manière « traditionnelle », les indications graphiques sont insérées directement dans le code HTML de votre page. Ainsi à chaque fois que vous voulez mettre un texte en rouge, vous écrivez <code class='spip_code spip_code_inline' dir='ltr'><font color="red"></code>. Pour afficher un tableau avec des bordures épaisses, vous écrivez <code class='spip_code spip_code_inline' dir='ltr'><table border="2"></code>.</p> <p>Avec cette méthode et un site statique (où chaque article a une page HTML spécifique), changer la maquette de tout un site est un cauchemar : il faut rechercher dans tous les fichiers HTML, les portions de code à modifier, et effectuer ces modifications une par une (par exemple remplacer <code class='spip_code spip_code_inline' dir='ltr'><font color="red"></code> par <code class='spip_code spip_code_inline' dir='ltr'><b></code> si l'on décide que les éléments anciennement affichés en rouge seront désormais en gras).</p> <p>Comme vous le savez déjà, SPIP améliore beaucoup la situation : vous n'avez plus à modifier des centaines de fichiers HTML, mais juste quelques squelettes ; et votre mise en page est remise à jour automatiquement sur l'ensemble du site.<br class='autobr' /> Cependant le problème n'est pas entièrement résolu. Par exemple, mettons que vous ayez décidé d'employer un certain bleu pastel sur beaucoup d'éléments du site, afin de donner une identité graphique à votre site : les liens, les encarts, certains éléments de navigation... sont affichés en bleu pastel. Le jour où vous voudrez remplacer ce bleu pastel par un vert pâle, vous devrez modifier tous les endroits du squelette où ce bleu apparaissait pour le remplacer par le vert pâle. Cela peut être décourageant : il n'est pas aisé dans ces conditions de changer rapidement le rendu des pages, ne serait-ce que pour faire des essais.</p> <p>La solution réside dans l'utilisation des « <strong>feuilles de style externes</strong> ». Une feuille de style est un fichier où vous définissez un ensemble de propriétés graphiques, et les endroits où elles s'appliquent. On note deux avantages capitaux des feuilles de style :</p> <ul class="spip" role="list"><li> <strong>la feuille de style est un fichier unique et centralisé</strong>, que vous pouvez appliquer à autant de fichiers HTML (et de squelettes SPIP) que vous le désirez ;</li><li> <strong>les propriétés graphiques sont définies une seule fois dans la feuille de style</strong>, quel que soit le nombre d'endroits où ces propriétés sont appliquées dans le HTML.</li></ul></section><section class="sommaire-section sommaire-section_niveau1 sommaire-section_h2" aria-labelledby="Concretement"><h2 class="h2" id='Concretement'>Concrètement<a class='sommaire-back sommaire-back-2' href='#s-Concretement' title='Retour au sommaire'></a></h2> <p>Pour être appliquée à un fichier HTML (qui peut être un squelette SPIP), la feuille de style doit être déclarée dans l'entête de votre page (entre les balises <code class='spip_code spip_code_inline' dir='ltr'><head></code>), de la façon suivante :</p> <div class="precode"><pre data-language="html" class='spip_code spip_code_block language-html' dir='ltr' style='text-align:left;'><code><link rel="stylesheet" type="text/css" href="mes_styles.css" /> </code></pre></div> <p>- Ici le fichier <code class='spip_code spip_code_inline' dir='ltr'>mes_styles.css</code> contient les propriétés graphiques que vous voulez appliquer à la page HTML (dans la suite de cette rubrique, on supposera que <code class='spip_code spip_code_inline' dir='ltr'>mes_styles.css</code> est le nom que vous avez choisi pour ce fichier).</p> <p>- Ce fichier porte l'extension « <code class='spip_code spip_code_inline' dir='ltr'>.css</code> ». En effet, <strong><abbr title="Cascading Style Sheets" lang="en">CSS</abbr></strong> est le nom du langage utilisé pour les feuilles de style, de la même manière que HTML est le nom du langage utilisé pour la réalisation de pages web. <strong>Notez bien que le CSS n'est pas propre à SPIP, il s'agit d'un standard du Web</strong><span class="spip_note_ref"> [<a href="#nb2-1" class="spip_note" rel="appendix" title="La première version de CSS a vu le jour en 1996. C'est un langage de feuille (…)" id="nh2-1">1</a>]</span>.</p> <blockquote class="spip"> <p>Note : une feuille de style peut s'appliquer aussi bien à une page HTML classique (« statique ») qu'à un squelette SPIP (« dynamique »). Cela veut dire que toute astuce CSS valable dans du HTML classique sera aussi utilisable dans un squelette de votre site.</p> </blockquote> <p>Si vous avez bien lu les paragraphes précédents, vous serez peut-être dubitatifs : oui, il faut apprendre un nouveau langage pour utiliser les feuilles de styles (SPIP n'y est pour rien !). Les CSS n'utilisent pas, en effet, la syntaxe du HTML. Cependant ce langage est très simple, et il suffit de quelques exemples pour mettre le pied à l'étrier. De très nombreuses documentations existent sur ce sujet par ailleurs.</p></section></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>La première version de CSS a vu le jour en 1996. C'est un langage de feuille de style, approuvé comme <i>Recommandation du <a href="https://fr.wikipedia.org/wiki/W3C" class="spip_glossaire" rel="external">W3C</a></i>.</p> </div></div> </article> <article> <h1>Les feuilles de style de SPIP</h1> <p>Antoine, L'équipe de SPIP, tetue — 2001-09-22T22:00:00Z</p> <div class='rss_chapo'><p>Le code généré par SPIP est doté de certains styles qu'il convient de définir.</p></div> <div class='rss_texte'><div class="well nav-sommaire nav-sommaire-2" id="nav6a066f4bbc8e79.16384309"> <h2>Sommaire</h2><ul class="spip" role="list"><li> <a id="s-Des-styles-definis-par-SPIP"></a><a href="#Des-styles-definis-par-SPIP" class="spip_ancre">Des styles définis par SPIP</a></li><li> <a id="s-Ou-se-trouvent-ces-definitions-de-style"></a><a href="#Ou-se-trouvent-ces-definitions-de-style" class="spip_ancre">Où se trouvent ces définitions de style ?</a></li></ul></div><p>Dans <a href='https://www.spip.net/fr_article2330.html' class="spip_in">l'article précédent</a>, nous avons vu quels étaient les avantages des feuilles de style CSS. Voyons maintenant quel usage spécifique SPIP fait des feuilles de style.</p> <section class="sommaire-section sommaire-section_niveau1 sommaire-section_h2" aria-labelledby="Des-styles-definis-par-SPIP"><h2 class="h2" id='Des-styles-definis-par-SPIP'>Des styles définis par SPIP<a class='sommaire-back sommaire-back-2' href='#s-Des-styles-definis-par-SPIP' title='Retour au sommaire'></a></h2> <p>Dans SPIP, certains styles jouent un rôle important : ils servent à modifier les propriétés graphiques des éléments qui ne sont <i>pas</i> définis dans <i>votre</i> HTML (celui de votre squelette), mais dans le code <i>généré par SPIP</i>. En effet, <strong>SPIP associe de lui-même plusieurs styles au code qu'il génère</strong>.</p> <p>Ainsi, lorsque l'on utilise les <a href='https://www.spip.net/fr_article1578.html' class="spip_in">raccourcis SPIP</a> dans les articles (permettant par exemple de mettre en gras, en italique, créer des liens hypertextes, des intertitres, des tableaux, etc.), SPIP produit les balises HTML nécessaires à ces effets, chacune de ces balises étant alors dotée d'un sélecteur CSS.</p> <blockquote class="spip"> <p>Par exemple, le raccourci suivant :</p> <p><code class='spip_code spip_code_inline' dir='ltr'>Ceci est un [lien->http://www.uzine.net]</code></p> <p>est ainsi transformé en code HTML :</p> <p><code class='spip_code spip_code_inline' dir='ltr'>Ceci est un <a href="http://www.uzine.net" class="spip_out">lien</a></code></p> </blockquote> <p>Quel est l'intérêt ? Ces balises portent un nom spécifique dans l'attribut <strong><code class='spip_code spip_code_inline' dir='ltr'>class</code></strong> : ce nom définit à quelle « classe » ils appartiennent, c'est-à-dire un ensemble d'éléments HTML qui hériteront des mêmes propriétés graphiques définies dans la feuille de style.<br class='manualbr' />Dans notre exemple, le code HTML est complété par le sélecteur CSS intitulé « <code class='spip_code spip_code_inline' dir='ltr'>spip_out</code> ». Le webmestre peut donc pousser la personnalisation graphique des liens sortants en modifiant la définition stylistique de « <code class='spip_code spip_code_inline' dir='ltr'>spip_out</code> » (couleur différente, fond coloré, police utilisée, etc.).</p> <p>L'apparence de la plupart des raccourcis SPIP peut ainsi être paramétrée dans les feuilles de style. Cela vaut aussi pour les formulaires automatiques (répondre à un forum, signer une pétition...) et d'autres encore. Certains de ces styles sont très utiles, voire indispensables, d'autres seront réservés aux webmestres qui souhaitent obtenir des effets exotiques.</p> </section><section class="sommaire-section sommaire-section_niveau1 sommaire-section_h2" aria-labelledby="Ou-se-trouvent-ces-definitions-de-style"><h2 class="h2" id='Ou-se-trouvent-ces-definitions-de-style'>Où se trouvent ces définitions de style ?<a class='sommaire-back sommaire-back-2' href='#s-Ou-se-trouvent-ces-definitions-de-style' title='Retour au sommaire'></a></h2> <p>Les propriétés graphiques appliquées aux pages HTML sont regroupées dans les fichiers <code class='spip_code spip_code_inline' dir='ltr'>.css</code> qui accompagnent les squelettes. Les squelettes et leurs feuilles de style sont regroupés dans le <a href='https://www.spip.net/fr_article3347.html' class="spip_in">répertoire <code class='spip_code spip_code_inline' dir='ltr'>squelettes-dist/</code></a>.</p> <p>- Les définitions de style propres à SPIP se trouvent dans la « feuille de style externe » nommée <strong><code class='spip_code spip_code_inline' dir='ltr'>spip_style.css</code></strong>. Celle-ci regroupe les définitions des styles associées au code généré par SPIP (passées en revue dans <a href='https://www.spip.net/fr_rubrique269.html' class="spip_in">cette rubrique</a>).</p> <p>- Une autre feuille de style, <code class='spip_code spip_code_inline' dir='ltr'>spip_admin.css</code>, permet de contrôler l'apparence des boutons d'administration (« recalculer cette page », etc.).</p> <p>Vous pouvez les modifier (c'est même conseillé : « <a href='https://www.spip.net/fr_article2331.html' class="spip_in">Mettez-y votre style !</a> »), mais notez bien que vous ne pouvez pas les renommer. <strong>Ces styles sont indispensables et doivent nécessairement être définis pour un bon affichage de vos squelettes</strong>.</p></section></div> </article> </main></body></html>