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