css joomla

Pour repérer, d'une manière simple, les styles css joomla, téléchargez et installez "Internet Explorer Developer Toolbar". Cet outil est précieux et vous allez, sans doute, l'apprécier, à travers des exemples d'application qui vont suivre (pages suivantes de ce tutoriel).

Une autre solution pour développeurs sera détaillée dans le tutoriel "Création template joomla 1.5". Il s'agit de l'extension Firebug de Firefox.

Bien entendu, installez avant, les navigateurs Internet Explorer (version 7) et Mozilla Firefox (3.0.10 ou supérieur). Cela vous permettra de faire vos tests dans les deux navigateurs les plus répandus dans le monde. Et si votre travail s'avère adapté pour les deux, vous maximisez vos chances d'avoir un affichage correct de votre site pour tous les internautes.

Pour personnaliser votre template, vous serez amenés à paramétrer les styles css joomla. Vous n'êtes pas obligés de les apprendre tous par coeur ou d'en maitriser la liste exhaustive. Vous devez savoir, essentiellement, comment les repérer facilement.

Dans les pages suivantes, vous allez apprendre à utiliser "Internet Explorer Developer Toolbar" pour repérer et adapter les styles joomla de votre template.

Piquer une couleur

Vous voulez savoir comment piquer une couleur sur internet et l'assigner à un élément de votre page. Vous souhaitez peut être changer le fond du bloc gauche. Voyons comment faire pour lui assigner une autre couleur.

Dans votre navigateur Internet explorer (IE7), lancer la Toolbar "IE Developper Toolbar" en cliquant sur son icône dans la barre d'outils.

Une infobulle sur fond jaune vous montre son emplacement losque vous passez le curseur en dessus.

Affichez un site de votre choix. Dans le menu de la Toolbar, allez dans "Tools ==> Show Color Picker". Une petite fenêtre "Color Picker" est affichée et votre curseur se transforme en pipette.

En déplaçant la pipette dans la page de votre site préféré, la petite fenêtre vous affiche la couleur pointée et le code correspondant.

Cliquez lorsque vous piquez la couleur qui vous convient et puis cliquez sur le bouton "Copy and Close " de la petite fenêtre. Collez ensuite le code de la couleur dans votre fichier css. En admettant que c'est la couleur "#e0dbd5" qui est choisie, votre code modifié est le suivant:

 
#gauche{

  background-color: #e0dbd5;
}
 

Maintenant que vous savez comment faire, modifiez à votre convenance toutes les couleurs définies jusqu'à présent.

Sauvegarder et RAFRAICHISSEZ!