J3.x

Ajouter un style CSS personnalisé avec Protostar

From Joomla! Documentation

Revision as of 08:32, 26 November 2018 by FuzzyBot (talk | contribs) (Updating to match new version of source page)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Other languages:
Deutsch • ‎English • ‎Nederlands • ‎español • ‎français
Joomla! 
≥ 3.5

Le CSS du template Protostar peut être modifié directement dans le the Gestion des Templates : Personnaliser le template. Mais le problème en modifiant les fichiers sources pour vos propres besoins (Joomla ou une extension), est qu'ils peuvent être remplacer par une mise à jour, et par le Composant Mise à jour de Joomla!. Donc pour éviter d'ajouter des personnalisations CSS à chaque mise à jour, voici une solution simple, implémentée depuis Joomla! 3.5.

Personnaliser le template en toute tranquillité

  • Allez dans Extensions    Templates et à nouveau dans Templates (directement par le menu, ou par la barre d'outils à gauche). La vue par défaut est sur Styles, soyez attentifs.

J3x admin templates manager templates-fr.png

  • Puis ouvrez le template Protostar, en cliquant sur Protostar Détails et fichiers.

Créer un Nouveau fichier user.css

  • Cliquez sur le bouton Nouveau fichier
  • Une fenêtre modale s'ouvre, sélectionnez l'emplacement du fichier, ici le répertoire css sur la gauche
  • Tapez user dans le champ nom
  • Sélectionnez css comme type de fichier

J3x admin templates manager customise create new css-fr.png

Vous êtes maintenant dans un Éditeur de code, et vous pouvez y mettre votre code personnalisé. Vous avez seulement besoin de mettre les propriétés modifiées. J3x admin templates manager edit user css-fr.png

  • Enregistrer, et c'est fait !

Vous pouvez les voir appliquées sur votre page, avec les Outils Développeurs de Firefox ou de Chrome. Firefox developer tools inspect user css-fr.png

Astuce

Avec les substitutions de template, nous ne sommes pas toujours sûres de l'ordre dans lequel les fichiers sont chargés. Et avec les optimiseurs et compresseurs de CSS, il se peut que le résultat ne soit pas celui escompté. Donc nous devons utiliser Le poids des sélecteurs dans nos déclarations CSS. Et ceci est très bien expliqué ici

Stop hand nuvola.svg.png
Attention

Le nom du fichier doit être user.css et non pas custom.css, parce qu'il est déjà utilisé par certains éditeurs de contenu.

Se référer à la discussion sur GitHub pour plus de détails (en anglais)

https://github.com/joomla/joomla-cms/pull/4211#issuecomment-55096315