SPIP - Contrib

SPIP - Contrib

[ar] [en] [es] [fr] [it]

254 visiteurs en ce moment

fontsizeup fontsizedown
[20 commentaires]

Choisir les CSS avec des mots clés

mercredi 7 avril 2004, par Karim Belkacem

  • Digg
  • Del.icio.us
  • Facebook
  • Google
  • Technorati
0 vote

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 :).

P.-S.

Lien de demo labocss

Retour en haut de la page

20 Messages de forum

Voir toute la discussion

Pages 1 | 2

  • Répondre à ce message

    25 avril 13:11 , par Marc

    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

    11 octobre 2007 08:00 , par dbux

    Et un grand merci à toi Karim

  • Répondre à ce message

    11 octobre 2007 07:57 , par dbux

    Un grand merci Korama.

  • Répondre à ce message

    9 octobre 2007 14:48 , par dbux

    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 : (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 ] (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

    14 juin 2007 14:28 , par 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

    3 juin 2005 16:24 , par Korama

    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

    22 avril 2005 10:40 , par 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

    22 avril 2005 10:38 , par 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 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

  • Répondre à ce message

    22 avril 2005 09:51 , par Flav’

    Salut,

    Dans une rubrique nommé "Consommation".

  • Répondre à ce message

    21 avril 2005 18:53 , par karim belkacem

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

Pages 1 | 2

Répondre à cet article

Retour en haut de la page

Ça discute par ici

SPIP | Squelette | | Plan du site | Suivre la vie du site RSS 2.0