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.
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
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
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
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
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' ) );
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, $fileName, 95); break;
To get a default compression of 95% instead of the default value (75%).
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.
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.
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 You could have spent your time trying to reply to threads that are still awainting reply
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
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.
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.
...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
it could be very helpful to quote the whole path of a file,
like: .../.../.../.../.../.../view.html
You could have spent your time trying to reply to threads that are still awainting reply 
Sales: Call 877.832.5289 (N America)|310.295.4144 (International)
