L’ajout d'une feuille de style personnalisée est un processus assez simple. La première chose que vous devez faire est de créer le fichier custom SCSS / CSS personnalisé. Vous pouvez le faire dans n’importe quel éditeur de texte.
Pour ce faire, naviguez dans l’arborescence de THEME_DIR/custom/scss
et créez un fichier appelé custom.scss
s'il n'existe pas déjà. Si le répertoire/custom/scss/
n'existe pas, vous aurez besoin également de le créer. S’il est déjà là, il suffit d'ouvrir et de faire vos ajouts / modifications directement dans le fichier.
Joomla ne supporte pas la création de fichiers SCSS dans son outil de personnalisation de template intégré.
Ce fichier sera ensuite compilé comme un remplacement pour les fichiers de feuille de style de base du thème. Tout ce que vous placerez dans ce fichier remplacera les classes et les valeurs par défaut attribuées dans d'autres endroits de ce thème.
Vous pouvez formater le contenu du fichier soit en SCSS soit en CSS. Gantry va automatiquement le rassembler et de le compiler correctement.
Une fois que vous avez ajouté ce fichier et mettez votre CSS/SCSS personnalisé à l’intérieur, Gantry va faire deux choses. Cette activité est déterminée par le paramètre Production Mode. Vous pouvez atteindre ce paramètre en sélectionnant Gantry 5 Administrator > Extras.
Si vous avez Production Mode réglé sur Yes: vous aurez alors besoin d’accéder à l'administrateur Gantry 5, sélectionner le panneau d'administration Styles, et cliquer sur Recompile CSS pour les outlines où vous voulez avoir le style personnalisé appliqué.
Si le Production Mode est réglé sur No, alors Gantry va recompiler le CSS / SCSS automatiquement lorsque des modifications sont apportées.
Nous ne recommandons pas la modification ou la substitution de fichiers css/custom.css
ou css-compiled/custom.css
puisque ces changements seront perdus et / ou redéfinis lors de la recompilation du fichier custom.scss. Vous pouvez mettre du CSS pur dans le fichier custom.scss
et cela va fonctionner très bien.
Ceci indiquera à Gantry de prendre le nouveau style et de l’appliquer à une ou plusieurs pages. Une fois que vous aurez fait ceci, vous devriez être en mesure de voir vos modifications sur le serveur frontal.
Si vous rencontrez une erreur lorsque vous cliquez sur Recompile CSS cela est probablement dû à un problème dans le SCSS/CSS. A ce stade, le compilateur est assez impitoyable et tout problème de syntaxe peut provoquer des problèmes. Revérifiez votre code, enregistrez vos modifications dans le fichier custom.scss
, et essayez à nouveau.
Dependencies.scss
Nous avons consolidé les includes pour Bourbon, Nucleus, theme mixins, et variables dans un fichier_dependencies.scss
. Vous pouvez maintenant juste importer ce fichier pour tous les avoir. Utilisez @import "dependencies";
dans votre fichier custom.scss
pour l’importer.
Plus d’informations sur Sass et SCSS
Si vous êtes débutant dans Sass ou SCSS (Sassy CSS), ne vous inquiétez pas. Nous avons tout prévu ! Ci-dessous vous trouverez quelques ressources pour vous aider à apprendre et à connaître SCSS et découvrir pourquoi il est rapidement devenu la solution préférée de stylisme des développeurs Web dans le monde entier.
Au départ, la syntaxe SCSS est basée sur du CSS traditionnel. Il ajoute dans certaines des fonctionnalités et raccourcis rendues possibles par Sass, lui donnant la capacité d’exister dans les deux mondes. Vous pouvez très bien utiliser du CSS traditionnel dans un fichier SCSS, mais vous avez l'avantage supplémentaire de imbrication, mixins, et d'autres puissantes fonctionnalités qui le rendent plus facile à prendre le train en marche.
-
Sass Basics: Une introduction aux fonctionnalités de Sass, y compris des comparaisons côte-à-côte de syntaxe SASS et SCSS.
-
Getting Started with Sass: Un excellent guide pour Sass débutants.