Maintenant que tous les problèmes liés à l'utilisation de feuille de style dynamique (autrement dit, créer vos CSS en tant que documents MODx), je vais pouvoir détailler pour vous la procédure à suivre
Pour commencer,
l'utilisation de cette méthode suppose que les URL simples sont activées, et que "Chemin d'accès pour les alias simples" est sur "Oui".
1. Dans MODx, créer un dossier pour ranger vos feuilles de style (c'est plus propre). Je partirai de l'hypothèse pour cet exemple que le dossier s'appelle "css".
2. Dans ce dossier, pour créer une feuille de style css, attention il faut sélectionner Modèle utilisé => (blank) et aller dans
Réglages de la page > Type de Contenu et sélectionner "text/css"
3. Insérer vos styles, ou alors si vous voulez tirer partie des chunks, insérez des chunks contenant des styles (par exemple un chunk "mise_en_page", un chunk "style inline", etc...). Ensuite,
ne pas oublier cette étape : saisissez l'alias de votre feuille de style en ajoutant .css à la fin, et sauvegardez.
4. Modifier vos gabarits :
Traditionnellement, un gabarit comprend un appel à la feuille de style s'appuyant sur la méthode "link", et un chemin d'accès sur le serveur :
<link rel="stylesheet" href="assets/templates/default/site.css" type="text/css" media="screen" />
Nous allons modifier la méthode, et
pour assurer la compatibilité avec Internet Explorer, utiliser une règle @import (la méthode link avec une feuille de style en tant que document MODx ne marche qu'avec FF et Opera) et aussi nous allons utiliser l'alias de la feuille de style (et non la syntaxe [~xx~] ou xx est l'ID de la feuille de style, cela ne marche pas avec IE) :
<style type="text/css">
@import url('css/ma_feuille_de_style.css');
</style>.
5. Modifier votre .htaccess : Pour vous assurer de la compatilibité de cette méthode avec IE, vous devez modifier votre .htaccess et décommenter les lignes suivantes :
BrowserMatch "MSIE" brokenvary=1
BrowserMatch "Mozilla/4.[0-9]{2}" brokenvary=1
BrowserMatch "Opera" !brokenvary
SetEnvIf brokenvary 1 force-no-vary
Et voilà !
Vous pouvez désormais vous passer des CSS statiques
Vos feuilles de styles peuvent comprendre des chunks, voire même utiliser des snippets (pour randomiser un fond d'écran par exemple). Pour les variables de modèle, cela reste à tester je ne peux pas m'avancer là dessus...
Merci à Susan Ottwell pour la méthode @import au lieu de link et alias au lieu de [~xx~].
Merci à Eastbind pour le .htaccess.
Merci à tous ceux qui m'ont aidé à résoudre les problèmes avec IE !
!!!
mais je n'ai pas encore eu le temps de le mettre en place et surtout je veux comprendre un peu plus le fonctionnement pour faire facilement des mises à jour de mon site (dans le cas où je décide de changer complètement la mise en page avec une nouvelle css et sans supprimer les autres accessibles à partir de CssSwitcher) 
.
Quote from: davidm at May 16, 2006, 08:20 AM