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

11 discussions

  • Bonjour.

    Quelqu’un a t-il récemment utilisé cette contrib ? J’ai essayé de la mettre en œuvre sur mon site (un fond de page de couleur différente pour chaque rubrique (www.sqy-sportnature.fr/2/)
    Bien qu’ayant suivi pas à pas les instructions, la feuille de style ne semble pas être appelée.
    Quelqu’un connaît il une autre méthode pour gérer des styles différents d’une rubrique à l’autre ?

    Merci par avance.

    Répondre à ce message

  • 2

    karim t’es un boss !

    • Cé génial !

    • Stéven

      Nickel !
      J’avais tripatouillé un système pour afficher un article au format impression en appelant un autre squelette SPIP, ça marchait très bien mais ce truc me semble encore plus léger et souple :)
      Merci et vive SPIP+CSS ;) !

    Répondre à ce message

  • Et un grand merci à toi Karim

    Répondre à ce message

  • 1

    Hello,

    voici une boucle qui permet de porter cette contrib dans un fichier à inclure. Elle permet :

    -  si une rubrique fille n’a pas de mot clé, de récuperer le mot clé du secteur.
    -  si un article n’a pas de mot clé, de récuperer le mot clé de la rubrique mere ou du secteur si celle ci n’a pas de mot clé.

    <!-- 
        BOUCLE pour les RUBRIQUES
        on recupere le mot clé de la rubrique -->  
        <BOUCLE_cssRub(MOTS){id_rubrique}{id_groupe=1}>  
        <link rel="stylesheet"  type="text/css" href="squelettes/styles/[(#TEXTE)]">
        </BOUCLE_cssRub>
        </B_cssRub>
        <!-- si la rubrique n'a pas de mot clé, on va chercher celui du secteur -->
            <BOUCLE_rub(RUBRIQUES){id_rubrique}>
                <BOUCLE_cssSect(MOTS){id_rubrique=#ID_SECTEUR}{id_groupe=1}> 
                <link rel="stylesheet"  type="text/css" href="squelettes/styles/[(#TEXTE)]">
                </BOUCLE_cssSect>
            </BOUCLE_rub>
        <//B_cssRub>
        <!-- fin RUBRIQUES -->
        
        
        <!-- 
        BOUCLE pour les ARTICLES
        on recupere le mot clé de l'article -->
        <BOUCLE_cssArt(MOTS){id_article}{id_groupe=1}>  
        <link rel="stylesheet"  type="text/css" href="squelettes/styles/[(#TEXTE)]">
        </BOUCLE_cssArt>
        </B_cssArt>
            <BOUCLE_Art(ARTICLES){id_article}>
        <!-- si l'article n'a pas de mot clé, on récupere celui de la rubrique dont il depend -->    
                <BOUCLE_cssRubArt(MOTS){id_rubrique}{id_groupe=1}>
                <link rel="stylesheet"  type="text/css" href="squelettes/styles/[(#TEXTE)]">
                </BOUCLE_cssRubArt>
                </B_cssRubArt>
        <!-- si la rubrique n'a ps de mot clé, on récupere celui du secteur -->        
                    <BOUCLE_cssArtSect(MOTS){id_rubrique=#ID_SECTEUR}{id_groupe=1}> 
                    <link rel="stylesheet"  type="text/css" href="squelettes/styles/[(#TEXTE)]">
                    </BOUCLE_cssArtSect>
                <//B_cssRubArt>
            </BOUCLE_Art>
        <//B_cssArt>
        <!-- fin ARTICLES -->

    Répondre à ce message

  • Bonjour,

    ma version de spip est : SPIP 1.9.2b [9381]

    j’ai suivi ce super tutoriel pour choisir ma feuille de style avec des mots-clés
    (le lien de labocss en bas de page ne fonctionne plus)
    je l’ai adapté avec la balise #CHEMIN actuelle, seulement elle ne fonctionne qu’avec cette syntaxe, c’est à dire sans les [( )] et accolades :
     rel= »stylesheet« type= »text/css" />
    (désolé mon code ne s’affiche pas)

    voici celle de la dist spip :
    [(#REM) Feuille de style par defaut pour le code genere par SPIP ]
    (#CHEMIN{spip_style.css}" type="text/css" media="all" />
    (désolé le code ne s’affiche pas)

    mon message qui s’affiche est : Warning : Missing argument 1 for find_in_path(), called in /home/dbal/public_html/xspip_margat/ecrire/public/composer.php(48) : eval()’d code on line 815 and defined in /home/dbal/public_html/xspip_margat/ecrire/inc/utils.php on line 622

    je ne sais pas quoi faire, quelqu’un peut-il m’aider ?

    Répondre à ce message

  • tantely

    Bonjour,

    où doit-on exactement placer les styles car j’ai essayé de les mettres dans le dossier
    squelettes mais ça ne marche pas ?
    j’ai attribué les mots clés css jaune, css rouge pour chaque article, je souhaite juste avoir des couleurs différents pour chaques articles ou chaque rubrique.

    Répondre à ce message

  • 4
    Flav’

    Bonsoir,

    Je n’y arrive pas. J’ai mon site. J’ai fait 10 rubriques, et 2 articles. J’ai mes fichiers html (mes squelettes) dans le dossier « dist ». Mes fichiers css (bleu.css, vert.css, rouge.css, etc) dans un dossier nommé « css » à la racine de mon FTP (soit à la même hierarchie que le dossier « dist »).
    J’ai fai un groupe de mots nommé « CSS » avec dedans 4 mots clés comme « CSS Vert » qui a dans son descriptif et dans son texte explicatif « vert.css ».

    Enfin j’ai mis dans mon fichier article.html cette ligne «  stylesheet » type=« text/css »>"

    J’ai assigné ce mot clé à mon article en question, et j’ai fait de même pour ma rubrique (car moi je veut que chaque rubrique et ces articles soient de la même couleur donc du même fichier *.css).

    Si quelqu’un peut m’aider, car là j’ai beaucoup de mal à m’en sortir.

    — 
    Cordialement, Flavien.

    • karim belkacem

      salut, ton article est dans une rubrique ou une sous rubrique ?

    • Flav’

      Salut,

      Dans une rubrique nommé « Consommation ».

    • Flav’

      Re,

      Apparement j’ai reussi à faire marcher le systeme en essayant pleins de choses.
      Je crois que j’avais oublier les boucles articles (j’ai un peu de mal, comme je commence à utilser SPIP).

      En fait mon problème maintenant c’est que je met dans mes fichiers squelette html des lignes comme
      Ainsi si je veut modifier mon header sur toutes les pages en même temps je modifie juste le fichier « header.html ».
      Malheureusement ça n’a pas l’air de prendre mes variables de mon fichier header.html sur les pages où cette page est demandée.
      (Dans un fichier nommé « droite.html » ces lignes suivantes sont par contre bien remplacés par la case de recherche « 
      [(#FORMULAIRE_RECHERCHE)]
       »).

      — > Si vous avez une idée pour comment faire pour modifier qu’une fois le header sur toute les pages en même temps et que mes variables soient prises en compte ?

      Merci

    • Flav’

      Re, désolé tout n’a pas pris... "dans mes fichiers squelette html des lignes comme...< INCLURE(dist/header.html) >

    Répondre à ce message

  • 2

    Bonjour

    Comme toujours le travail que effectue est trés appréciable et permet de gagner pas mal de temps surtout en maintenance.

    A partir de ta contrib, je veux aller plus loin, si je mets une couleur pour la rubrique, je voudrais appliquer la meme couleur à une pastille (fichier image en gif) que je placerais devant le nom de la rubrique dans mon menu.

    6 rubriques principales donc 6 couleurs

    Je bloque sur la boucle qui me permets de changer la couleur de chaque pastille

    ma boucle est la suivante :

    ....

    ....

    J’ai comme message d’erreur :

    ....

    # Erreur(s) dans le squelette

    * Table SQL « mots_rubriques » inconnue, ’_mot’
    * Table SQL « mots_rubriques » inconnue, ’_mot’
    * Table SQL « mots_rubriques » inconnue, ’_mot’
    * (mots_rubriques)
    Erreur MySQL
    SELECT mots_rubriques. FROM mots_rubriques AS mots_rubriques WHERE (mots_rubriques.id_mot = ’’) AND (mots_rubriques.id_rubrique = ’1’)
    Erreur de syntaxe près de ’FROM mots_rubriques AS mots_rubriques WHERE (mots_rubriques.id_m’ à la ligne 2
    AIDE,
    * (mots_rubriques)
    Erreur MySQL
    SELECT mots_rubriques. FROM mots_rubriques AS mots_rubriques WHERE (mots_rubriques.id_mot = ’’) AND (mots_rubriques.id_rubrique = ’2’)
    Erreur de syntaxe près de ’FROM mots_rubriques AS mots_rubriques WHERE (mots_rubriques.id_m’ à la ligne 2
    AIDE,

    ....

    Pourtant la table « mots_rubriques » existe bien ???

    J’ai fait dans phpmyadmin des tests pas à pas j’arrive à qq chose, mais cela m’ennuie de mettre du php brut alors que je sens :

    -  que je ne suis pas loin
    -  et surtout qu’avec des boucles on doit y arriver, mais je n’arrive pas à traduire correctement ce que je fais avec Mysql en boucle, y’ a un truc que je ne capte pas bien

    Merci pour les pistes

    AMicalement

    Eric

    question plus concernant le lien que tu indiques à mettre dans le head
    Si dans article.html, je remplace le « id-article » par « id_rubrique », cela me permet il de ne pas affecter de mot clef aux articles ?

    Re re Merci

    • Ben la balise « code » Ne fonctionne plus ?

      Autres questions concernant ta contrib :

      Comment appliquer cela au fichier « plan.html », si l’on souhaite dans la structure de base, mettre en fond des balises :
      .plan-seceurh1,
      ...
      la couleur choisie pour la dite rubrique .

      Remerciements

      Eric

    • Une possibilités serait d’exploiter le #LOGO_MOT_NORMAL ET/OU LE #LOGO_MOT_SURVOL du mot-clé de la css. Je n’ai pas tester mais je cogite ça depuis un moment.

    Répondre à ce message

  • Répondre à ce message

  • Nounette

    Le lien de démo ne fonctionne plus...
    Dommage !

    Répondre à ce message

Ajouter un commentaire

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

  • 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