Comment remplacer les styles CSS dans mon modèle?
Lorsque vous utilisez un modèle Joomla gratuit/commercial de Template Club X/Y/Z, quel est le meilleur moyen d'inclure mes propres styles CSS?
Pourquoi utiliser des substitutions CSS?
Il est toujours judicieux de séparer vos styles CSS du style de modèle existant si vous utilisez un modèle Joomla pré-construit.
- C'est plus facile à entretenir
- Vos modifications ne seront pas perdues si vous mettez à niveau le modèle
- Vous pouvez facilement copier/déplacer les modifications vers un autre modèle ou un autre site.
Comment les substitutions CSS fonctionnent-elles?
CSS signifie "Cascading Style Sheets", ce qui signifie que, comme plusieurs règles de feuille de style peuvent s'appliquer à un élément HTML particulier, la règle utilisée est choisie en passant des règles plus générales à la règle spécifique requise (le la règle la plus spécifique est choisie), ou basée sur l'ordre des règles pour n'importe quel élément (la dernière règle trouvée est choisie).
Tant que votre fichier CSS personnalisé est chargé après les fichiers CSS de modèle par défaut, vous pouvez ajouter vos propres styles pour remplacer certains éléments exceptions, plus à ce sujet ci-dessous).
Utilisation générale
Pour charger une feuille de style personnalisée dans la balise Joomla <head>, Vous pouvez ajouter le code suivant au fichier index.php De votre modèle (YOURDOMAIN.COM/templates/yourtemplate/index.php), Juste avant la fin </head> Pour vous assurer que votre fichier est chargé en dernier.
JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/custom.css');
(Le fichier CSS peut avoir n'importe quel nom et ne doit pas nécessairement se trouver dans le sous-dossier/css /, mais il est plus propre de cette façon.)
Il est également possible d'ajouter une balise <link> Normale, mais cette option est moins flexible que l'option mentionnée ci-dessus:
<link rel="stylesheet" href="/templates/mytemplate/css/custom.css" type="text/css" />
! Important
Certaines extensions peuvent charger leurs styles CSS après le vôtre (ou même ajouter des styles directement dans le fichier index.php), écrasant ainsi vos remplacements. Cela peut généralement être résolu en ajoutant !important À vos styles, par exemple. h1{color:red!important;}
Utilisation dans différents cadres
Maintenant, la partie amusante: de nombreux frameworks de modèles ont la possibilité que les utilisateurs souhaitent modifier leurs modèles, ajoutant ainsi un moyen simple d’inclure vos remplacements CSS. Voici certaines des méthodes utilisées:
RocketTheme Gantry 4
Les modèles RocketTheme sont alimentés par Gantry Framework, et un fichier CSS personnalisé sera chargé automatiquement s'il est trouvé. Le fichier CSS doit être placé dans le dossier /templates/yourtemplate/css/ Et le nom doit être YOURTEMPLATEFOLDER-custom.css.
Exemple: Si vous utilisez leur modèle gratuit Afterburner 2, Le répertoire de modèle par défaut est /templates/rt_afterburner2/. Ajoutez un fichier appelé rt_afterburner-custom.css (Avec soulignement et tiret) dans le sous-dossier/css /, il sera automatiquement chargé par le framework Gantry.
forme 5
Les modèles de forme 5 sont livrés avec un fichier custom.css Vide dans le sous-répertoire/css/de votre modèle. Ajoutez simplement vos styles à ce fichier et ils seront inclus dans votre mise en page.
Gavick Pro
Les modèles Gavick Pro sont livrés avec un fichier overrides.css Vide dans le sous-répertoire/css /. Mais notez que ce fichier n'est pas chargé par défaut, vous devez activer Override CSS Dans l'onglet Paramètres avancés des paramètres du modèle.
Joomla Shine
Créez un fichier CSS personnalisé dans le sous-dossier/css/de votre modèle, par exemple. custom.css Et spécifiez le nom du fichier en tant que Extensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s).
Framework T
Les modèles basés sur le framework T3 peuvent inclure ou non un fichier custom.css Dans le sous-dossier/css/de votre modèle (créez-le simplement s'il n'est pas présent), mais s'il est présent, le fichier sera chargé après tout autre Fichier CSS.
cadre de chaîne
Les modèles basés sur Warp Framework chargent automatiquement le fichier custom.css Se trouvant dans le sous-dossier/css /. Des fichiers CSS supplémentaires peuvent être chargés en ajoutant
$this->warp->stylesheets->add('css:yourcssfile.css');
dans le fichier /layouts/template.config.php.
Joomla 3.5+ (modèle Protostar)
A partir de Joomla 3.5, vous pouvez créer un fichier nommé user.css et placez-le dans:
templates/protostar/css/user.css
Note: le nom du fichier doit être user.css
Le modèle protostar vérifiera si:
- Le fichier existe
- La taille du fichier est
> 0.
Si les deux conditions sont remplies, ce fichier sera automatiquement importé pour vous.
Voir le demande de traction sur Github
Helix Framework (JoomShaper)
Un autre framework de modèles Joomla, qui facilite le flux de travail de personnalisation.
Les modèles Helix Framework fournissent également un moyen simple d’ajouter vos styles personnalisés avec 2 méthodes pratiques.
Dans le panneau de contrôle des modèles en arrière-plan, il y a un champ CSS personnalisé. Ici, vous pouvez taper votre css, qui sera ajouté en tant qu'élément de style dans la section d'en-tête de vos pages. En tant que tel, il aura également priorité sur d'autres fichiers css externes. Bien sûr, cette option n’est pas idéale, si vous envisagez d’écrire un tas de lignes de CSS, il existe donc une deuxième méthode.
Comme beaucoup d'autres frameworks, Helix offre également la possibilité de créer votre propre fichier custom.css. Créez-le simplement et placez-le dans le dossier css du modèle. Le modèle l’analysera et l’inclura dans la section principale de vos pages.
Johanpw a fait du très bon travail en répondant à sa propre question ... surtout en ce qui concerne les remplacements css de nombreux modèles commerciaux.
Je voudrais seulement ajouter mes deux cents ici ...
Comme Johanpw l'a souligné, la pratique recommandée consiste à créer des remplacements CSS. Conserver votre code CSS personnalisé dans un fichier unique dont vous savez qu'il ne sera ni supprimé ni remplacé après une mise à jour est essentiel.
Ceci est important à retenir pour toutes les extensions Joomla. N'essayez pas de modifier le fichier css principal d'un module ou d'un composant. Essayez plutôt de créer votre propre fichier template.css personnalisé, de le charger en dernier et de créer ensuite tous vos styles personnalisés.
Dans les cas où un modèle commercial ne permet pas d'ajouter une substitution css, vous pouvez utiliser une extension comme celle-ci: Ajouter un CSS personnalisé , ce qui permet exactement cela. Pour créer votre fichier de remplacement css personnalisé et le charger en dernier.
Une autre option que je fais souvent dans les sites que je gère consiste à modifier le modèle et à ajouter mon propre lien vers mon fichier custom.css , juste avant la balise de tête de fermeture du modèle. Il s’agit d’une modification mineure, facile à mémoriser et à restaurer, que j’ai la possibilité de traiter lorsqu’une mise à jour de modèle arrive.
Gantry 5 (RocketTheme)
Gantry 5 est la dernière version du framework de modèles très répandu et fournit de nombreuses nouvelles fonctionnalités.
En ce qui concerne les substitutions CSS, il y a beaucoup de flexibilité et d'options.
En prenant le thème Hydrogen qui est publié en tant que modèle standard de Gantry 5, il fournit un dossier nommé custom.
Ce dossier est fourni à l'utilisateur pour placer ses fichiers/remplacements personnalisés pour le cadre/modèle gantry (à ne pas confondre avec les remplacements de modèles Joomla, qui restent dans le dossier template/html). Vous pouvez y placer votre fichier custom.css. Ensuite, via le panneau d’administration de modèles Gantry, vous pouvez personnaliser les dispositions de vos modèles et utiliser un CSS/JS personnalisé Atom Particle (une nouvelle fonctionnalité de Gantry 5), à ajouter. votre custom.css au modèle. Gantry 5 fournit également le soi-disant liens de flux (comme des raccourcis), afin de lier facilement votre fichier custom.css.
Ainsi, depuis l’intérieur de la particule Atom), vous liez-la en utilisant:
gantry-theme://custom/thing.css
Le gantry-theme:// raccourci, fera toujours référence au dossier de modèles de portique actuel.
L'utilisation de cette approche est un moyen efficace d'ajouter custom.css à des contours de modèle spécifiques de votre modèle gantry5.
Une deuxième approche, qui fonctionne globalement pour l’ensemble du modèle de portique, consiste à ajouter un fichier custom.scss, à l’intérieur:
template_directory/custom/scss/custom.scss
Ce faisant, gantry5 chargera et compilera toujours ce fichier scss, et les règles css que vous aurez appliquées remplaceront les règles par défaut du modèle.
Dans le fichier scss, tout va bien, que vous utilisiez SCSS ou simplement css. Le compilateur est capable de compiler les deux.