This is a small HowTo based on a forum post I did today. I think there is something similar already
somewhere, but just in case…
A ZenMagick theme is equivalent of a zen-cart template. There are a few differences, mainly in implementation and structure, but basically that’s it.
One thing why I prefer themes is that all files are contained in a single folder (well, plenty of subdirectories, but copying a folder is always as simple as copying a single folder!).

Themes also have more power than their zen-cart counterparts. They may:

• contain custom code
• override ZenMagick base classes
• change l10n and i18n settings

among other things. It is also possible to programmatically switch to a different theme (this is actually implemented in the demo theme; product details pages will be displayed using the default theme, rather than the demo styles…)

Themes are located in the zenmagick/themes folder. If you have installed ZenMagick there should be two directories:

• default
• demo

Those are the two themes that come with ZenMagick. In order to create a new theme, the following steps are required:

1. Pick a name for the theme; this theme in this example will be funky
2. Create a new theme folder: zenmagick/themes/funky
3. Create a ThemeInfo class in the new theme folder.
   The easiest way is to copy the demo theme class file. Since the theme name is part of the class, you will have to rename the file from DemoThemeInfo.php to FunkyThemeInfo.php.
4. Edit the file FunkyThemeInfo.php so that the constructor functions match the class name (there should be three strings to replace).
5. Change the theme info to whatever you like. As long as you do not intend to publish your theme it doesn’t really matter.

The class should look similar to this:

class FunkyThemeInfo extends ZMThemeInfo {

  

 /**

    

* Default c'tor.

    

*/

  

 function FunkyThemeInfo() {

      parent::__construct();
      $this->setName(’Funky Theme’);
      $this->setVersion(’1.0′);
      $this->setAuthor(’Me’);
      $this->setDescription(’Funky ZenMagick theme.’);
   }

   /**
    * Default c’tor.
    */
   function __construct() {
      $this->FunkyThemeInfo();
   }
}
This is the minimum you have to do. At this point you have a working theme!

The next step is to make zen-cart know that a new theme exists. Login as admin and select the ZenMagick installaion screen. The patch Create admin dummy files for all installed ZenMagick themes should be not ticked, reason being that there is a new theme that zen-cart does not know about yet.

Tick the box and then click ‘Install’ to run the patch. This will create all neccessary files to make zen-cart recognize the new theme (you might need to do a refresh of the instalation page after that).

Now you can go into the template selection screen (Tools -> Template Selection) and the funky theme should be listed! NOTE: The preview will not work as no preview image is generated.

Select the funky theme and voila! The new theme is active!

If you now reload the store homepage you should notice two things:

1. There are no sidebars!
2. The page still looks like the default them

Since tis is a new template as far as zen-cart is concerned, you’ll have to configure your sidebars now. The easiest way is to click the ‘Restore’ buttom at the bottm of the ‘Layout Boxes Controller’ page and take it from there.

The reason for #2 is that since there isn’t actually any contents in the theme folder, the theme engine will use the default theme as fallback.

So, what’s next?

Next you can add as much custom content to your theme as you like. You’ll need to figure out which files of the default theme you actually would like to modify. Then you copy them into your theme folder keeping the same folder structure. Once ZenMagick detects a file in you theme folder it will start using that version rather the default version.

Alternatively, you are free to start from scratch as long as you keep the filenames the same Some may be customised, but that is perhaps a topic for another HowTo.

Some more things to keep in mind:

• If you want to modify the existing CSS rather than starting from scratch, you can do so by creating a file funky/content/theme.css, rather than copying site.css. theme.css will be loaded after site.css, so you are able to modify the default CSS.
• For performance reasons, it is possible to disable the fallback to the default theme. This means, though, that you have to copy all files.

Finally, I would like to add that I was kind of hoping that the demo theme would be enough to illustrate what makes up a theme. Apparently, this is not the case. Suggestions about missing documentation are very welcome.