SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

286 Plugins, 197 contribs sur SPIP-Zone, 236 visiteurs en ce moment

Accueil > Squelettes > Outils pour squelettes > Squelettes selon contexte > Affichages sur mots-clés > Choisir les CSS avec des mots clés

Choisir les CSS avec des mots clés

7 avril 2004 – par Karim Belkacem – 20 commentaires

3 votes

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 donner 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>, c’est-à-dire, et bien vous allez placer une <BOUCLE(MOTS){id_article} dans le a href de la Balise html standard « link » qui va appeller 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 styles et le tour est joué.

Les Avantages

-  Les plus importants pour moi, sont :

  • Créer qu’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 :).

Dernière modification de cette page le 12 août 2009

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 25 avril 2008 à 13:11, par Marc En réponse à : Choisir les CSS avec des mots clés

    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

  • Le 7 avril 2004 à 19:33, par zéta En réponse à : > Choisir les CSS avec des mots clés

    karim t’es un boss !

    • Le 9 avril 2004 à 13:34, par ? En réponse à : > Choisir les CSS avec des mots clés

      Cé génial !

    • Le 19 mai 2004 à 00:03, par Stéven En réponse à : > Choisir les CSS avec des mots clés

      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

  • Le 11 octobre 2007 à 08:00, par dbux En réponse à : Choisir les CSS avec des mots clés

    Et un grand merci à toi Karim

    Répondre à ce message

  • Le 3 juin 2005 à 16:24, par Korama En réponse à : > Moyen de la porter dans un fichier inclure

    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

  • Le 9 octobre 2007 à 14:48, par dbux En réponse à : Choisir les CSS avec des mots clés

    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

  • Le 14 juin 2007 à 14:28, par tantely En réponse à : Choisir les CSS avec des mots clés

    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

  • Le 21 avril 2005 à 18:33, par Flav’ En réponse à : > Choisir les CSS avec des mots clés

    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.

    • Le 21 avril 2005 à 18:53, par karim belkacem En réponse à : > Choisir les CSS avec des mots clés

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

    • Le 22 avril 2005 à 09:51, par Flav’ En réponse à : > Choisir les CSS avec des mots clés

      Salut,

      Dans une rubrique nommé « Consommation ».

    • Le 22 avril 2005 à 10:38, par Flav’ En réponse à : > Choisir les CSS avec des mots clés

      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 header.html)>
      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

    • Le 22 avril 2005 à 10:40, par Flav’ En réponse à : > Choisir les CSS avec des mots clés

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

    Répondre à ce message

  • Le 8 avril 2005 à 01:39, par eric02 En réponse à : > Choisir les CSS avec des mots clés

    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

    • Le 9 avril 2005 à 11:27, par Eric02 En réponse à : > Choisir les CSS avec des mots clés

      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

    • Le 14 avril 2005 à 16:53, par karim En réponse à : Pastilles

      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

  • Le 14 avril 2005 à 16:49, par karim En réponse à : > Nouveau liens

    Répondre à ce message

  • Le 29 mars 2005 à 16:12, par Nounette En réponse à : > Choisir les CSS avec des mots clés

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

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

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 Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Metas +

    3 décembre – commentaires

    Améliorez l’indexation de vos articles dans les moteurs et leur affichage sur les réseaux sociaux grâce aux métadonnées Dublin Core, Open Graph et Twitter Card. Installation Activer le plugin dans le menu dédié. Dans le panel de configuration, (...)

  • Critère {mots}

    6 août 2009 – 316 commentaires

    Permettre de sélectionner facilement des objets SPIP ayant un ou des mots clefs en communs.

  • LinkCheck : vérificateur de liens

    13 février 2015 – 64 commentaires

    Ce plugin permet de chercher et tester l’ensemble des liens présents dans les objets. Vous pourrez donc en quelques clics connaître les liens brisés ou défectueux qui se sont immiscés dans le contenu de votre site SPIP. La vérification s’effectue en (...)

  • Import ICS 2 (agenda distant)

    2 août – 39 commentaires

    La version 2 du plugin « import ICS » en reprend la principale fonctionnalité, à savoir l’ajout automatique d’évènements distants dans la liste des évènements d’un site. À la différence de la première version, elle ne dépend pas du plugin « Séminaire » et est (...)

  • GIS 4

    11 août 2012 – 1286 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

Ça spipe par là