ETAPE PAR ETAPE TOUT EN IMAGES

Contenu
PERSONNALISER UN TEMPLATE AVEC FIREFOX ..................................... 3
Installer Firebug ................................................................................... 3
Modifier un template .......................................................................... 5
Modifier le style dun module ....................................................... 14
Modifier une image ....................................................................... 18
Modifier le HTML .......................................................................... 18
RESSOURCES .......................................................................................... 20

Thierry Broussegoutte
2011

Ce(tte) oeuvre est mise disposition selon les termes de la

Licence Creative Commons Paternit - Pas dUtilisation Commerciale Pas de Modification 2.0 France

www.broussegoutte.com

PERSONNALISER UN TEMPLATE AVEC FIREFOX

Firebug est un puissant outil ddition et de dbogage de code HTML,
CSS et Javascript.
Cest une extension gratuite qui sinstalle facilement avec les
navigateurs Firefox et Google Chrome.
Nous aborderons ici son utilisation pour modifier le template dun site
Joomla !

Installer Firebug
1- Dans le menu Firefox slectionner Modules complmentaires

2- Dans la zone de recherche du catalogue taper : firebug

3- Cliquer sur le bouton Installer

4- Redmarer Firefox

Modifier un template
Nous allons modifier le style des titres de notre site Joomla !
Effectuer un clic droit sur un titre,
Puis slectionner Inspecter un lment

La fentre Firebug souvre.

Dans longlet HTML le code eponyme saffiche .
Ce code est identit, coloris syntaxiquement et se prsente sous la
forme dun arbre hirarchique.

Notre slection correspond la balise de titre de niveau 2 <h2>

Longlet style affiche le code CSS.

La taille de la police (font-size) est de 1.4 em

et la couleur concide au code hexadcimal : 555, pour afficher la

couleur correspondant ce code il suffit de faire glisser le pointeur
dessus :

Nous allons tester maintenant les effets dun changement de taille et

de couleur.
A laide de lextension ColorZilla choisisons une couleur dans la palette
et relevons le code Hexa

Dans longlet Style remplacons 1.4em par 2em (200%) et le code hexa
par 360
Cliquer dans la valeur et la remplacer. Vrifier le rsultat

Idem pour la couleur

Bien sur ces modifications nont aucun effet sur le site.

Pour changer dfinitivement les styles se connecter sur le panneau
dadministration du site, et cliquer sur gestion
Template
(Noubliez pas de faire des sauvegardes de site
ou de fichier avant toute modification !)
Slectionner longlet Templates

Cliquer sur le template par dfaut

10

La taille police correspond la rgle #main .items-leading h2 de la

feuille layout.css

Slectionner la feuiile de style

Rechercher (Ctrl + F) la rgle

11

Modifier

Enregistrer

Rpeter lopration pour la couleur dans la feuille personnal.css

Pour modifier votre site vous pouvez utiliser un diteur comme
Notepad ++
Fichier>Ouvrir
Slectionner le fichier personnal.css dans le dossier du template par
dfault qui se trouve lui-mme la racine du site

12

Rechercher la ligne 741 et modifier

13

Modifier le style dun module

Nous souhaitons modifier le style de la colonne gauche, effectuons un

clic droit sur llment
ou une slction avec la flche

Le code HTML :

14

Le CSS :

15

Faisons des tests dans longlet Apparence

En modifiant la marge droite

16

Le rsultat est satisfaisant, modifions le fichier position.css ligne 123

Vous remarquerez ici que lattribut largeur (21%) de la rgle .left1 est
annul par une autre rgle qui doit tre plus proche de llment. Cest
leffet cascade des styles.

17

Modifier une image

Firebug donne galement les informations sur les images intgres
dans le Css avec lapperu du fichier.

Modifier le HTML
Nous souhaitons vrifier le remplacement dune balise dans le code
Html et de son contenu.
Slectionnons llment de la manire habituelle,

Clic droit sur le code Html et Editer le code HTML

18

Voila un petit apperu de la puissance de lextension Firebug

Partagez vos expriences sur joomlazur.com

19

RESSOURCES
TUTOS FIREBUG
http://eric-pommereau.developpez.com/tutoriels/outil-web/firebug/
http://www.siteduzero.com/tutoriel-3-31228-firebug-une-merveillede-plus-pour-firefox.html
EXTENSION FIREFOX
FireFile permet de modifier directement les fichiers sur le serveur
partir de Fierbug. Le tuto. Merci Philippe pour cette info.
APPRENDRE HTML ET CSS
http://www.siteduzero.com/tutoriel-3-13666-apprenez-a-creer-votresite-web.html
EDITEURS
Un super diteur CSS: TopStyle Lite 3.10 (Merci Gian Franco)
http://notepad-plus-plus.org/fr/
http://kompozer.net/
http://www.eclipse.org/
CODES COULEURS
ColorZilla (merci Dominique de mavoir rappel cet outil indispensable)
http://fr.wikipedia.org/wiki/Liste_de_couleurs
http://www.code-couleur.net/ )

20

NOTES

21

22