Traduction du post :
Apres qq temps avec Magento et apres la phase d'euphorie, me voila au boulot : les templates.
Voilà comment je procède :
Pour le moment j'utilise deux applications :
- Adobe Dreamweaver (peut être remplacé par n'importe quelle application avec mode design)
- Firefox + Firefox Web Developer Plugin (Le prendre a l'adresse suivante:
http://chrispederick.com/work/web-developer/).
Etape 1: Lancer Adobe Dreamweaver & Tager le fichier.phtml/*--------------------------------------------------------------------------------------------------------*/
Note: J'ai trouvé TRES utile d'utiliser le hack de Scott pour Dreamweaver.
Voir le post du wiki a cette adresse:
http://www.magentocommerce.com/wiki/Opening-PHTML-Files-in-DreamweaverCela vous permet d'ouvrire les fichier .phtml en mode design.
/*--------------------------------------------------------------------------------------------------------*/
Ok, cela va être rapide et pas très propre.
Nous avons des tag que nous pouvons facilement identifier à partir de Firefox.
Ouvrez dans dreamweaver les fichiers du répertoire des templates qui se trouve ici :
/app/design/frontend/default/default/template/Vous trouverez, quasiment, dans ce repertoire tous les fichiers du template par default.
Vous allez avoir bcp de dossier
Callouts/Catalog/Checkout/etc...
Ils correspondent tous au template de Magento et de ces modules.
Pour le moment, nous allons juste nous voulons juste "nommer" la première page de façon à identifier les champs sur votre navigateur internet.
Nous allons voir cela dans une minute.
Donc, pour le template général, allons dans le répertoire :
/app/design/frontend/default/default/template/pageNous allons y trouver les fichiers suivant:
| Code : |
-1columns.phtml
-2columns-left.phtml
-2columns-right.phtml
-3columns.phtml
-dashboard.phtml
-onecolumn.phtml |
* Toutes les pages du système utilisent une de ces page template*
La première page utilise 3columns , les pages catalogue 2columns ou 1column pour la page "Mon pannier (My Cart page)".
Tout ces modules tirent leur structure générale de ces fichiers.
Nous allons maintenant les nommer. Je sais que nous pouvons juste regarder les pages et dire instantanément si l'on voit deux ou trois colonnes. Mais sauvons notre cerveau pour du vrai travail et nommons les pages, vous me remercierez plus tard.
Voila comment j'ai fait :
Juste apres le tag <body> de toutes ces pages, j'ai mis le nom du template dans le tag header.
Exemple:
Dans 2columns-right.phtml
Ligne 51:
| Code : |
<body>
<h2>THIS IS 2COLUMNS-left.phtml</h2>
<!-- [start] header -->
<div class="header"> |
Le faire dans toutes les pages du fichier. En nommant toutes ces pages, en surfant simplement sur Magento je peux savoir immediatement, quel template la page où je suis, utilise.
Après avoir nommé toutes les pages générales, vous pouvez faire de même avec les fichiers .phtmls des modules. Il suffit simplement de mettre un tag au debut de chaque page (facile a supprimer par la suite).
Un exemple sur la page:
http://picasaweb.google.com/nlewisinc/Magento/photo#5106203815382630354
Nous savons donc que la page panier appelle upsells.phtml, shipping.phtml et qq autres.
Elles sont toutes localisées dans ce répertoire :
/app/design/frontend/default/default/template/checkout/cart/
Assez facile
Etape 2: Utiliser FireFox’s Web Developer Plugin pour Identifier les elements CSS.
Vous trouverez le module ici:
http://chrispederick.com/work/web-developer/.
Dans la première étape nous avons nommé chaque .phtmls et nous savons donc quels fichier à éditer. Mais pour vraiment changer le design selon vos besoins nous devons aussi identifier les divs, classes, etc ... CSS.
Une fois le module firefox installé, cliquer sur “Information button” --> Display Id & Class Details et le pluggin vous dira la classe et l'id de chaque élément de la page.
Voir le screenshot:
http://picasaweb.google.com/nlewisinc/Magento/photo#5106214050289696786
Nous n'avons plus qu'à utiliser la barre de nouveau en cliquant sur Click CSS->View Style Information.
En cliquand sur chaque element de la page nous aurons les éléments CSS de l'endroit cliquez.
Voir le screen:
http://picasaweb.google.com/nlewisinc/Magento/photo#5106214041699762178
Le cadre rouge porte sur l'élément sélectionné. cool, non ?
Maintenant, au point ou j'en suis, j'ai remarqué que la plupart des CSS sont dans le dossier
/skin/frontend/default/default/css/
Le squelette du site se trouve dans boxes.css et tout les éléments CSS se trouvent dans des petits groupes identifiés dans styles.css et listés dans boxes.css.
J'expliquerais cela dans un deuxième temps.
En espérant vous avoir aidé à mieux comprendre pour le moment.nn
Message édité par : fredquie, à : 04 09 2007 21:27:40
Forums 
: