Joomla! Documentation™

La plupart des feuilles de style des templates par défaut de Joomla! 3.0 utilisent le langage LESS qui est ensuite compilé pour générer les fichiers CSS.

Où trouver les feuilles de style et le compilateur .less ?

Les blocs .less sont situés dans media/jui/less/. Les fichiers .less spécifiques au template sont situés dans templates/<templates>/less/.

Le script de génération des CSS, LESS compiler, et autres outils similaires sont situés dans le répertoire build/ à la source Joomla! sur GitHub. Allez sur Git pour les codeurs pour plus d'informations sur l'utilisation de GitHub. Le répertoire de compilation n'est disponible qu'à la source Joomla, il n'est inclut dans aucune version officielle de Joomla.

Comment regénérer les feuilles de style CSS

Afin de regénérer tous les fichiers CSS du noyau Joomla, vous devrez exécuter la génération de scripts comme une application CLI.

Par exemple :

cd joomla-cms/build
c:\xampp\php\php.exe generatecss.php

Compiler vos propres fichiers LESS pour votre template

Pour compiler les fichiers less pour votre template, il vous faut copier le script generatecss.php et l'ajuster par rapport à votre template.

Alternativement, vous pouvez utiliser le plugin LESS qui compile vos fichiers .less automatiquement lors du chargement de page : http://extensions.joomla.org/extensions/miscellaneous/development/22424

Vous trouverez d'autres solutions et outils sur cet article publié sur le Joomla! Community Magazine : http://magazine.joomla.org/international-stories-all/articles-in-french-all/des-outils-pour-less

Tous les compilateurs LESS ne sont pas identiques

Le compilateur LESS utilisé par le noyau Joomla! pour le codage des styles est issu de leafo.net/lessphp.

Si vous travaillez sur votre propre template, vous pouvez utiliser le compilateur de votre choix.

Différence entre les imports CSS et LESS

Le fichier principal .less et le point de départ dans Protostar, par exemple, est situé dans :

/templates/protostar/less/template.less

Si vous ouvrez ce fichier, vous y trouverez de nombreux @imports - des imports provenant de différents endroits. A la différence des imports CSS, les imports dans LESS sont compilés en un seul fichier CSS. En résulte un nombre moins importants de requêtes http et une augmentation de la vitesse de votre site.

Des CSS existantes vers LESS / importer des fichiers CSS

Vous pouvez ajouter vos fichiers et classes CSS existants aux LESS de votre template, ou commencer avec ce que vous avez. Toutes les déclarations CSS sont compatibles avec LESS, ainsi, vous pouvez tout simplement renommer vos fichiers .css en .less, les compiler et les utiliser. Vous pouvez ensuite, petit à petit, utiliser les fantastiques fonctionnalités dynamiques offertes par LESS : variables, mixins, opérations et fonctions. Voir : http://www.lesscss.org

Remarque : pour plus de clarté, les exemples ci-dessous sont basés sur Protostar, le template par défaut. Vos chemins peuvent donc être différents. Si vous souhaitez personnaliser le template Protostar, vous devriez tout d'abord le copier avant de le personnaliser - ainsi, les mises à jour Joomla! ne supprimeront pas vos personnalisations.

Option 1 : importer vos .css en tant que fichiers .less

(Cela demande un peu de travail, mais à mon avis, cela vaut le coup)

Maintenant, supposons que vous avez inclus vos fichiers personnalisés et que vous les avez compilés avec LESS compiler - vous n'avez pas besoin de réécrire votre css en LESS car les .css fonctionnent aussi bien. La seule chose que vous ayez à faire est de renommer vos fichiers .css en .less et ajouter une instruction @import dans /templates/protostar/less/template.less.

Je suppose que vous avez mis vos fichiers .css personnalisés renommés en .less dans le dossier /templates/protostar/less. Maintenant, ouvrez /templates/protostar/less/template.less et en bas du fichier importez vos fichiers .less personnalisés afin qu'ils substituent les déclarations existantes :

@import "modules.less";
@import "components.less";
@import "articles.less";

Maintenant, si vous compilez votre fichier principal template.less, vous vous retrouvez alors avec un seul fichier template.css optimisé et minifié (si vous le souhaitez). Vous avez également réduit les requêtes http et votre site devrait se charger plus rapidement. Désormais, vous pouvez commencer dans vos fichiers .less personnalisés à utiliser les variables et autres fonctionnalités cools qu'offre http://lesscss.org.

Option 2 : importer votre .css / cela ne fonctionne pas pour les substitutions

Dans /templates/protostar/less/template.less importez vos fichiers .css et ils seront inclus comme imports dans template.css:

@import "../css/modules.css";
@import "../css/components.css";
@import "../css/articles.css";

Mais en procédant ainsi, vous ne bénéficierez d'aucune optimisation. Et un autre gros inconvénient : cet import se plaçant toujours tout en haut, avant les autres déclarations, vous ne pourrez donc pas surcharger une déclaration existante.

Pour plus d'informations : http://lesscss.org/#usage (Section Importing)

Références

http://kyleledbetter.com/jui/less/ - Exemple de mise en place de votre propre template.less