Notepad++: Guide du débutant pour PHPBoost V5

Introduction

Notepad++ comme éditeur pour les fichier CSS d''un thème.

Pourquoi utiliser Notepad++ comme éditeur de fichier ? Parce qu'il présente plusieurs avantages pour nous et qu'il est simple d'utilisation !

- L'ouverture en multi-onglet des fichiers.
- La coloration syntaxique des langages,
- Remplacement de texte, couleur etc ...
- Recherche de code
- Et la sauvegarde et chargement de session !

Nous allons voir tout cela dans ce petit guide du débutant, pour que vous ayez une première prise en main appréciable de ce logiciel dont vous ne saurez plus vous passer par la suite

Commençons avec le thème base...

Vous l'avez déjà, c'est très bien^^ Vous ne l'avez pas, téléchargez le et installez le !

Vous avez décidé de créer votre thème avec le thème base de phpboost V5 ? Il vous faut savoir qu'il contient 7 fichiers CSS !

Les 8 premiers dans le dossier: "templates/base/themes/".

- content.css
- cssmenu.css (On évite d'éditer! Sauf changement de couleur.)
- design.css
- form.css (On évite d'éditer! Sauf changement de couleur.)
- global.css
- login.css (On évite d'éditer! Sauf changement de couleur.)
- table.css (On évite d'éditer! Sauf changement de couleur.)
- Et les autres fichiers css susceptibles d'être édités seront dans le dossier: "templates/MON -DU-THEME/modules/".

Au total sur les 7 fichiers, vous n'en éditerez que 3 !

Ouverture en multi-onglet

Ouvrez notepad++ ... Rendez-vous dans les dossiers cités ci-dessus, et sur chaque fichier CSS faites un clic droit et sélectionnez "Edit with notepad++"..
Normalement ils s'ouvrent à la suite dans des onglets ^^

La coloration syntaxique des langages

Dans notepad++ en haut :

Les langages sont rangés alphabétiquement ! Les principales extensions qui nous intéresserons le plus souvent pour les éditions est le CSS, HTML (fichier "XXX.tpl") et pour les plus experts (ou bidouilleurs) le PHP !

Remplacement de texte, couleur etc ...

Une fonction très utile qui va nous éviter d'éditer les fichiers les un derrière les autres !

Imaginons que vous vouliez changer la couleur d'un lien et que cette couleur est aussi répercutée sur d'autre class css de lien...

Question:

Comment procéder pour faire un seul changement ?

Le plus simplement du monde ... Prenons par exemple dans le "global.css" à la ligne 16, cette partie de code :

Code CSS :

/* Lien du site
--------------------------------------*/
a {
color:#B14912;
    text-decoration:none;
    font-size:11px;
    font-weight:bold;
    font-family:Verdana, Arial, Helvetica, sans-serif;
}

On veut juste remplacer toutes les couleurs correspondant à "color", surlignez à l'aide de la souris "color:#B14912;" (dans le "global.css"), ensuite dans notepad++ en haut :

Cette fenêtre s'ouvre :

Dans "Remplacer par" remettez la même syntaxe que dans "Recherche" en changeant juste la couleur en hexadécimale.

Vous avez plusieurs possibilités qui s'offrent à vous, mais nous n'en retiendrons que 2:

- Remplacer tout (ne faites les remplacements que dans le fichier ou vous êtes !)
- Remplacer dans tous les documents ouverts

vous allez donc cliquer sur Remplacer dans tous les documents ouverts ..

Notepad vous ouvrira alors une petite alerte pour dire combien d'allocutions ont été modifiées ^^

Il ne reste plus qu'a enregistrer tous les fichiers en cliquant sur une des 2 icônes en haut dans la barre d'outil :

-

(enregistrement de fichiers multiples si plusieurs fichiers ont été modifiés)
-

(enregistrement d'un seul fichier modifié)

Recherche de code

Vous avez besoin de savoir dans le fichier (toujours dans le global.css), combien de class ont une même couleur, pour exemple : color:#445766; ? Pas de soucis on va se servir de la fonction Recherche :

Surlignez à l'aide de la souris la couleur (ligne 83) : color:#445766;. Toujours en haut dans notepad, cliquez sur "Rechercher" ou alors au clavier faites "CTRL+F". Cette fenêtre s'ouvre :

Choisissez une de ces deux options en cliquant dessus:

- 1) Rechercher dans le document actuel
- 2) Rechercher dans tous les documents ouverts

Pour l'exemple, j'ai ouvert plusieurs fichiers dans mon notepad ... Je prends l'option n°2 !

Voilà ce que j'obtiens :

Je vais utiliser les couleurs de l'image, pour vous expliquer le "comment" et l'utilisation de la recherche.

En bleu le nombres de fichiers concernés et nombre de fois où la couleur est présente dans tous les fichiers :

- Search "color:#445766;" (6 hits in 2 files)
- Soit 6 hits (Nbr de fois ou les couleurs sont trouvées) et in 2 files (dans 2 fichiers différents)

- En rouge c'est la couleur que nous avions sélectionnée soit: color:#445766;.

- En vert le chemin du fichier CSS et le nombre de fois (5 hits) où cette couleur a été comptée.

- D:Program FileswampwwwPTBtemplatesWoWHorizonadminadmin.css (5 hits)

- En noir les lignes où la couleur est présente dans le fichiers.

- Line 83: color:#445766;

Astuce : Téléportez vous de fichiers en fichiers (Humour ...)

en cliquant sur une des lignes trouvées! Cela vous évite une recherche manuelle longue et fastidieuse !

Et la sauvegarde et chargement de session !

La sauvegarde

Voici le plus intéressant pour ma part ...

La sauvegarde de session ! Vous avez tous vos fichiers ouverts et pour ne pas avoir à le refaire procédez comme suit :

En haut dans Notepad++ : dans "Fichier" cliquez sur "Enregistrer la session...", une fenêtre s'ouvre:

Enregistrer le fichier de sauvegarde sous ce nom :"notepad.html", toujours à la racine de votre thème !!!

Chargement de session

Vous perdez le file de vos fichiers, parce que par erreur vous avez tout fermé en sortant de Notepad++ ?

Pas de soucis.. Généralement Notepad++ vous demande si vous voulez enregistrer vos fichiers avant la fermeture de celui- ci ...

En haut dans Notepad++ : dans "Fichier" cliquez sur "Charger la session...", allez à la racine de votre thème et sélectionnez "notepad.html"..
Tous vos fichiers s'ouvrent les un derrières les autres et sont de nouveaux accessibles

Astuce:

Exemple l'un de mes fichiers existants que j'édite avec notepad++... un clic droit sur notepad.html et sélectionnez "Edit with notepad++" ... Vous obtiendrez cette structure:

Code HTML :

<NotepadPlus>
    <Session activeView="0">
        <mainView activeIndex="4">
            <File firstVisibleLine="0" xOffset="0" scrollWidth="552" startPos="431" endPos="431" selMode="0" lang="CSS" encoding="-1" filename="D:Program FileswampwwwPTBtemplatesWoWBlueLkmodulessearchsearch_mini.css" />
            <File firstVisibleLine="0" xOffset="0" scrollWidth="512" startPos="480" endPos="480" selMode="0" lang="CSS" encoding="-1" filename="D:Program FileswampwwwPTBtemplatesWoWBlueLkthemebbcode.css" />
            <File firstVisibleLine="0" xOffset="0" scrollWidth="768" startPos="436" endPos="436" selMode="0" lang="CSS" encoding="-1" filename="D:Program FileswampwwwPTBtemplatesWoWBlueLkthemecontent.css" />
            <File firstVisibleLine="0" xOffset="0" scrollWidth="840" startPos="436" endPos="436" selMode="0" lang="CSS" encoding="-1" filename="D:Program FileswampwwwPTBtemplatesWoWBlueLkthemedefault.css" />
            <File firstVisibleLine="0" xOffset="0" scrollWidth="640" startPos="425" endPos="425" selMode="0" lang="CSS" encoding="-1" filename="D:Program FileswampwwwPTBtemplatesWoWBlueLkthemedesign.css" />
            <File firstVisibleLine="0" xOffset="0" scrollWidth="640" startPos="437" endPos="437" selMode="0" lang="CSS" encoding="-1" filename="D:Program FileswampwwwPTBtemplatesWoWBlueLkthemegeneric.css" />
            <File firstVisibleLine="0" xOffset="0" scrollWidth="616" startPos="435" endPos="435" selMode="0" lang="CSS" encoding="-1" filename="D:Program FileswampwwwPTBtemplatesWoWBlueLkthemeglobal.css" />
            <File firstVisibleLine="0" xOffset="0" scrollWidth="736" startPos="438" endPos="438" selMode="0" lang="CSS" encoding="-1" filename="D:Program FileswampwwwPTBtemplatesWoWBlueLkadminadmin.css" />
            <File firstVisibleLine="0" xOffset="0" scrollWidth="512" startPos="432" endPos="432" selMode="0" lang="CSS" encoding="-1" filename="D:Program FileswampwwwPTBtemplatesWoWBlueLkmodulesconnectconnect_mini.css" />
            <File firstVisibleLine="0" xOffset="0" scrollWidth="840" startPos="436" endPos="436" selMode="0" lang="CSS" encoding="-1" filename="D:Program FileswampwwwPTBtemplatesWoWBlueLkmodulesforumforum.css" />
            <File firstVisibleLine="0" xOffset="0" scrollWidth="512" startPos="434" endPos="434" selMode="0" lang="CSS" encoding="-1" filename="D:Program FileswampwwwPTBtemplatesWoWBlueLkmodulesnewsnews.css" />
            <File firstVisibleLine="0" xOffset="0" scrollWidth="512" startPos="431" endPos="431" selMode="0" lang="CSS" encoding="-1" filename="D:Program FileswampwwwPTBtemplatesWoWBlueLkmodulesnewsletternewsletter_mini.css" />
            <File firstVisibleLine="0" xOffset="0" scrollWidth="536" startPos="426" endPos="426" selMode="0" lang="CSS" encoding="-1" filename="D:Program FileswampwwwPTBtemplatesWoWBlueLkmodulessearchsearch.css" />
            <File firstVisibleLine="0" xOffset="0" scrollWidth="512" startPos="483" endPos="373" selMode="0" lang="CSS" encoding="-1" filename="D:Program FileswampwwwPTBtemplatesWoWBlueLkmodulesshoutboxshoutbox_mini.css" />
            <File firstVisibleLine="71" xOffset="0" scrollWidth="512" startPos="519" endPos="519" selMode="0" lang="CSS" encoding="-1" filename="D:Program FileswampwwwPTBtemplatesWoWBlueLkmoduleswikiwiki.css" />
        </mainView>
        <subView activeIndex="0" />
    </Session>
</NotepadPlus>

Chose intéressante, c'est que s'il vous prend l'envie de vouloir reprendre un thème comme base pour en créer un autre, vous pouvez juste éditer votre notepad.html et avec la fonction "Remplacer", modifier le mon du thème par celui que vous voulez ou celui que vous aurez en cours..

Attention : C'est mon appel de fichier, il n'est là qu'à titre d'exemple.
Ne pas copiez/coller bêtement

Et voilà, après cette "courte lecture", vous devriez pouvoir vous débrouiller comme un chef avec Notepad++

Si vous avez des questions, n'hésitez pas à les poser sur le forum en ouvrant votre sujet

Créé et revu, le 28/12/2016, par Swan