After some time now with Magento and wrapping my head about beautiful it is, now its time to get down to business. The templates.
Here’s how I’m going about it:
For now, I’m using two apps:
- Adobe Dreamweaver (or whatever other app you design in)
- Firefox + Firefox Web Developer Plugin (Get it here: http://chrispederick.com/work/web-developer/) Trust me its friggin awesome!
Step 1: Launch Adobe Dreamweaver & Tag the .phtml Files
/*--------------------------------------------------------------------------------------------------------*/
Note: I found it VERY useful to make use of Scott’s PHTML Dreamweaver Hack.
See wiki post here: http://www.magentocommerce.com/wiki/Opening-PHTML-Files-in-Dreamweaver
It allows you to open .phtml files in DESIGN view. Borat voice:Very Nice!!
/*--------------------------------------------------------------------------------------------------------*/
Ok this will be quick and dirty. We’re gonna tag some files so we can easily identify them from Firefox. In Dreamweaver navigate to the default FRONTend template directory. Its located here: /app/design/frontend/default/default/template/
From here you basically have the entire structure for the “default template”. You’ll see plenty of folders. Callouts/Catalog/Checkout/etc. Each correspond to templates& layouts for Magento’s individual modules. For now, we want to start with just labeling the General Page Layouts so we can identify em’ in our browser. You’ll see what I mean in a minute.
So for the General Layout Pages navigate to the PAGE directory:
/app/design/frontend/default/default/template/page
You’ll see the following files:
-1columns.phtml
-2columns-left.phtml
-2columns-right.phtml
-3columns.phtml
-dashboard.phtml
-onecolumn.phtml
*Every Page in the system uses one of these layout templates* .
Whether it be 3columns on the main page, 2columns on the catalog page, or 1column for the “My Cart page”. Each module pulls its general structure from these files. We’re gonna label em. I know, I know, sure we can always look at the page and instantly see it has 3columns or 2columns. But save your brain some work and just LABEL em, you’ll thank me later. Here’s how i did it:
Right after the <body> tag of each of the above pages I put the name of the template in a header tag:
Example:
In 2columns-right.phtml
Line 51:
<body> <h2>THIS IS 2COLUMNS-left.phtml</h2> <!-- [start] header --> <div class="header">
Do this to each of the general page files. I couldn’t attach screens to this forum message to show the example. So I posted them here:
http://picasaweb.google.com/nlewisinc/ . That’s how the pages display in the browser. By labeling each of them at the top, whenever I navigate through Magento I’ll immediately know WHAT layout template that specific page uses, and as a result know what to edit. After your done labeling the general .phtmls Go back and begin labeling individual module .phtmls . Just simply put a tag at the top of the page. Something easy to remove later. For example, view this screen here:
We now see that the cart page also calls upsells.phtml, shipping.phtml, and a few others. All of which are located here:
/app/design/frontend/default/default/template/checkout/cart/
Ok so The first step was easy right? . By labeling all the .phtmls whenever they show in the browser we’ll know exactly which file to edit , and where its being used. But to really begin changing the design to our needs we also need to Identify the CSS divs, classes, and elements of each page.... That’s where the real control is at.
The best resource to do this is The Web Developer Plugin. Once its installed just click the “Information button” --> Display Id & Class Details and the plugin will tell you the class and id of every element on the page.
See what we have now? We labeled all the .phtmls files that built the page… so we know which files to edit. And now.. via the Web Dev plugin we’re shown exactly which CSS elements STYLE the page. But how do we know exactly which CSS files to edit? Use you web dev toolbar again: Click CSS->View Style Information. Now we can click any element on the page and it’ll bring up the CSS reference for it.
The Thin red outline is the element I selected. Whenever u select an element it brings up a frame that shows the .css file and how it was styled. Cool right?
Now as far the CSS, I’ve noticed that the BULK of styling is done in boxes.css located here: /skin/frontend/default/default/css/ This file is pretty heavy with comments to help us out. A good thing I found its all the CSS elements are broken into little groups identified in “styles.css” i.e
Mage_CSS_B Common Elements, Mage_CSS_C Layout. Each of these groups is listed in boxes.css, and has corresponding elements. I’ll elaborate on this more later.
why don’t you write the tut directly to the wiki?
i think at this stage it will make sense to keep the knowledge at one spot, which should be here on the official page.
besides that a wiki is the perfect plattform for the tutorial.
just an idea.
True, Dreamweaver isn’t the greatest to view your designs in. But it’s mostly accurate. Even though I use Dreamweaver, I still prefer to hand-build everything I create. I don’t rely on Dreamweaver’s “Design Tools”. However, it does have some great features and it’s support for CSS and Standards has much improved since its earlier versions. It is after all the industry standard. That being said, of course you’re a fool if you don’t test your pages in physical browsers, that’s imperative.
Regarding the documentation, we are creating it in PDF view simply because there isn’t yet a way to upload images, and we haven’t decided whether we want to link them off-site for now, or ask Roy to incorporate image-upload functionality.
I was just thinking..
Would someone be interested in putting up a Magento installation with all .phtml labeled for identification? A Live Demo store designers could look at and reference might be useful. Im in the middle of provisioning so I’ve got Magento installed locally. Can anyone host a live site with labels?
Or maybe this may be a bad idea. Anyways give me some feedback.
@A.P.
Yeah your right. Might be useful for other users though. I noticed some views use a combination of .phtml files.
Like Checkout/cart.phtml. It pulls templates from shipping.phtml, upsells.phtml, etc, to build the Full “Cart.phtml” .. so when we navigate to catalog/product/cart.phtml for example, A user may think that whole template is located at “cart.phtml”.. where as it’s really a combination of 3-4 separate templates. Maybe if we label all the .phtmls for browser output, it’ll help identify each individual template .phtml thats used to create the full “View”. You know?
I’ll try to get an installation up, and we can see if its useful. Gotta try to get this server working though. Let’s keep at it.
@NickL: maybe to make it easier, just take screenshots of all the sections and organize in a wiki article, possibly a downloadable pdf for offline work as well
edit: or even better, setup a html version of it, (smaller, no database needed, not restrictive on server) I might be able to whip something up tonight
