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 lea 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 :).
Discussions par date d’activité
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
karim t’es un boss !
Cé génial !
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
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é.
Un grand merci Korama.
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
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
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.
salut, ton article est dans une rubrique ou une sous rubrique ?
Salut,
Dans une rubrique nommé « Consommation ».
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
Re, désolé tout n’a pas pris... "dans mes fichiers squelette html des lignes comme...< INCLURE(dist/header.html) >
Répondre à ce message
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
http://www.glums.com/rubrique.php3?id_rubrique=32
Répondre à ce message
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 :
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.
Suivre les commentaires : |