Como se modifica el aspecto de una pagina web creada en magento??

[nikki]

Hola

La verdad es que soy nueva en este mundo de Magento y por mas que busco informaciones en la web , no he encontrado nada que me clarifique como modificar el aspecto de una pagina. .. en su visual, es decir cambiar las imagenes y modificar el archivo .css..etc

Cualkier ayudita lo agradeceria.

Pd: hay algun editor que sea recomendable para esta labor?? ( como el dreamweaver? )

[doctorlogos]

Hola Nikki,

Para resolver tus dudas sólo te puedo recomendar mucha paciencia, mucho inglés, y leerte por completo la guía del diseñador que viene en la documentación de la web de Magento.

La arquitectura de Magento es necesaria comprenderla, y aunque no es difícil una vez que la entiendes, sí que es "densa" para los que no somos programadores.

[Eri]

Buenas Nikki,

En el Blog de Magento hay articulos relacionados con el desarrollo para Magento (en español), creo que te puede ayudar!

http://www.elblogdemagento.com/category/desarrollo/

Un saludo!

[400c]

Para modificar el aspecto del magento, yo te recomendaría que las cajas con publicidad y demas, las hagas como bloques estáticos. Que la homepage la modifiques desde CMS, gestionar las páginas (escribiendo un poco de código en el contenido) Si quieres ver lo que puedes hacer, copia y pega este código en contenido:

<h1>Bienvenido a la tienda</h1>
<div class="col-left side-col">
<p class="home-callout">
<a href="{{store url="catalog/product/view/s/anashria-womens-premier-leather-sandal/id/135/category/5/"}}"><img src="{{skin url='images/ph_callout_left_top.gif'}}" border="0" /></a>
</p>
<p class="home-callout">
<img src="{{skin url='images/ph_callout_left_rebel.jpg'}}" border="0" />
</p>
{{block type="tag/popular" template="tag/popular.phtml"}}
</div>
<div class="home-spot">
<p class="home-callout">
<img src="{{skin url='images/home_main_callout.jpg'}}" border="0" width="470" />
</p>
<p class="home-callout">
<img src="{{skin url='images/free_shipping_callout.jpg'}}" border="0" width="470" />
</p>
<div class="box best-selling">
<h3>Best Selling Products</h3>
<table border="0" cellspacing="0">
<tbody>
<tr class="odd">
<td><a href="{{store url=""}}sony-vaio-vgn-txn27n-b-11-1-notebook-pc-intel-core-solo-processor-u1500-2-gb-ram-100-gb-hard-drive-dvd-rw-drive-vista-business-charcoal-black.html"><img class="product-img" src="{{skin url='images/media/best_selling_img01.jpg'}}" border="0" width="95" /></a>
<div class="product-description">
<p><a href="{{store url=""}}sony-vaio-vgn-txn27n-b-11-1-notebook-pc-intel-core-solo-processor-u1500-2-gb-ram-100-gb-hard-drive-dvd-rw-drive-vista-business-charcoal-black.html">Sony VAIO VGN-TXN27N/B 11.1" Notebook PC</a></p>
<p>
See all <a href="{{store url=""}}electronics/laptops">Laptops</a>
</p>
</div>
</td>
<td><a href="{{store url=""}}nine-west-women-s-lucero-pump.html"><img class="product-img" src="{{skin url='images/media/best_selling_img02.jpg'}}" border="0" width="95" /></a>
<div class="product-description">
<p><a href="{{store url=""}}nine-west-women-s-lucero-pump.html">Nine West Women's Lucero Pump</a></p>
<p>
See all <a href="{{store url=""}}apparel/shoes">Shoes</a>
</p>
</div>
</td>
</tr>
<tr class="even">
<td><a href="{{store url=""}}olympus-stylus-750-7-1mp-digital-camera.html"><img class="product-img" src="{{skin url='images/media/best_selling_img03.jpg'}}" border="0" width="95" /></a>
<div class="product-description">
<p>
<a href="{{store url=""}}olympus-stylus-750-7-1mp-digital-camera.html">Olympus Stylus 750 7.1MP Digital Camera</a>
</p>
<p>
See all <a href="{{store url="catalog/category/view/s/digital-cameras/id/26/"}}">Digital Cameras</a>
</p>
</div>
</td>
<td><a href="{{store url=""}}acer-ferrari-3200-notebook-computer-pc.html"><img class="product-img" src="{{skin url='images/media/best_selling_img04.jpg'}}" border="0" width="95" /></a>
<div class="product-description">
<p>
<a href="{{store url=""}}acer-ferrari-3200-notebook-computer-pc.html">Acer Ferrari 3200 Notebook Computer PC</a>
</p>
<p>
See all <a href="{{store url=""}}electronics/laptops">Laptops</a>
</p>
</div>
</td>
</tr>
<tr class="odd">
<td><a href="{{store url=""}}asics-men-s-gel-kayano-xii.html"><img class="product-img" src="{{skin url='images/media/best_selling_img05.jpg'}}" border="0" width="95" /></a>
<div class="product-description">
<p><a href="{{store url=""}}asics-men-s-gel-kayano-xii.html">ASICS&reg; Men's GEL-Kayano&reg; XII</a></p>
<p>See all <a href="{{store url="catalog/category/view/s/shoes/id/5/"}}">Shoes</a></p>
</div>
</td>
<td><a href="{{store url=""}}coalesce-functioning-on-impatience-t-shirt.html"><img class="product-img" src="{{skin url='images/media/best_selling_img06.jpg'}}" border="0" width="95" /></a>
<div class="product-description">
<p>
<a href="{{store url=""}}coalesce-functioning-on-impatience-t-shirt.html">Coalesce: Functioning On Impatience T-Shirt</a>
</p>
<p>
See all <a href="{{store url=""}}apparel/shirts">Shirts</a>
</p>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>

Para modificar otros aspectos como las columnas de la izquierda y derecha, prueba en esta ubicación:
app/design/frontend/default/default/template/callouts/

Espero que te sirva y como tengo un poco de prisa, si no he sido claro o tienes alguna duda, pregunta sin miedo.
saludos

[400c]

En cuanto al editor, si no me equivoco el dreamweaver no abre .phtml de entrada. He leido por ahí algún tutorial "como abrir .phtml en dreamweaver" que no he leído por que no es el que uso. Yo uso bluefish, de código abierto y muy simple. Claro que en comparación con dreamweaver no tienes el "preview" pero que en todo caso trabajando con php no puedes verlo.

saludos

[cgfc]

En cuanto al editor, si no me equivoco el dreamweaver no abre .phtml de entrada. He leido por ahí algún tutorial "como abrir .phtml en dreamweaver" que no he leído por que no es el que uso. Yo uso bluefish, de código abierto y muy simple. Claro que en comparación con dreamweaver no tienes el "preview" pero que en todo caso trabajando con php no puedes verlo.

saludos

Acá dejo indicaciones de como abrir archivos phtml en dreamweaver. es muy sencillo y funciona perfectamente.

By default, Dreamweaver cannot read PHTML files. You can add the file type to the “Open in Code View” section of the preferences if you wish to have fast access, however you cannot view the file in design view if you do that. So if you use Dreamweaver (versions 4, MX, MX2004, 8, or 9, aka CS3) to design your sites, and you wish to open Magento’s Template files (they have .phtml extensions) in Dreamweaver, you can follow these steps to add support for .phtml and make Dreamweaver render PHP code (with coloring, hinting, et al) as well as allow you to see the design in code view if desired. Below are three steps to follow.*
IMPORTANT NOTES: This guide is for Dreamweaver on Windows (XP or Vista) or Mac OS X. Note: I have excluded version numbers from the file locations shown, and if you are using a version older than Dreamweaver 9 (CS3) replace “Adobe” with “Macromedia” in the file locations shown. Some spaces have also been removed to keep the references on one line.
* Dreamweaver 4 users: if you are using the archaic Dreamweaver 4, you only need to follow step one. However, it’s highly recommended that you just upgrade to version 8, CS3 or newer for superb CSS and Web Standards support.
*With Dreamweaver 8, this tip didn’t work for me, so I repeated Step 3 here: “C:Documents and Settings > [user name] > Application Data > Macromedia > Dreamweaver 8 > Configuration > Document Types > MMDocumentTypes.xml” and PHTML finally worked in both Design View and Code view.
Step One: Add .phtml to extension.txt in your Application Data
Open the following extension configuration file in a notepad and change the lines as specified below:
XP: C:Documents and Settings > [user] > Application Data > Adobe Dreamweaver > Configuration > extensions.txt
NOTE: If you cannot see the Application Data Folder, go to Tools → Folder Options → View and make sure that Show Hidden Files and Folders is checked.
Vista: C:Users[user]App Data > Roaming > Adobe Dreamweaver > Configuration > Extensions.txt
Mac OS X: Users > Library > Application Support > Adobe > Dreamweaver 9 > Configuration > Extensions.txt
In the first line add PHTML like so:
HTM,HTML,SHTM,SHTML, ... ,TXT,PHP,PHP3,PHP4,PHP5,PHTML,JSP,WML,TPL, ... ,MASTER:All Documents
In the PHP Files line add PHTML like so:
PHP,PHP3,PHP4,PHP5,TPL,PHTML:PHP Files
Step Two: Add .phtml to the extension.txt configuration file
This file is pretty much exactly like the extensions.txt file located in Dreamweaver’s Application Data folder, except it is in Dreamweaver’s Program Files folder, inside a configuration folder. Just as in Step One, find the file and change the lines as specified below.
XP, Vista: C:Program Files > Adobe Dreamweaver > Configuration > Extensions.txt
Mac OS X: Applications > Adobe Dreamweaver CS3 > configuration > Extensions.txt
In the first line add PHTML like so:
HTM,HTML,SHTM,SHTML, ... ,TXT,PHP,PHP3,PHP4,PHP5,PHTML,JSP,WML,TPL, ... ,MASTER:All Documents
In the PHP Files line add PHTML like so:
PHP,PHP3,PHP4,PHP5,TPL,PHTML:PHP Files
Step Three: Add PHTML to MMDocumentTypes.xml
This file is an XML file which should be located in:
XP, Vista: C:Program Files > Adobe Dreamweaver > Configuration > DocumentTypes > MMDocumentTypes.XML
Mac OS X: Applications > Adobe Dreamweaver CS3 > configuration > DocumentTypes > MMDocumentTypes.XML
Add PHTML to this line (approx. line 75) twice, like so:
<documenttype id="PHP_MySQL" servermodel="PHP MySQL"
internaltype="Dynamic" winfileextension="php,php3,php4,php5,phtml"
macfileextension="php,php3,php4,php5,phtml" file="Default.php"
writebyteordermark="false">;
</documenttype>
Restart or Open Dreamweaver and you shouldn’t have any problems with PHTML files any longer.