Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Page 1 of 4
Templating Magento… Useful Techniques & Tools
 
NickL
Sr. Member
 
Avatar
Total Posts:  188
Joined:  2007-08-31
 

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:

http://picasaweb.google.com/nlewisinc/Magento/photo#5106203815382630354
(Click the Magnify button on the right to enlarge)

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/

Pretty simple stuff.

Ok now lets go a step further:

Step 2: Use FireFox’s Web Developer Plugin to Identify CSS Elements
Get the plugin here:  http://chrispederick.com/work/web-developer/

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. 

Here’s a screen:
http://picasaweb.google.com/nlewisinc/Magento/photo#5106214050289696786 (Click the Magnify to enlarge)

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.

Here’s a screen:
http://picasaweb.google.com/nlewisinc/Magento/photo#5106214041699762178

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.

For now.. Hope this helps

 
Magento Community Magento Community
Magento Community
Magento Community
 
RoyRubin
Enthusiast
 
Avatar
Total Posts:  968
Joined:  2007-08-07
Los Angeles, CA
 

Excellent post Nick. We should have the image issue resolved in the next few hours.

 
Magento Community Magento Community
Magento Community
Magento Community
 
_
Sr. Member
 
Total Posts:  152
Joined:  2007-08-31
 

.

 
Magento Community Magento Community
Magento Community
Magento Community
 
lopsta.com
Sr. Member
 
Avatar
Total Posts:  145
Joined:  2007-08-31
 

@A.Piotrowski

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.

 
Magento Community Magento Community
Magento Community
Magento Community
 
_
Sr. Member
 
Total Posts:  152
Joined:  2007-08-31
 

.

 
Magento Community Magento Community
Magento Community
Magento Community
 
iblastoff
Sr. Member
 
Total Posts:  252
Joined:  2007-08-31
 

there are actually designers that use dreamweavers completely unreliable design view???

 
Magento Community Magento Community
Magento Community
Magento Community
 
Scott
Guru
 
Avatar
Total Posts:  333
Joined:  2007-08-31
Northwest Ohio
 

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.

What do you think Roy?

 
Magento Community Magento Community
Magento Community
Magento Community
 
_
Sr. Member
 
Total Posts:  152
Joined:  2007-08-31
 

.

 
Magento Community Magento Community
Magento Community
Magento Community
 
NickL
Sr. Member
 
Avatar
Total Posts:  188
Joined:  2007-08-31
 

@A.Pio~ Sure, I’ll contribute, make sure to post it to the wiki so it can be searched. That’ll help keep everything central.  Good work man.

I’ll post to the wiki as soon as I finish my notes. I Plan to elaborate more about the specific CSS elements.

 
Magento Community Magento Community
Magento Community
Magento Community
 
_
Sr. Member
 
Total Posts:  152
Joined:  2007-08-31
 

.

 
Magento Community Magento Community
Magento Community
Magento Community
 
NickL
Sr. Member
 
Avatar
Total Posts:  188
Joined:  2007-08-31
 

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.

 
Magento Community Magento Community
Magento Community
Magento Community
 
_
Sr. Member
 
Total Posts:  152
Joined:  2007-08-31
 

.

 
Magento Community Magento Community
Magento Community
Magento Community
 
RoyRubin
Enthusiast
 
Avatar
Total Posts:  968
Joined:  2007-08-07
Los Angeles, CA
 

Image uploading should work now. If you find a file type that doesn’t work, let me know (we need to add the mime manually per type)

 
Magento Community Magento Community
Magento Community
Magento Community
 
NickL
Sr. Member
 
Avatar
Total Posts:  188
Joined:  2007-08-31
 

Good Stuff Roy.

@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.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Scott
Guru
 
Avatar
Total Posts:  333
Joined:  2007-08-31
Northwest Ohio
 

I admit, navigating all those folders is a pain at times. But hey, you have to admit, it’s a trillion and a half times better than oscommerce, eh? rasberry

 
Magento Community Magento Community
Magento Community
Magento Community
 
mckooter
Sr. Member
 
Avatar
Total Posts:  91
Joined:  2007-08-31
 

@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

 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top
Page 1 of 4