Pour modifier directement les fichiers de votre site Joomla® en ligne si vous êtes sous Windows, vous pouvez entre autres utiliser Notepad++ qui est disponible via cette adresse. Nous passerons sur les détails de l'installation par défaut qui suffiront amplement.
Pour la suite il vous faudra installer le plugin Firebug que vous trouverez ici pour Firefox et ne pas oublier de l'activer.
Sur d'autres navigateurs, il vous faudra utiliser des outils de développement dédiés (exemple F12 sur IE), Mais revenons à la base de notre tutoriel.
1°) Paramétrage de Notepad++.
Notepad++ est un éditeur de source avec mise en relief de la syntaxe et mise en forme de cette dernière.
Après avoir ouvert Notepad++ il faut se rendre dans « Plug-ins » (« Compléments » si vous l’avez mis en français)
puis NppFTP puis « Show NppFTP Window » pour configurer la connexion FTP.
une fenêtre s’affiche à droite de l’écran.
Pour établir la connexion il faut cliquer sur l’icône en forme d’engrenage (Settings) et cliquer sur « Profils Settings ».
Cliquer ensuite sur « Add New » pour ajouter un nouveau profil que vous nommerez comme vous voulez.
Il vous suffit ensuite de saisir vos informations de connexion FTP
- Hostname = Votre nom de domaine (sans le « http:// »)
- Connection Type = FTP
- Port = 21
- Username = Votre nom d’utilisateur de votre serveur FTP
- Password = Votre mot de passe de votre serveur FTP
Ce que vous pouvez faire avec Notepad++ sur votre serveur FTP :
- Éditer les fichiers de votre site directement sur Notepad++
- Exporter un nouveau fichier vers votre serveur
- Supprimer un fichier de votre serveur
- Créer un nouveau dossier sur votre serveur
- Supprimer un dossier de votre serveur
2°) Utilisation de Firebug.
Firebug est un module pour Firefox apportant un grand nombre d'outils de développement pour le web.
Il permet d'éditer, débugger, monitorer les feuilles de style (CSS), le HTML et le CSS en live dans toute page web.
Maintenant, regardez comment modifier directement vos fichiers sur votre site distant.
Pour cela, lancez Firefox (ou tout autre navigateur), naviguez jusqu’à votre site, puis ouvrez Firebug.
Dans cette exemple, nous allons modifier le bandeau rouge du modules "derniers articles"
Cliquons sur la petite flèche bleu puis sélectionnons le bandeau
Dans la partie droite apparait le code css à modifier, ainsi que le nom de fichier et le N° de ligne concerné.
Le code n°1
.titre5 h3:before {
border-right-color: #FF0000;
concerne le retour bas gauche du bandeau
Le code n°2
.titre5 h3:after {border-left-color: #FF0000;
concerne le retour bas droit du bandeau
Le code n°3
.titre5 h3 {background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0)) repeat scroll 0 0 #FF0000;
concerne le bandeau
La couleur #FF0000 correspond au rouge. Nous allons la remplacer par #00FF00 qui correspond à un vert brillant.
En effectuant ces changements directement dans Firebug, ils s' affichent sur votre navigateur, mais un rafraichissement de la page verra disparaitre votre modification.
Nous allons donc utiliser Notepad++ et sa fonction FTP pour effectuer ces changements en direct sur votre site.
3° Utilisation de Notepad++.
Retour donc dans Notepad++, pour nous connecter par ftp à votre site. Dans la partie droite de Notepad++ consacré au ftp cliquer sur le bouton bleu, sélectionnez votre connexion et connectez vous.
vous devez voir l' arborescence de votre site s'afficher.
Comme nous l'avons vu plus haut dans votre exemple, nous devons modifier votre fichier "custom.css" présent dans le dossier css de votre template.
En double cliquant sur votre fichier "custom.css" dans le fenêtre ftp de Notepad++, celui-ci va se charger dans le cache de votre pc et s'ouvrir automatiquement dans Nortepad++.
Nous modifions nos valeur #FF0000 par #00FF00.
Nous avons donc en "1" le code modifié, en "2" la disquette rouge qui signifie que nous avons modifié le fichier mais pas encore enregistré et en "3" la disquette bleu ou nous allons cliquer pour enregistrer votre modification.
En cliquant dessus, nous allons enregistrer votre fichier et aussitôt dans le bas de votre fenêtre ftp, nous allons voir la synchronisation avec votre site distant et votre fichier modifié va automatiquement se transférer.
Il ne reste plus qu'à rafraîchir votre page dans votre navigateur pour voir les changement définitif.
Grâce à cette technique, vous pourrez modifier n’importe quel fichier CSS ou PHP en direct live.
Ce(tte) œuvre est mise à disposition selon les termes de la Licence Creative Commons Attribution - Pas d'Utilisation Commerciale - Pas de Modification 4.0 International.
