La substitution de paramètres de particules

Les particules sont extrêmement souples. Vous pouvez accéder à leurs paramètres sur plusieurs niveaux et modifier leurs paramètres par défaut pour l’ensemble du site, un outline spécifique, ou même une instance dans le gestionnaire de mise en page ou le Menu Editor.

Les particules viennent chacun avec leur propre jeu de paramètres par défaut qui peuvent ( ou pas ) être configurés dans le fichier YAML de la particule. Ces valeurs par défaut sont ensuite héritées par le schéma de base dans le panneau des paramètres par défaut de la particule. A partir de là, vous pouvez modifier ces valeurs par défaut dans l'outline de Base, les Sous Outlines, et même dans le cas de la particules spécifique instance tel qu'elle apparaît dans le Gestionnaire de mise en page, Éditeur de menu, Module ou Widget.

Voici une présentation rapide des niveaux différents d’héritage d’une particule.

En bref, l'héritage pour les paramètres de particules fonctionne comme ceci: Fichier YAML de particule > Valeurs par défaut de particules de l'Outline de base > Valeurs par défaut de particules de l'Outline > Instance individuelle et chaque étape héritant et / ou modifiant les réglages de la précédente.

Panneau Particle defaults de l' Outline de Base

Dans le Outline de Base, vous pouvez définir les paramètres par défaut pour n’importe quelle particule dans le panneau d'administration Particle Defaults. Les réglages placés ici deviennent les valeurs par défaut globales applicables à tous les outlines et instances de particules individuelles, sauf contrordre. Ceci est l'endroit où vous devriez placer vos paramètres les plus couramment utilisés pour une particule donnée.

Par exemple, si vous souhaitez que votre particule logo utilise la même source image sur toutes vos pages, sauf une ou deux, Vous devez définir cette image ici et remplacer en utilisant soit les Paramètres de contour appliquée à ces pages d'exception, ou dans les instances individuelles de particules dans le gestionnaire de mise en page.

Panneau Particle Defaults de l'Outline (autre que celui de base)

Dans les outlines qui ne sont pas définies comme la valeur par défaut, vous pouvez remarquer que le panneau d'administration Particle Defaults a grisés les Paramètres de particules pour la plupart (si ce n'est tous) de vos particules. En changeant un paramètre et / ou en sélectionnant la case à cocher sur le côté droit de la boîte de paramètres pour cette particule, vous pouvez remplacer les paramètres par défaut pour l'outline.

Maintenant, chaque particule placée dans le gestionnaire de mise en page pour ce profil particulier aura ces nouveaux paramètres par défaut.

Paramètres individuels de particules dans le Gestionnaire de mise en page

Lorsque vous placez une particule dans le gestionnaire de mise en page d'un outline, vous créez une instance. Cette instance permet de régler les paramètres de particules pour cette particule spécifique, qui ne touchent pas d'autres instance de cette particule. Si, par exemple, vous voulez voir le logo apparaître différemment dans une instance, vous devez modifier ses paramètres ici.

Dans l'exemple ci-dessus, nous avons changé la valeur Start Year pour la particule en utilisant son panneau de configuration dans le Gestionnaire de mise en page. La case cochée à la droite du champ indique qu'il est remplacé alors que les autres champs restent gris et sans contrôle. Ces paramètres sont hérités des niveaux de défaut plus élevés.

Vous pouvez accéder à ces paramètres spécifiques à l'instance en sélectionnant la roue dentée sur le côté droit de la particule dans le gestionnaire de configuration.

La substitution de fichiers Source des particules

Parfois, les modifications que vous souhaitez apporter à une...

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.