Ajoutez un CSS personnalisé à votre site Joomla! avec le plugin Add Custom CSS

Nombreux les utilisateurs qui installent des templates et des extensions Joomla! de manière excessive pour pouvoir ensuite modifier le design de leur site web.

Si vous souhaitez ajouter du CSS personnalisé dans votre site Joomla sans risquer d'endommager les fichiers existants, il peut être intéressant d'utiliser le plugin "Add Custom CSS".
Dans ce tutoriel nous allons voir comment ajouter du CSS personnalisé pour peaufiner en toute sécurité la conception de votre site.
Ce tutoriel s'adresse aux personnes ayant un peu de connaissance du CSS.

add custom css Joomla!

Le plus important est de savoir quel code CSS vous voulez ajouter.

Ajoutez votre CSS personnalisé dans un fichier appelé "mon-custom.css" par exemple.
Uploader ce fichier vers votre site via FTP.

Dans cet exemple, nous avons téléchargé le fichier dans votre template :
templates/mon-template/css/mon-custom.css

Mais il pourrait être placé ailleurs.

2 - Téléchargement et installation

Pour mettre en place notre CSS, nous allons utiliser l'extension Add Custom CSS.

Pour télécharger cette extension, rendez-vous sur la page suivante et cliquez sur le bouton "download".

custom css 1

Le fichier ZIP que vous avez téléchargé doit d'abord être décompressé pour trouver le pack qui nous intéresse.

Vous devriez y trouver deux répertoires contenant un module et un plugin. Pour ce tutoriel, nous n'utiliserons uniquement que le plugin marqué ci-dessous :

custom css 2

 

Connectez-vous à l'administration de votre site, puis rendez-vous dans Extensions → Gestion des Extensions, et installer l'extension

3 - Activer le plugin

Toujours dans l'administration, allez dans Extensions → Gestion des plugins, puis recherchez le plug-in : System - Add Custom CSS.

custom css 3

Editez le plug-in.

Dans l'option "Custom CSS File Path 1", entrez le chemin de votre fichier CSS. Pour cet exemple nous avons choisi : templates/mon-template/css/mon-custom.css

N'oubliez pas d'activer le plugin, puis cliquez sur le bouton "Enregistrer et fermer".

4 - Vérifiez le résultat

Rafraichissez l'écran du Frontend de site et vérifiez si votre nouveau code CSS a bien été chargé.

C'est tout

NOTE : Traduction de l'anglais Add Custom CSS to Your Joomla Site.

La boutique

Trucs @ Astuces Joomla! 3Le livre 100 Trucs & Astuces pour Joomla! 3
vous permet de faire les bons choix parmi ceux qui s'offrent à vous lors de la création de votre site web ou lors de l'ajout de fonctionnalités ou d'extension grâce à de simple conseils, de vous simplifier la tâche grâce à des astuces et des mini-tutoriels pour gagner du temps dans la gestion de votre site Joomla!, ainsi que dans l'organisation de sa sécurité, son référencement, ses performances, et bien plus encore.

Notez cet article:
0
Le JED (Joomla Extensions Directory) stoppera le s...
Construction de page Joomla! par drag & Drop avec ...

Articles en relation

Commentaires 3

 
Guest - Sorgina le vendredi 13 février 2015 08:25

Slt
J'ai pas vraiment compris a quoi il sert. Dans un template il y a un fichier css permettant de personnaliser l'ensemble du visuel du site, ainsi que des extentions qui sont installees. Donc il fait quoi de plus ?

Slt J'ai pas vraiment compris a quoi il sert. Dans un template il y a un fichier css permettant de personnaliser l'ensemble du visuel du site, ainsi que des extentions qui sont installees. Donc il fait quoi de plus ?
Simon le vendredi 13 février 2015 11:02

Bonjour,

si les fichiers sources du template sont modifiés, les modifications seront écrasées à la première mise à jour. L'utilisation de ce plugin permet d'éviter ce problème en surchargeant le fichier css natif.

Bonjour, si les fichiers sources du template sont modifiés, les modifications seront écrasées à la première mise à jour. L'utilisation de ce plugin permet d'éviter ce problème en surchargeant le fichier css natif.
Guest - Sorgina le vendredi 13 février 2015 13:22

Mais justement, ce fameux fichier que je parlais, c'est pas son but, de ne pas etre touche au cour d'une mise a jour ?

Mais justement, ce fameux fichier que je parlais, c'est pas son but, de ne pas etre touche au cour d'une mise a jour ?
Déjà inscrit ? Connectez-vous ici
Guest
dimanche 22 septembre 2019
Si vous souhaitez vous inscrire, veuillez saisir un nom d'utilisateur, mot de passe et nom.

Image Captcha

Sur ce site, nous utilisons des cookies.