Another teacher’s website

  tweet this page http://bit.ly/bYjcld + RSS
connexion - inscription
5/7 Sommaire de la rubrique Précédent Suivant

Feuille de style dynamique avec SPIP

Mettre des boucles et des balises dans le CSS

par SteF, le 9 octobre 2009 (maj 22 février 2010) BY-SA
2 commentaires

Feuille de style dynamique avec SPIP

Pour paramétrer une feuille de style dans l’espace privé de SPIP sans passer par du code css, on peut utiliser un formulaire CFG qui permettra de saisir les valeurs des attributs que l’on souhaite pouvoir modifier. En paramétrant les autorisations du formulaire, on peut y laisser accéder les administrateurs, les rédacteurs, ou au contraire seulement les webmestres.

CFG doit donc être installé avant tout.

Lien
- CFG:Références sur Spip-Contrib

Dans le dossier fonds que l’on aura au besoin créé dans le dossier du squelette ou dans le dossier du plugin CFG, on crée un formulaire avec autant de champs que l’on veut de paramètres.

Chaque champ pourra être appelé dans les squelettes avec une balise #CONFIG{nom_du_formulaire/nom_du_champ}.

Pour utiliser ces balises dans une feuille de style, celle-ci doit être interprétée par SPIP avant d’être envoyée au navigateur :

  • la feuille de style doit être renommée avec une extension html
styles.css devient styles.html
  • les valeurs des attributs doivent être remplacées sur la feuille de style par les balises #CONFIG correspondant aux saisies du formulaire.
  • l’appel de la feuille de style doit être modifié pour appeler un fichier du squelette.
<link rel="stylesheet" href="[(#CHEMIN{styles.css}|direction_css)]" type="text/css" media="screen, projection" />

devient

<link rel="stylesheet" href="/spip.php?page=styles" type="text/css" media="screen, projection" />

  • des headers css doivent être ajoutés au début du nouveau squelette, ainsi que la valeur du cache le cas échéant

A ce stade ça marche impeccable, les attributs saisis sur le formulaire CFG sont récupérés au moment du calcul de la feuille de style.

Le seul problème rencontré s’est présenté lorsque j’ai voulu modifier la feuille de style avec l’extension web developer. Ca n’est bien sûr plus possible. On peut tant qu’on veut bricoler le css à la volée et avoir un rendu immédiat, mais plus question d’enregistrer directement le fichier css modifié : les valeurs récupérées viendraient écraser les balises, et on perdrait les headers. Il faut donc reporter les modifs sur le squelette si elles ne concernent pas les attributs paramétrables, sur le formulaire sinon.

Retour en haut de la page

5/7 Sommaire de la rubrique Précédent Suivant

Conditions d'utilisation

Le billet ci-dessus « Feuille de style dynamique avec SPIP » par Stephane Busuttil et — sauf mentions spécifiques — tous les documents accessibles sur cette page sont librement mis à disposition selon les termes de la Creative Commons Paternité-Partage des Conditions Initiales à l'Identique 3.0 Unported.

+ de détails

2 commentaires

RSS

sobo, yoann

  • yoann, le 14 octobre 2009 à 09:40

    Super idée. Je ne savais pas qu’on pouvait le faire. Ca a l’air assez simple. Ca va me servir, plus qu’à m’y mettre !

  • sobo, le 10 octobre 2009 à 18:53

    Wow merci du tuyau je n’avais jamais vu qu’on pouvait éditer les css avec web developer . Je vais en rester là pour l’instant, cfg=Carrément Fortiche du Grelot !
    Cheers


Vos réactions

Laissez ci-dessous vos commentaires, précisions, remarques et questions. Vos contributions ne s'affichent publiquement qu'après validation, trop de spam sinon. Vous pouvez vous inscrire pour pouvoir publier des commentaires sans modération.

Ajouter un commentaire
  • (Pour créer des paragraphes, laissez simplement des lignes vides.)

Qui êtes-vous ? (optionnel)

Retour en haut de la page

SPIP and other web goodies

Dernières modifs

Last tweets from @sbusuttil

Visiteurs

en ce moment

aujourd'hui

en total

Derniers billets

Derniers commentaires

Derniers sites référencés

le contenu de ce site est librement utilisable, diffusable et modifiable selon les termes de la licence Creative Commons BY-SA.

copyleft Stéphane Busuttil - contact - another teacher's website est motorisé par SPIP