Theming for Magento — Part 03 — Theming Basics

Right. We’re in part 03 of our “Theming for Magento” tutorial col­lec­tion. Time to get down to some theming.

A quick word on conventions

Magento, like many other con­tent man­age­ment sys­tems, likes to fol­low con­ven­tions. Adopting these con­ven­tions when design­ing your theme, as well as dur­ing the them­ing pro­cess, can greatly min­im­ize the amount of code required by your theme. As men­tioned on Part 02, Magento has a “fall back” fea­ture where it looks for required files, when not in your theme, within all other themes in the cur­rent inter­face until it finds the file it requires. This essen­tially allows users to keep a copy of the default theme in the inter­face in which they are cod­ing their theme (either the “default” or a cus­tom inter­face) and to only modify the files that require customisation.

An example of the above-​​mentioned con­ven­tions can be seen in the way that boxes are styled within Magento. Boxes are not unlike “wid­gets” in WordPress. Each box is assigned a unique class for spe­cific styl­ing to that box, as well as a gen­eric class for global styling.

A CSS block for global Magento box styl­ing looks like this (no attrib­utes cur­rently set for each class):

.box {}
.box .head {}
.box .head h4 {}
.box .content {}

By styl­ing the above tags in a CSS file within your theme, you should be able to style the major­ity of side­bar blocks within your Magento theme.

Setting up your theme’s stylesheets

As men­tioned in Part 02, Magento themes are made up of tem­plates and XML files, as well as a folder to hold all images, CSS files and other assets. For starters, I’d recom­mend mak­ing cop­ies of all CSS files within the default theme and pla­cing them in the same rel­at­ive loc­a­tion within your cus­tom theme (most likely the “CSS” folder within your theme’s “skin” folder). Once you’ve got the hang of work­ing with these CSS files, or to add your own so your own CSS file con­ven­tions can be used, the calls to the CSS files are loc­ated in page.xml near the top of the file. Once you get the hang of the con­ven­tions used within Magento, adjust­ing the theme’s CSS becomes a lot easier.

Great, so what other con­ven­tions are there?

If you’re work­ing in Firefox, I’d recom­mend installing the Firebug exten­sion, or some­thing sim­ilar. In Safari, use the “inspect Element” com­mand. This will allow you to inspect the code of your Magento install­a­tion and to identify con­ven­tions within the code. As there are an almost end­less amount of tem­plate files, when styl­ing your theme I find it best to keep a copy of the default theme within the inter­face in which I’m cod­ing and to make as many changes as pos­sible via the CSS and images without modi­fy­ing the tem­plate *.phtml files or *.xml files. This way, when your theme is done, you may end up with only sev­eral mod­i­fied *.phtml and *.xml files. Also, if you want to then pack­age your theme as a stan­dalone theme (ie: without requir­ing the need of the default theme), you can simply copy the unmod­i­fied files from the default theme over to yours and voila!

A Very Important Final Note

Well, folks, that’s it for this round of the “Theming For Magento” tutorial col­lec­tion. In Part 04, we’ll be open­ing up one or two *.xml and *.phtml files, check­ing out how they work and look­ing into ways to cre­ate smal­ler code snip­pets where possible.

A very import­ant last note: when cre­at­ing your Magento theme, make a note of all the files you’ve mod­i­fied along the way. For example, if you only modify the CSS files, make a note of that. It will help greatly later in when identi­fy­ing unmod­i­fied files for copy­ing over from the default theme and can, in gen­eral, be a real time-​​saver.

Related Posts

• Theming for Magento — Part 04 – How it all works
• Theming for Magento – Part 02 – Theme Architecture
• Theming for Magento – Part 01
• More tips for styl­ing the WordPress tinyMCE editor
• Obox launches the Obox Theme Store