css joomla

Pour repérer, d'une manière simple, les styles css joomla, téléchargez et installez les barres d'outils destinés aux développeurs. Ces outils sont précieux  et vous allez, sans doute, les apprécier, à travers des exemples d'application qui vont suivre (pages suivantes de ce tutoriel). D'autres styles css joomla seront abordés dans les tutoriels pour template joomla complet.

A force d'utiliser ces barres d'outils, vous vous aperceverez qu'ils se complètent et vous seront d'un apport considérable pour une conception optimale de votre template. 

 Il s'agit des barres d'outils:

• "Internet Explorer Developer Toolbar" utilisé dans ce tutoriel.
• Web developer pour Firefox (version Française) muni de l'inspecteur DOM (vous installerez le DOM en tentant de l'activer via le menu Outils-->Inspecteur DOM de la barre d'outils Web Developer)

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. Pour les adeptes de Firefox, ils pourront utiliser l'Inspecteur DOM (menu outils de la barre "Web developer") qui offre des fonctionnalités similaires.

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!