Lorsque vous utilisez un modèle Joomla gratuit / commercial du Template Club X / Y / Z, quelle est la meilleure façon d'inclure mes propres styles CSS?
Ajoutez une feuille de style custom.css. si votre modèle ne le récupère pas automatiquement, vous pouvez l'ajouter dans votre head.php généralement le chemin est: templates / templatename / tpls / blocks / head.php <link rel = "stylesheet" href = "/ templates / templatename / css / custom.css "type =" text / css "/>
Tony M
Réponses:
22
Pourquoi utiliser des remplacements CSS?
C'est toujours une bonne idée de garder vos styles CSS séparés 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 remplacements CSS fonctionnent-ils?
CSS signifie «feuilles de style en cascade», «en cascade» dans ce contexte, ce qui signifie que, comme plus d'une règle de feuille de style peut 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 (la la règle la plus spécifique est choisie), ou en fonction de 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 des éléments spécifiques selon vos besoins (il y a quelques exceptions, plus à ce sujet ci-dessous).
Usage général
Pour charger une feuille de style personnalisée dans la <head>balise Joomla , le code suivant peut être ajouté au index.phpfichier de votre modèle ( YOURDOMAIN.COM/templates/yourtemplate/index.php), juste avant la </head>balise de fin afin de vous assurer que votre fichier est chargé en dernier.
(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 <link>balise normale , mais cela est moins flexible que l'option mentionnée ci-dessus:
Certaines extensions peuvent charger leurs styles CSS après le vôtre (ou même ajouter des styles directement dans le fichier index.php), remplaçant 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 apporter des modifications à leurs modèles, ajoutant ainsi un moyen facile d'inclure vos remplacements CSS. Voici quelques-unes des méthodes utilisées:
Portique RocketTheme 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 /templates/yourtemplate/css/dossier et le nom doit être YOURTEMPLATEFOLDER-custom.css.
Exemple: si vous utilisez leur Afterburner 2modèle gratuit , le répertoire de modèles par défaut est /templates/rt_afterburner2/. Ajoutez un fichier appelé rt_afterburner-custom.css(attention avec soulignement et trait d'union) dans le sous-dossier / css /, et il sera chargé automatiquement par le framework Gantry.
Forme 5
Les modèles Shape 5 sont livrés avec un custom.cssfichier 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 overrides.cssfichier vide dans le sous-répertoire / css /. Mais notez que ce fichier n'est pas chargé par défaut, vous devez l'activer Override CSSdans l'onglet Paramètres avancés dans les 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.csset spécifiez le nom du fichier à Extensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s).
Cadre T3
Les modèles basés sur le framework T3 peuvent / peuvent ne pas inclure un custom.cssfichier dans le sous-dossier / css / de votre modèle (créez-le simplement s'il n'est pas là), mais lorsqu'il est présent, le fichier sera chargé après tout autre fichier CSS.
Cadre Warp
Les modèles basés sur Warp Framework chargent automatiquement le custom.cssfichier trouvé dans le sous-dossier / css /. Des fichiers CSS supplémentaires peuvent être chargés en ajoutant
Pour une utilisation générale, je suggérerais d'utiliser JHtml::_('stylesheet', 'path/to/file')plutôt que addStyleSheetcomme déjà argumenté sur une autre réponse :) Autre que cela, bonne réponse sanglante. Sera certainement utile pour les gens
Lodder
Merci, @Lodder. J'espère que cette information peut être utile aux gens. Concernant votre suggestion, j'ai lu le débat. Comment peut- JHtml::_on l'utiliser avec $this->template?
En fait, les nouveaux thèmes de fusée utilisent MOINS. Tout ce que vous avez à faire est de créer un fichier dans le dossier LESS appelé template-custom.less et d'y mettre votre code. Ensuite, vous pourrez profiter des astuces que LESS apporte. Warp 7 vous permet de créer votre propre "style" dans le dossier des styles et vous pouvez réellement coller un fichier custom.css dans ce dossier (à l'intérieur de son propre dossier css). De cette façon, chaque style peut avoir son propre CSS personnalisé. Cela permet également de résister aux mises à niveau de modèles. L'utilisation du fichier custom.css par défaut signifie qu'il est remplacé chaque fois que vous mettez à niveau le thème.
Brian Peat
1
Grande réponse et très utile! Une autre option que vous aimeriez ajouter pour les modèles / frameworks qui n'incluent pas de disposition pour les fichiers CSS personnalisés est l'utilisation d'une extension tierce telle que CSSConfig extensions.joomla.org/extensions/style-a-design/templating/… qui est conçu dans ce but précis.
Neil Robertson
7
Joomla 3.5+ (modèle Protostar)
Depuis Joomla 3.5, vous pouvez créer un fichier appelé user.csset le placer dans:
templates / protostar / css / user.css
Remarque: le nom du fichier doit êtreuser.css
Le modèle protostar vérifiera si:
Le fichier existe
La taille du fichier est > 0.
Si les deux conditions sont remplies, il importera automatiquement ce fichier pour vous.
Un autre cadre de modèle Joomla, qui facilite le flux de travail de personnalisation.
Les modèles Helix Framework fournissent également un moyen facile d'ajouter vos styles personnalisés avec 2 méthodes pratiques.
Dans le panneau de configuration du modèle dans le backend, il y a un champ CSS personnalisé. Ici, vous pouvez taper votre css, qui sera ajouté comme élément de style dans la section head de vos pages et en tant que tel, il aura également la priorité sur les autres fichiers css externes. Bien sûr, cette option n'est pas l'idéal, si vous envisagez d'écrire un tas de lignes de CSS, il existe donc une deuxième méthode.
Comme beaucoup d'autres frameworks de modèles, 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 d'en-tête de vos pages.
Johanpw a fait un très bon travail avec sa réponse à sa propre question ... en particulier en ce qui concerne les remplacements CSS pour de nombreux modèles commerciaux.
Je voudrais seulement ajouter mes deux cents ici ...
Comme Johanpw l'a souligné, la création de remplacements CSS est la pratique recommandée. Garder votre CSS personnalisé dans un seul fichier que vous savez qu'il ne sera pas supprimé ou 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. Au lieu de cela, essayez de créer votre propre fichier template.css personnalisé, chargez-le en dernier et créez tous vos styles personnalisés.
Dans les cas où un modèle commercial ne fournit pas un moyen d'ajouter un remplacement 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, est de modifier le modèle et d'ajouter mon propre lien à mon fichier custom.css , juste avant la balise de fermeture du modèle. Il s'agit d'une modification mineure, facile à mémoriser et à restaurer, que je peux traiter lorsqu'une mise à jour de modèle arrive.
Gantry 5 est la dernière version du framework de modèle populaire et il offre de nombreuses nouvelles fonctionnalités et capacités.
En ce qui concerne les remplacements CSS, il y a beaucoup de flexibilité et d'options.
En prenant le thème Hydrogène qui est publié en tant que modèle Gantry 5 standard, il fournit un dossier nommé personnalisé.
Ce dossier est fourni à l'utilisateur pour placer ses fichiers / remplacements personnalisés pour le cadre / modèle de portique (à 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 du modèle de portique, vous pouvez personnaliser les dispositions de votre modèle et utiliser une particule d'atome CSS / JS personnalisée (une nouvelle fonctionnalité de portique 5) pour ajouter votre fichier custom.css au modèle. Gantry 5 fournit également les soi-disant liens de flux , (comme les raccourcis), afin de lier facilement votre fichier custom.css.
Donc, à l'intérieur de la particule Atom, vous la lieriez en utilisant:
gantry-theme://custom/thing.css
Le gantry-theme://raccourci fera toujours référence au dossier de modèle de portique actuel.
L'utilisation de cette approche est un moyen efficace d'ajouter custom.css pour les contours de modèles 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 toutes les règles css que vous avez appliquées remplaceront les règles par défaut du modèle.
À l'intérieur du fichier scss, vous êtes parfaitement bien en utilisant SCSS ou simplement css. Le compilateur est capable de compiler les deux.
Réponses:
Pourquoi utiliser des remplacements CSS?
C'est toujours une bonne idée de garder vos styles CSS séparés du style de modèle existant, si vous utilisez un modèle Joomla pré-construit.
Comment les remplacements CSS fonctionnent-ils?
CSS signifie «feuilles de style en cascade», «en cascade» dans ce contexte, ce qui signifie que, comme plus d'une règle de feuille de style peut 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 (la la règle la plus spécifique est choisie), ou en fonction de 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 des éléments spécifiques selon vos besoins (il y a quelques exceptions, plus à ce sujet ci-dessous).
Usage général
Pour charger une feuille de style personnalisée dans la
<head>balise Joomla , le code suivant peut être ajouté auindex.phpfichier de votre modèle (YOURDOMAIN.COM/templates/yourtemplate/index.php), juste avant la</head>balise de fin afin de vous assurer que votre fichier est chargé en dernier.(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
<link>balise normale , mais cela est moins flexible que l'option mentionnée ci-dessus:!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), remplaçant 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 apporter des modifications à leurs modèles, ajoutant ainsi un moyen facile d'inclure vos remplacements CSS. Voici quelques-unes des méthodes utilisées:
Portique RocketTheme 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
/templates/yourtemplate/css/dossier et le nom doit êtreYOURTEMPLATEFOLDER-custom.css.Exemple: si vous utilisez leur
Afterburner 2modèle gratuit , le répertoire de modèles par défaut est/templates/rt_afterburner2/. Ajoutez un fichier appelért_afterburner-custom.css(attention avec soulignement et trait d'union) dans le sous-dossier / css /, et il sera chargé automatiquement par le framework Gantry.Forme 5
Les modèles Shape 5 sont livrés avec un
custom.cssfichier 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
overrides.cssfichier vide dans le sous-répertoire / css /. Mais notez que ce fichier n'est pas chargé par défaut, vous devez l'activerOverride CSSdans l'onglet Paramètres avancés dans les 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.csset spécifiez le nom du fichier àExtensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s).Cadre T3
Les modèles basés sur le framework T3 peuvent / peuvent ne pas inclure un
custom.cssfichier dans le sous-dossier / css / de votre modèle (créez-le simplement s'il n'est pas là), mais lorsqu'il est présent, le fichier sera chargé après tout autre fichier CSS.Cadre Warp
Les modèles basés sur Warp Framework chargent automatiquement le
custom.cssfichier trouvé dans le sous-dossier / css /. Des fichiers CSS supplémentaires peuvent être chargés en ajoutantdans le fichier
/layouts/template.config.php.la source
JHtml::_('stylesheet', 'path/to/file')plutôt queaddStyleSheetcomme déjà argumenté sur une autre réponse :) Autre que cela, bonne réponse sanglante. Sera certainement utile pour les gensJHtml::_on l'utiliser avec$this->template?JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/style.css');Joomla 3.5+ (modèle Protostar)
Depuis Joomla 3.5, vous pouvez créer un fichier appelé
user.csset le placer dans:Remarque: le nom du fichier doit être
user.cssLe modèle protostar vérifiera si:
> 0.Si les deux conditions sont remplies, il importera automatiquement ce fichier pour vous.
Voir la demande de pull sur Github
la source
Cadre Helix ( JoomShaper )
Un autre cadre de modèle Joomla, qui facilite le flux de travail de personnalisation.
Les modèles Helix Framework fournissent également un moyen facile d'ajouter vos styles personnalisés avec 2 méthodes pratiques.
Dans le panneau de configuration du modèle dans le backend, il y a un champ CSS personnalisé. Ici, vous pouvez taper votre css, qui sera ajouté comme élément de style dans la section head de vos pages et en tant que tel, il aura également la priorité sur les autres fichiers css externes. Bien sûr, cette option n'est pas l'idéal, si vous envisagez d'écrire un tas de lignes de CSS, il existe donc une deuxième méthode.
Comme beaucoup d'autres frameworks de modèles, 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 d'en-tête de vos pages.
la source
Johanpw a fait un très bon travail avec sa réponse à sa propre question ... en particulier en ce qui concerne les remplacements CSS pour de nombreux modèles commerciaux.
Je voudrais seulement ajouter mes deux cents ici ...
Comme Johanpw l'a souligné, la création de remplacements CSS est la pratique recommandée. Garder votre CSS personnalisé dans un seul fichier que vous savez qu'il ne sera pas supprimé ou 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. Au lieu de cela, essayez de créer votre propre fichier template.css personnalisé, chargez-le en dernier et créez tous vos styles personnalisés.
Dans les cas où un modèle commercial ne fournit pas un moyen d'ajouter un remplacement 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, est de modifier le modèle et d'ajouter mon propre lien à mon fichier custom.css , juste avant la balise de fermeture du modèle. Il s'agit d'une modification mineure, facile à mémoriser et à restaurer, que je peux traiter lorsqu'une mise à jour de modèle arrive.
la source
Portique 5 (RocketTheme)
Gantry 5 est la dernière version du framework de modèle populaire et il offre de nombreuses nouvelles fonctionnalités et capacités.
En ce qui concerne les remplacements CSS, il y a beaucoup de flexibilité et d'options.
En prenant le thème Hydrogène qui est publié en tant que modèle Gantry 5 standard, il fournit un dossier nommé personnalisé.
Ce dossier est fourni à l'utilisateur pour placer ses fichiers / remplacements personnalisés pour le cadre / modèle de portique (à 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 du modèle de portique, vous pouvez personnaliser les dispositions de votre modèle et utiliser une particule d'atome CSS / JS personnalisée (une nouvelle fonctionnalité de portique 5) pour ajouter votre fichier custom.css au modèle. Gantry 5 fournit également les soi-disant liens de flux , (comme les raccourcis), afin de lier facilement votre fichier custom.css.
Donc, à l'intérieur de la particule Atom, vous la lieriez en utilisant:
Le
gantry-theme://raccourci fera toujours référence au dossier de modèle de portique actuel.L'utilisation de cette approche est un moyen efficace d'ajouter custom.css pour les contours de modèles 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:
Ce faisant, gantry5 chargera et compilera toujours ce fichier scss, et toutes les règles css que vous avez appliquées remplaceront les règles par défaut du modèle.
À l'intérieur du fichier scss, vous êtes parfaitement bien en utilisant SCSS ou simplement css. Le compilateur est capable de compiler les deux.
la source