ETAPE PAR ETAPE TOUT EN IMAGES
2
Contenu PERSONNALISER UN TEMPLATE AVEC FIREFOX ..................................... 3
Installer Firebug ................................................................................... 3
Modifier un template .......................................................................... 5
Modifier le style d’un 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 d’Utilisation Commerciale -
Pas de Modification 2.0 France
www.broussegoutte.com
3
PERSONNALISER UN TEMPLATE AVEC FIREFOX Firebug est un puissant outil d’édition et de débogage de code HTML,
CSS et Javascript.
C’est une extension gratuite qui s’installe facilement avec les
navigateurs Firefox et Google Chrome.
Nous aborderons ici son utilisation pour modifier le template d’un site
Joomla !
Installer Firebug 1- Dans le menu Firefox sélectionner Modules complémentaires
2- Dans la zone de recherche du catalogue taper : firebug
4
3- Cliquer sur le bouton Installer
4- Redémarer Firefox
5
Modifier un template Nous allons modifier le style des titres de notre site Joomla !
Effectuer un clic droit sur un titre,
Puis sélectionner Inspecter un élément
La fenêtre Firebug s’ouvre.
Dans l’onglet HTML le code eponyme s’affiche .
Ce code est identité, colorisé syntaxiquement et se présente sous la
forme d’un arbre hiérarchique.
6
Notre sélection correspond à la balise de titre de niveau 2 <h2>
7
L’onglet style affiche le code CSS.
La taille de la police (font-size) est de 1.4 em
et la couleur coïncide au code hexadécimal : 555, pour afficher la
couleur correspondant à ce code il suffit de faire glisser le pointeur
dessus :
8
Nous allons tester maintenant les effets d’un changement de taille et
de couleur.
A l’aide de l’extension ColorZilla choisisons une couleur dans la palette
et relevons le code Hexa
9
Dans l’onglet Style remplacons 1.4em par 2em (200%) et le code hexa
par 360
Cliquer dans la valeur et la remplacer. Vérifier le résultat
Idem pour la couleur
10
Bien sur ces modifications n’ont aucun effet sur le site.
Pour changer définitivement les styles se connecter sur le panneau
d’administration du site, et cliquer sur gestion
Template
(N’oubliez pas de faire des sauvegardes de site
ou de fichier avant toute modification !)
Sélectionner l’onglet Templates
Cliquer sur le template par défaut
11
La taille police correspond à la régle #main .items-leading h2 de la
feuille layout.css
Sélectionner la feuiile de style
Rechercher (Ctrl + F) la régle
12
Modifier
Enregistrer
Répeter l’opération pour la couleur dans la feuille personnal.css
Pour modifier votre site vous pouvez utiliser un éditeur comme
Notepad ++
Fichier>Ouvrir
Sélectionner le fichier personnal.css dans le dossier du template par
défault qui se trouve lui-même à la racine du site
13
Rechercher la ligne 741 et modifier
14
Modifier le style d’un module
Nous souhaitons modifier le style de la colonne gauche, effectuons un
clic droit sur l’élément ou une séléction avec la fléche
Le code HTML :
15
Le CSS :
16
Faisons des tests dans l’onglet Apparence
En modifiant la marge droite
17
Le résultat est satisfaisant, modifions le fichier position.css ligne 123
Vous remarquerez ici que l’attribut largeur (21%) de la régle .left1 est
annulé par une autre régle qui doit être plus proche de l’élément. C’est
l’effet cascade des styles.
18
Modifier une image
Firebug donne également les informations sur les images intégrées
dans le Css avec l’apperçu du fichier.
Modifier le HTML
Nous souhaitons vérifier le remplacement d’une balise dans le code
Html et de son contenu.
Sélectionnons l’élément de la manière habituelle,
Clic droit sur le code Html et Editer le code HTML
19
Voila un petit apperçu de la puissance de l’extension Firebug
Partagez vos expériences sur joomlazur.com
20
RESSOURCES TUTOS FIREBUG
http://eric-pommereau.developpez.com/tutoriels/outil-web/firebug/
http://www.siteduzero.com/tutoriel-3-31228-firebug-une-merveille-
de-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-votre-
site-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 m’avoir rappelé cet outil indispensable)
http://fr.wikipedia.org/wiki/Liste_de_couleurs
http://www.code-couleur.net/ )
21
NOTES
.
22