tools windowsPour 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.

000

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 ».

001

002

Cliquer ensuite sur « Add New » pour ajouter un nouveau profil que vous nommerez comme vous voulez.

003

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.

004

Dans cette exemple, nous allons modifier le bandeau rouge du modules "derniers articles"

005

Cliquons sur la petite flèche bleu puis sélectionnons le bandeau

006007

Dans la partie droite apparait le code css à modifier, ainsi que le nom de fichier et le N° de ligne concerné.

008

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.

009

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.

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.

010

011

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++.

012

Nous modifions nos valeur #FF0000 par #00FF00.

013

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.

014

Il ne reste plus qu'à rafraîchir votre page dans votre navigateur pour voir les changement définitif.

015

Grâce à cette technique, vous pourrez modifier n’importe quel fichier CSS ou PHP en direct live.

A propos de l'auteur
starter
Nom: starterSite Web: http://www.soulpin.com
100% autodidacte
Derniers articles de l'auteur

Liste des participants qui ont commenté cet article

Ajouter un commentaire