Theming for Magento — Part 03 – Theming Basics

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.

Join the Conversation

9 Comments

  1. Thanks – great post!

    Do you start with the blank, default or from scratch when developing a new site?

    Patiently waiting for part 04

    1. Hi Deb,
      Thanks very much. 🙂

      I usually start as I would when building a website for any other CMS, which is by building the static XHTML/CSS first. From there, I setup my code within either a custom interface (with a copy of the default theme in it) or in the default interface and I begin slowly migrating my code over to Magento. From there, because I have the default theme in place, all templates and layout XML files can be easily found from the default theme. From there, I slowly customise any templates for any modules that require specific customisation. Once I’m done with that, I copy and paste the unmodified templates and layout XML files from the default theme into my custom theme.

      At this point it’s probably a good idea that I mention that its a very good idea to keep a note of all files you modify in the template and layout folders… so you don’t overwrite your customisations by accident. 🙂

      I hope this helps.

      Cheers,
      Matt.

    1. Hey Amber,
      Thanks so much for your comment. 🙂

      I’ll hopefully be working on part 4 over the next few days and will post it as soon as possible.

      Are there any topics in particular which you would like covered?

  2. I am customizing a store for a client who already has the main “informational” website up. They want the store to fit seamlessly with the website as far as look & feel. So the main site already has a stylesheet, etc. Any tips would be great.

    1. Hey Amber,
      The main points I’ll be aiming to get across in part 4 will be the concept of a) how the various pieces are attached via the XML files and b) the concept of creating “areas”. This concept is similar to creating widgetised areas in WordPress, if you’re familiar with that.

      Essentially, I’d recommend doing two things.

      1. Modify as little of the existing Magento XHTML as possible (copy the files from the ‘default’ theme as a starting point).
      2. Work with the concept of creating “areas” (left, right, content, etc) and style the various boxes (widgets, referred to in the XHTML/CSS as boxes) without modifying the XHTML. This will save you time in the future and also ensure that you don’t have to dive into endless *.phtml files to change code.

      I hope this helps. Let me know if anything is unclear or if there’s anything else I can assist with. 🙂

      Cheers,
      Matty.

  3. Hi,
    Great tutorial!
    Because of Magento’s fall back system, I copy over the file where I have to make changes from the default theme’s folders to my own theme’s folders.

    I am not sure why I should make a note of unchanged files and copy them over later as well? Are you doing this to be able to make your theme work as stand alone theme? Or is there any other reason?

    Regards,
    Thomas

Leave a comment

Your email address will not be published. Required fields are marked *

%d bloggers like this: