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 3
MY SUPPLEMENTAL DESIGN GUIDE
 
sdb
Sr. Member
 
Avatar
Total Posts:  223
Joined:  2007-11-13
coastal California, USA
 

I decided to make this thread after many hours of learning on my own and trolling the forums has helped me find the answers that I needed, none of which were addressed by the so called “design guide.” I make this thread not to be mean, but to point out that the design guide is, for my purposes, nearly useless. The devs need to shorten it, clarify it, and add useful information. I offer this as hopefully constructive criticism.

If you like this thread, mod it up and make it a sticky.
If you have things you think are important and would like to contribute, post a reply below and I will edit this post to include it.

Step 1: download firefox and the firebug plugin (i have been coding for years and never even heard of this plugin until i came to the magento forums)
Step 2: turn on path hints in magento (admin>system configuration>developer>main website (configuration scope)>template path hints yes
Step 3: turn off cache management (admin, cache management)
Other steps:
Watch the screencasts. They are much more helpful than the design guide (although I wish they were also typed out, as I can read quicker than I can watch)

ALWAYS REMEMBER TO BACKUP FREQUENTLY
for example, before i ever edit a file, i make a backup copy named old.whatever (naming them all with the same prefix makes them easy to find and makes it easy to see what files you have edited)

These are the paths you will need to know for editing themes
app/design/frontend/xx/yy/design/layout
app/design/frontend/xx/yy/design/template/page
skin/frontend/xx/yy/css
skin/frontend/xx/yy/iamges

These are the files that are important to know
boxes.css
reset.css
menu.css (if using the default nav menu)

Image Upload Problems?
Is your local filesystem set to show hidden files? You might not be uploading those .htaccess files.

How to make links
I managed to catch this info from a screenshot on a screencast
Granted, you can still use an absolute address, but relative ones are real nice.

<a href={{store url="catalog/product/views/sony-ericsson-w810i/id/18/category/8/"}}"> </a>

Similarly, you can insert an image like this

<img src="{{skin url="images/media/cell_phone_landing_banner1.jpg"}}" alt=""/>

Product Image sizes for the default theme
135x135 “small” (catalog preview thumbnail)
265x239 or bigger “base” (full size)
75x75 “thumb” (checkout image)

Left navigation on the front page
I forget which thread I took this from and who to give credit to
In the CMS section of the admin area, edit the homepage. Go to the Custom design section and replace it with

<reference name="left">
    <
block type="catalog/navigation" name="catalog.leftnavig" before="-" template="catalog/navigation/left_menu1.phtml"/>
Please note this will load the menu in the left column. If your layout doesn’t have one it won’t show unless you change reference name="left" to something other than left.

Getting items to show up on the front page
While editing your front page from the CMS menu of the admin area, insert this code somewhere into the body

{{block type="catalog/product_list" category_id="z" template="catalog/product/list.phtml"}}
category_id="z" where z is the category id number for the category you want to show up. that id number can be found in the URL when editing that category

How to Add PHP to your CMS pages
http://www.magentocommerce.com/boards/viewthread/3698/P0/

To Link to a Specific Category
Every category gets its own slash after the root directorty
For example, to get to my category “mens” i would type in http://exampleserver.com/magento/mens

Featured Products
A useful tip on how to work with featured products
http://www.magentocommerce.com/boards/viewthread/4780/

Changing the Breadcrumbs (thanks to cornernote and dan_w)
Go to app/core/Mage/Catalog/Block/Breadcrumb.php. Look for:

$breadcrumbsBlock->addCrumb(’home’,
array(
’label’=>Mage::helper(’catalog’)->__(’Home’), â€˜title’=>Mage::helper(’catalog’)->__(’Go to Home Page’), â€˜link’=>Mage::getBaseUrl())
);
and replace with
$breadcrumbsBlock->addCrumb('home',
  array(
    
'label'=>'my store home'
    
'title'=>'click to visit my store home'
    
'link'=>'http://somelink.com'
  
)
);

Integrating Lightbox
I have not tried this, as it doesn’t seem relevant to my store, but I do love lightbox
http://www.magentocommerce.com/wiki/adding_lightbox_to_magento_v2

How to change default JPEG compression
credit goes to PitchO from this thread
http://www.magentocommerce.com/boards/viewthread/6158/
If you use only jpg images, you can change the code like this in lib/Varien/Image/Adapter/Gd2.php :

Change

case IMAGETYPE_JPEG:
imagejpeg($this->_imageHandler$fileName);
break;

to

case IMAGETYPE_JPEG:
imagejpeg($this->_imageHandler$fileName95);
break;

To get a default compression of 95% instead of the default value (75%).

How to display the SKU on the frontend taken from sankaman2k
http://www.magentocommerce.com/boards/viewthread/6404/
Add the following to /app/design/frontend/default/default/template/catalog/product/view.phtml

<?php echo nl2br($_product->getSku()) ?>

This article might help
http://www.magentocommerce.com/wiki/how-to/designing/designing-for-magento
Of interest to me were the parts that mention how to add another css file globally and how to enable dreamweaver support for phtml files

Remember kids: succint. short, simple, to the point. K.I.S.S.!
http://en.wikipedi

 
Magento Community Magento Community
Magento Community
Magento Community
 
Ross
Guru
 
Avatar
Total Posts:  336
Joined:  2007-08-31
Scarborough, North Yorkshire, UK
 

I think what is written in the design guide was quite good and helpful for understanding the basics of the way the design system works.  What you have written in the post would probably be helpful to someone just getting started, but equally, if the person hadn’t read the design guide they probably wouldn’t understand what you are talking about.

The difference between your approach and the design guide, is that you are concerned with practical information and steps to go right ahead and do stuff, while the design guide seems to be concerned with providing a basic understanding of the principles.

Why not start a wiki article: “Step-by-Step: Theming Magento”? (or similar).  I’d be glad to help out with it as well.

 
Magento Community Magento Community
Magento Community
Magento Community
 
Ross
Guru
 
Avatar
Total Posts:  336
Joined:  2007-08-31
Scarborough, North Yorkshire, UK
 
sdb - 13 March 2008 08:42 AM

How to insert a content block with the store contents into a static page. For example, on the front page
cms>manage pages>homepage>content

{{block type="catalog/product_list" category_id="z"}}
(z being a variable for whatever number the category actually is. you can find that info in your browsers URL bar when editing said category)

This has changed slightly in the latest release:

{{block type="catalog/product_list" category_id="z" template="catalog/product/list.phtml"}}
 
Magento Community Magento Community
Magento Community
Magento Community
 
iblastoff
Sr. Member
 
Total Posts:  252
Joined:  2007-08-31
 

how is this the ‘real’ design guide? things like using firebug/web dev extension for FF should be an obvious give-in for any competent designer out there. and using those extensions you should easily come to the conclusion as to which css files control which styles.

want to know how to place links/products on the front page? either install the sample data or simply just log in to the online demo on this very site and take a look at the myriads of example code written in the cms pages.

 
Magento Community Magento Community
Magento Community
Magento Community
 
ptityop
Sr. Member
 
Total Posts:  105
Joined:  2007-11-21
 

Well this is not so obvious for everyone and not everyone wanting to change the design is a designer ... I also think we should thank anyones initiative to try and provide information grin You could have spent your time trying to reply to threads that are still awainting reply grin

 
Magento Community Magento Community
Magento Community
Magento Community
 
sdb
Sr. Member
 
Avatar
Total Posts:  223
Joined:  2007-11-13
coastal California, USA
 

i hadn’t though of adding this stuff to the wiki. i must confess, i have not edited wiki stuff before. if anyone wants to put the information in there, please feel free, but i won’t be doing it. thanks smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
sdb
Sr. Member
 
Avatar
Total Posts:  223
Joined:  2007-11-13
coastal California, USA
 

I’ve added more info, such as php, links, and a change due to the newest version of Magento
Added some info about getting categories to work
Making some changes for Magento release milestone 1 as I go along and update my site
-
Added a link on featured products. I’m going to link to useful forum threads as well.
-
Added how to edit breadcrumbs, integrate lightbox
-
Added info on changing jpeg compression level
-
Added info on how to put left navigation on your homepage CMS. Also added info on how to get a category block into the front page CMS. Added info on how to get the SKU to appear on the frontend.

 
Magento Community Magento Community
Magento Community
Magento Community
 
sherrie
Moderator
 
Avatar
Total Posts:  1655
Joined:  2007-12-14
Waterloo, ON
 

I’m looking at your wiki post on featured products:
http://www.magentocommerce.com/wiki/how_to_create_a_featured_product

But I don’t quite understand what is supposed to go in the last file (featured.phtml) ... could you please elaborate just a little bit more?

 
Magento Community Magento Community
Magento Community
Magento Community
 
sdb
Sr. Member
 
Avatar
Total Posts:  223
Joined:  2007-11-13
coastal California, USA
 

i haven’t quite tried this out myself, so i’m not sure how it works. it looks like the featured.phtml is just a block that gets called on by the other stuff.

it wasn’t my guide, it looks like it was written by andy101010, you might want to send him a private message or an email
http://www.magentocommerce.com/boards/member/12464/
i put it in this thread because it seemed like something useful to be able to do.

this was his original thread on the project
http://www.magentocommerce.com/boards/viewthread/4780/

 
Magento Community Magento Community
Magento Community
Magento Community
 
sherrie
Moderator
 
Avatar
Total Posts:  1655
Joined:  2007-12-14
Waterloo, ON
 

Ah, yes I realized this after my post here - thank you!

Apparently I had already commented on that thread and forgotten. smile

 
Magento Community Magento Community
Magento Community
Magento Community
 
KonstantinDK
Member
 
Avatar
Total Posts:  47
Joined:  2008-04-04
Arlington, TX, USA
 

The more guides the better. I’m going to take a day to read them all sometime in nearest future…

 
Magento Community Magento Community
Magento Community
Magento Community
 
chiaraweb
Guru
 
Avatar
Total Posts:  721
Joined:  2008-03-21
Aviano ~ Italy
 

Very helpful tutorial, thank you for your time spent to wrote!

Have a nice day wink

 
Magento Community Magento Community
Magento Community
Magento Community
 
Black Cat
Mentor
 
Avatar
Total Posts:  3481
Joined:  2008-02-14
Assemini / Cagliari (Italy)
 

good! thanks

 
Magento Community Magento Community
Magento Community
Magento Community
 
devx
Jr. Member
 
Total Posts:  20
Joined:  2007-08-31
 

hi sdb,
Thanks for taking the time to post it. It really helped a lot.

 
Magento Community Magento Community
Magento Community
Magento Community
 
sdb
Sr. Member
 
Avatar
Total Posts:  223
Joined:  2007-11-13
coastal California, USA
 

Adding a couple more

How to change the default sort by order in the catalog pages
taken from http://www.magentocommerce.com/boards/viewthread/1176/

edit pp/code/core/Mage/Catalog/Block/Product/List/Toolbar.php
around line 41 change the order around for name/value/price (top being first)

How to show the item quantity available in the frontend
taken from http://www.magentocommerce.com/boards/viewthread/8923/

place the following code wherever you want the quantity to show up (for example in view.phtml)

<?=Mage::getModel('cataloginventory/stock_item')->loadByProduct($_product)->getQty()?>
 
Magento Community Magento Community
Magento Community
Magento Community
 
WisdOMbooks
Sr. Member
 
Avatar
Total Posts:  144
Joined:  2007-08-31
Kolkata (Calcutta) - INDIA
 
sdb - 30 May 2008 10:27 AM

...How to show the item quantity available in the frontend
...place the following code wherever you want the quantity to show up (for example: in view.phtml)

For all the non-programming, non-developers, common mortals, like yours truly red face
it could be very helpful to quote the whole path of a file,
like: .../.../.../.../.../.../view.html

Don’t mind, please smile

A n g e l o

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