Choisir les CSS avec des mots clés

Plusieurs feuilles de styles présentant votre article sous différents aspects graphiques, la structure de votre page article.html ne change pas, seul le ou les styles choisis seront appliqués.

préambule : En savoir plus sur les CSS

Des articles sont disponibles sur le site de SPIP : Initiation : utiliser les feuilles de style avec SPIP

Choisir sa feuille de style par mots-clés

La particularité de cet exercice est que les feuilles de style sont gérées par les mots clés, donc directement dans la partie privée de Spip, en fonction de la thématique ou de la langue du site (Arabe, Persan, Hebreu).

Vous avez à votre gauche dans la demo, dans le petit menu, des exemples d’articles utilisant des styles liés par mot clé, vous pouvez aussi les télécharger, le lien est en bas de page.

J’explique ici ce que l’on peut faire avec un article, mais c’est pareil avec les rubrique, breve, site etc...

EXEMPLE D’UTILISATION

Dans la partie privée de Spip

Le commencement, le groupe et les mots clés

  • Créer un groupe de mots qui porterait le nom (CSS) par exemple.
  • Ajouter trois mots clés à l’intérieur de ce groupe dont le titre serait (CSS bleu, CSS rouge, CSS blanc).
  • Dans les champs textes de ces mots clés mettre le nom de la feuille de style, exemple Bleu.css, Blanc.css, Rouge.css.

Ensuite, création des articles et liaisons avec les mots clés des CSS

  • Créez trois articles, donnez leurs les noms des feuilles de style utilisées, attribuez un mot clé différent contenu dans le groupe de mots clé(CSS) à chacun.

Squelette

Créer vos feuilles de style

  • Je ne vais pas expliquer ici comment créer des feuilles de style, mais vous créez vos styles et leur donnez le nom défini dans le champs texte de vos mots clés.

Créer votre squelette article.html

  • Je ne vais pas expliquer ici comment créer un squelette, mais créez votre squelette comme vous avez l’habitude de faire, le seul changement est au niveau de la balise <head> et... </head>, à noter que vous allez placer une <BOUCLE(MOTS){id_article} dans le a href de la Balise html standard « link » qui va appeler le texte (donc le style.css) de l’article lié à ce mot.
  • Code à rajouter dans votre page article entre les head(s) de votre page.
    <link href="#URL_SITE_SPIP/chemin_css/<BOUCLE_css(MOTS){id_article}>
    [(#TEXTE)]</BOUCLE_css>" rel="stylesheet" type="text/css">

Téléchargement FTP

  • Télécharger votre page article.html et vos fichiers de styles, et le tour est joué.

Les Avantages

-  Les plus importants pour moi, sont :

  • Créer une seule page rubrique, article, brève, site, etc... pour l’ensemble du site (donc gain de temps de réalisation).
  • Application du ou des styles (si c’est prévu) au moment de la validation de l’article (thèmatiques, langues, hierarchies) etc...
  • Mise en place simple.
  • Fonctionnement de la méthode entièrement avec SPIP, (donc facilement gérable pour le web master ou pour des personnes qui débutent avec SPIP et le html.
  • Cela oblige à travailler en pur CSS et ça, à mes yeux c’est bien :).

Discussion

Aucune discussion

Ajouter un commentaire

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

Merci d’avance pour les personnes qui vous aideront !

Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.

Qui êtes-vous ?
[Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom