Writing Themes
From ZenMagick Wiki
Contents |
Getting started with your own theme
Why a custom theme is a good idea
First rule in customizing ZenMagick (and any other application that supports themes/skins) is to set up your own theme to play around with. This is important for a number of reasons:
- Nothing will get lost during upgrades
- It's easy to see what actually has been changed and where defaults are used
- There is less confusion starting with an empty folder and filling it with just the files you want to edit.
Creating a new theme
This is possibly the easiest step:
- Login as admin.
- Select the Theme Builder option in the ZenMagick menu.
- Enter a theme name (must be unique and not yet exist).
- Click Create - done!
By keeping the defaults the following will now have happened:
- A new theme folder (and subfolder) has abeen created in the zenmagick/themes directory.
- A dummy file is created in Zen Cart's template folder to make the new theme show up in the Template Selection screen/
- The new theme is set as active theme.
Making it your own
The new theme does not really contain any real content yet. This is also not really necessary, because due to theme inheritance all missing files/settings are inherited from the default theme. That means also that right now the new theme does look exactly like the default theme!
CSS
The default theme uses two main CSS files:
- site.css
- This is the maine CSS resource.
- theme.css
- This is actually optional and not included in the default theme at all. The point it that by creating a file theme.css in your theme's content folder it's easy to start customizing your own theme.
- The demo theme is a good example of doing that. If you look at the included files, you'll see that beside some additonal JavaScript files and customized views (for demo purposes), the only thing different from the default theme is theme.css'.
Templates
Templates in ZenMagick (similar to Zen Cart) are broken down into three major groups:
- layout
- A layout template file is responsible for the general page structure (similar to Zen Cart's tpl_main_page.php). The default layout is named - default_layout.php and is found in the content folder of the theme (zenmagick/themes/[THEME_NAME]/content/default_layout.php).
- The default theme uses only two different layouts. One for normal pages and one for popups. To use a different layout for a specific page, all you need to do is configure this in the theme info class (typically in the constructor; the default theme illustrates this for setting the layout for popups):
$this->setLayout('popup_cvv_help', 'popup_layout');- view
- The view template is responsible for presenting the variable part of each page. Typically, some elements on a website stay pretty much the same for all pages. Examples would be: navigation, header, footer and other things usually found in the side colums like login forms, etc.
- So for the actual content of each individual page exists a separate template file (view) to display. Those are located in the views folder (zenmagick/themes/[THEME_NAME]/content/views).
- (side-)boxes
- Sideboxes are all those little things (categories, login, etc.) found in the left and right hand side columns on each page. Zen Cart allows to configure sideboxes individually for each theme, however, within a theme sideboxes are the same on all pages.
- (One way to get around this limitation would be to have different layouts that explicitely display the sideboxes required.)
So, to customize individual views, the recommended way is to copy the view from the default theme into your theme's view folder. There it can safely be modified. Since files of the active theme always take precedence over default files, your custom view will be immediately active.
