CSS Dynamique avec TVs

From MODx Wiki

Cet article est une ébauche. Vous pouvez partagez vos connaissances en l'améliorant!

Diagnostic

Vous concevez une page, et vous voulez pouvoir inclure dynamiquement différentes feuilles de style selon où vous êtes dans le site. L'exemple type est lorsque vous avez des sous-sections dans lesquelles vous avez besoin de différents styles de CSS. Comment procéder ? C'est le but de ce tutoriel.

Première étape : Créer la variable de modèle (TV)

Première chose, vérifiez que vous ayez bien un modèle créé pour votre site principal. (Ce modèle sera appelé "Public")

Maintenant allez dans Gestion Ressources, et cliquez sur l'onglet Variables de modèle , cliquez sur Nouvel Template Variable. Donnez un nom au nouveau TV customCSS. Donnez une valeur à la légende "Fichier CSS", et une description qui dit, "Numéro ID du fichier CSS à utiliser."

Le type d'entrée doit être Number, et la valeur par défaut doit être @INHERIT. Ceci pour s'assurer que chaque enfant de la page recevra bien le bon numéro de fichier CSS. Ceci vous aide à changer dynamiquement une sous-section avec une seule valeur!

Ensuite, assurez-vous que la boite Accés au modèle, votre modèle soit coché. Ceci permet l'accés à ce TV dans ce modèle.Soyez sûr que Tous les groupes de documents (Public) soit coché dans la boite Permissions d'accés, ainsi tous les documents du groupe peuvent accéder au changement du TV.

Deuxième étape : Editer le modèle (template)

Maintenant allez dans le code du modèle et editez-le. Insérez cette ligne dans le header :

<link type="text/css" href="[(site_url)][~[*customCSS*]~]"  rel="stylesheet" />

Vous pouvez aussi utiliser une règle @import :

<style type="text/css"> @import url('[(site_url)][~[*customCSS*]~]');</style>

[(site_url)] makes sure that it prefixes the href tag with the right URL. The block [~[*customCSS*]~] is a compound variable that does two things:

1. The [*customCSS*] variable is parsed, which is given a value based upon that document's assigned TV value. So if I went to a subsection and changed that variable to 4, it would be parsed here as 4.
2. That parsed value (let's say 4) is then parsed again into the [~~] tag. This tells the template to find the document with that number (here [~4~]) and create a URL based upon its location. So basically, we're creating a dynamic way to load URLs.

Once you're done with that, save the template and move on.

Pas 3: Créé votre document dans MODx

La structure

Now, there are different ways of doing this. What you're going to be doing is putting CSS files into MODx as documents, so where you put them is really up to you. However, I recommend creating a _css document folder in your root of the site that will obviously be distinguished as a folder containing CSS files.

I also recommend having that directory and its subdirectories parallel the directory structure of the rest of the site. This will make it easier for you later on, if your site gets big.

For example, if I've got a document in About/Team/George.html, and I want a specific CSS file for just that, it'd be a good idea to create a virtual directory structure in MODx that goes like _css/About/Team/George.css. This makes it much easier to quickly find CSS files, and it also allows you to restrict access to certain CSS files based upon their parallel access to the documents.

Les paramètres

So anyway, go create your CSS file wherever you want. Now you're creating a document -- remember this -- so you need to set some specific options so that MODx will recognize it as a CSS document, not a HTML one.

In Document Settings -> General, make sure that the file has an alias, and that it uses the (blank) template. Also, make sure that the "Show in Menu" box is unchecked. These settings are crucial for the css to work!

Next, in Document Settings -> Page Settings, uncheck Rich Text?, Log Visits, and Searchable. In the Content Type select box, select text/css. And make sure that the document is published.

Then save and continue on!

Pas 4: Spécifier le fichier CSS

Okay, so say you just created your CSS file, with ID 92. Now go to the document you want to use the customCSS (note, you can use CSS files on more than one document!) and edit it.

Scroll down to the Template Variables box, and find the Custom CSS File row. Set it to 92. (It will default at @INHERIT, which is what you normally want.) This will make sure that this document and all of its children use the custom CSS file.

And You're Done! Congratulations!