Magento

Firefox est la première application qui peut vous aider à designer une page web. Vous aurez besoin d’installer des composants supplémentaires.

Tout d’abord, vous avez besoin de télécharger firefox. La nouvelle version est disponible: http://www.mozilla.com/en-US/

La “web developer bar” est ce que j’utilise la plupart du temps. Il intègre la plupart des outils que vous aurez besoin pour savoir comment est composée votre page web (css, images, javascript, validateur W3C, mise en surbrillance d’éléments). https://addons.mozilla.org/en-US/firefox/addon/60

Firebug est un autre outil qui vous permettra de débugger vos pages, il peut être très utile pour éditer vos pages html en ligne, et débugger du javascript, et un accès au DOM https://addons.mozilla.org/en-US/firefox/addon/1843

Colorzilla est un outil pour récupérer une couleur sur n’importe quel objet graphique affiché dans votre navigateur https://addons.mozilla.org/en-US/firefox/addon/271

La barre Web developer peut vous aider à identifier comment une page est composée, essentiellement, pour traquer vos div et classes CSS utilisées dans votre thème et y appliquer quelques réglages avant d’intégrer les règles CSS dans vos pages.

Prèmièrement, allez sur CSS button > edit CSS. Vous avez maintenant tous les fichiers CSS utilisées dans vos pages.

Maintenant nous pouvons modifier en ligne et voir le résultat en temps réél les modifications css, mais nous avons besoin de savoir quelle “id” ou “class” que nous devons modifier.

Allez sur Information > display element information, et nous pouvons maintenant choisir les éléments que nous voulons changer.

Par exemple, si nous voulons changer la couleur de fond des liens du haut, nous devons cliquer sur la zone des liens du haut, nous pouvons voir la zone sélectionnée (bordures rouge) et il nous informe que nous devons modifier la classe .toplinks-bar.

Aller sur le panneau “edit CSS” , et recherchez .toplinks-bar dans le champ de recherche, Nous devons sélectionner chaque onglet pour le trouver, et quand nous l’avons trouvé, (ici dans boxes.css) nous pouvons éditer la valeur de la couleur de fond (essayez background:red;), et voila.

Nous pouvons sauvegarder les changements et uploader les CSS (il y a une option de sauvegarde). Mais quel est le chemin de nos fichiers CSS que nous venons de modifier ?

Cliquez sur le bouton CSS (dans la webdeveloper bar) > view CSS. Un onglet s’ouvrira avec tous les css, et nous pouvons renvoyer le fichier sur le serveur maintenant que nous connaissons l’emplacement des CSS.