Right. We’re in part 03 of our “Theming for Magento” tutorial collection. Time to get down to some theming.
A quick word on conventions
Magento, like many other content management systems, likes to follow conventions. Adopting these conventions when designing your theme, as well as during the theming process, can greatly minimize the amount of code required by your theme. As mentioned on Part 02, Magento has a “fall back” feature where it looks for required files, when not in your theme, within all other themes in the current interface until it finds the file it requires. This essentially allows users to keep a copy of the default theme in the interface in which they are coding their theme (either the “default” or a custom interface) and to only modify the files that require customisation.
An example of the above-mentioned conventions can be seen in the way that boxes are styled within Magento. Boxes are not unlike “widgets” in WordPress. Each box is assigned a unique class for specific styling to that box, as well as a generic class for global styling.
A CSS block for global Magento box styling looks like this (no attributes currently set for each class):
.box {}
.box .head {}
.box .head h4 {}
.box .content {}
By styling the above tags in a CSS file within your theme, you should be able to style the majority of sidebar blocks within your Magento theme.
Setting up your theme’s stylesheets
As mentioned in Part 02, Magento themes are made up of templates and XML files, as well as a folder to hold all images, CSS files and other assets. For starters, I’d recommend making copies of all CSS files within the default theme and placing them in the same relative location within your custom theme (most likely the “CSS” folder within your theme’s “skin” folder). Once you’ve got the hang of working with these CSS files, or to add your own so your own CSS file conventions can be used, the calls to the CSS files are located in page.xml near the top of the file. Once you get the hang of the conventions used within Magento, adjusting the theme’s CSS becomes a lot easier.
Great, so what other conventions are there?
If you’re working in Firefox, I’d recommend installing the Firebug extension, or something similar. In Safari, use the “inspect Element” command. This will allow you to inspect the code of your Magento installation and to identify conventions within the code. As there are an almost endless amount of template files, when styling your theme I find it best to keep a copy of the default theme within the interface in which I’m coding and to make as many changes as possible via the CSS and images without modifying the template *.phtml files or *.xml files. This way, when your theme is done, you may end up with only several modified *.phtml and *.xml files. Also, if you want to then package your theme as a standalone theme (ie: without requiring the need of the default theme), you can simply copy the unmodified 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 collection. In Part 04, we’ll be opening up one or two *.xml and *.phtml files, checking out how they work and looking into ways to create smaller code snippets where possible.
A very important last note: when creating your Magento theme, make a note of all the files you’ve modified along the way. For example, if you only modify the CSS files, make a note of that. It will help greatly later in when identifying unmodified files for copying over from the default theme and can, in general, be a real time-saver.
Leave a Reply