THELIA Forum

Welcome to the THELIA support and discusssion forum

Offline


Faire des modifications dans le CSS du template frontOffice par défaut peut paraitre un peu obscur pour celles et ceux qui avaient l'habitude d'inclure un fichier .css dans leur fichier HTML, comme au bon vieux temps. Mais bon, depuis, le développement front à un peu changé : http://tooling.github.io/book-of-modern … index.html

Une première chose: ne JAMAIS modifier les fichiers qui se trouvent dans web/assets: en effet, il s'agit d'un cache qui permet de rendre visible en ligne des fichiers qui ne sont pas censés être publiés (dans un Thelia standard, seul le contenu du dossier web devrait être publié). Comme ce cache peut être vidé à tout moment, vos modifs seraient perdues pour toujours.

Une deuxième chose : dans Thelia, le fichier CSS principal du template front-office, assets/dist/css/thelia.min.css, est généré par grunt ( https://gruntjs.com/ ) à partir d'une ribambelle de fichiers less et des directives du fichier Gruntfile.js. Donc là non plus, il ne faut pas modifier directement le fichier assets/dist/css/thelia.min.css.

Mais alors que faire ?!

Si vous n'êtes pas très à l'aise avec la console et les outils grunt et bower, sachez que Thelia sait très bien compiler tout seul et en temps réel les fichiers LESS pour produire un fichier CSS. Mais oui madame.

Pour ce faire il faut suivre la méthode suivante :

1) Travailler en mode développement, comme on devrait toujours le faire quant on fabrique une boutique Thelia 2. Voir ici comment ça marche : http://forum.thelia.net/viewtopic.php?id=11787
2) Dans le back-office, dans la configuration des variables, positionner la variable process_assets à 1, que qui indique à Thelia qu'il doit surveiller les modifications apportées aux assets. Na pas oublier de la remettre à 0 une fois en production, ça consomme de la ressource.
3) Dans le fichier layout.tpl, remplacer {stylesheets file='assets/dist/css/thelia.min.css'} par {stylesheets file='assets/src/less/thelia.less' filters='less'}, ce qui veut dire qu'on va compiler thelia.less chaque fois que ce fichier ou une de ses dépendances sera modifiée.
4) Toujours dans layout.tpl, modifier {declare_assets directory='assets/dist'} en {declare_assets directory='assets/src'}. Pour info, cette fonction permet de copier tous les assets statiques (fonts, images, js, etc.) dans le cache qui est dans web/assets.

Et voilà ! Chaque modification dans un fichier less sera désormais automatiquement prise en compte.

Inconvénients de cette méthode :

1) la compilation des .less consomme pas mal de ressources, du coup, chaque modif de style est un peu laborieuse si votre site ne tourne pas sur une machine puissante. C'est d'ailleurs en partie pour ça qu'on préfère générer les assets différemment, avec grunt , bower, gulp, webpack, etc. qui au passage permettent de faire bien plus que de simplement compiler du less.

2) On doit désormais travailler dans le dossier assets/src, et non plus dans assets/dist. Du coup, même en prod, on va rester dans assets/src. Ce n'est pas forcément un problème, mais il faut bien garder ça à l'esprit et ne plus faire de modifs dans assets/dist, voire le supprimer complètement.

Les détails sont dans la doc : http://doc.thelia.net/en/documentation/ … generation

Sur Windows, pour les allergiques à la console, une autre solution pour compiler à la demande les fichiers less est d'utiliser WinLess ( http://winless.org/ ) qui lui aussi permet de surveiller les répertoires des assets et de génère un fichier css à partir d'une collection de fichiers less.

Pour les pas-allergiques à la console qui ne veulent pas utiliser grunt, vous pouvez installer node.js, npm, et less.js : http://lesscss.org/, avec en:prime less-watch-compiler pour surveiller les changements et compiler automatiquement. Mais bon, si vous savez déjà faire ça, autant utiliser grunt.

A ce sujet, un article intéressant (bien que légèrement obsolète) sur Thelia School : http://thelia-school.com/utiliser-grunt … helia.html


CQFDev | Sites, boutiques, modules, développement et intégration pour Thelia 1 et 2