Doc. Version: 1.0
Date: Apr 9, 2007
Languages: en
Author: Wizzud
Contact: rb@wizzud.com

jsCookMenu Module :
How To Create A New Theme

Synopsis

This document provides a brief guide to the steps required in order to create a new theme for the jsCookMenu module for Joomla. It is based on the basic premise that you have FTP access to the files within your Joomla environment, and that you can comfortably retrieve, edit, and upload files.
Please note that this document does not attempt to explain any part of the CSS styling used by any of the themes; all it will enable you to do is make a copy of an existing theme, which can then be used for experimental styling without affecting any original themes.

Folder Structure

Installing the jsCookMenu module into Joomla results in 2 files and a folder - jsCookMenu/ - being placed in the /modules/ folder. The folder modules/jsCookMenu/ contains a few files, an images/ folder, and one folder per theme.
Each theme has a name, and the theme folder must be named following the convention of Theme[theme name] or it will not be picked up in the dropdown in the module's administration form. You should refrain from using spaces in the theme name!
In the example below I will take a copy of the Office2003 theme and create a new theme called Wizzud. I have chosen the Office2003 theme to copy purely because it also has some images of its own, which some of the other themes do not.
Top of Page

Example

Below are the simple steps for creating a new theme.
Please remember to substitute your own new/source theme names where appropriate!
  1. Pick a (unique) name for your new theme - I will use Wizzud
  2. Select the existing theme that most closely (or exactly) matches the styling you want in your new theme - I will use Office2003
  3. Create a copy of the ThemeOffice2003/ folder and call it ThemeWizzud
  4. Edit the file ThemeWizzud/theme.css and globally change 'ThemeOffice2003' to 'ThemeWizzud', saving the result
  5. Edit the file ThemeWizzud/theme.js.php and globally change 'ThemeOffice2003' to 'ThemeWizzud', saving the result
That's it! When the new folder is placed back into the Joomla environment as modules/jsCookMenu/ThemeWizzud/ you will be able to select 'Wizzud' as a theme in the module's backend administration, and it will be styled exactly the same as the Office2003 theme.
Top of Page

Images

You may have noticed that images can be stored in 2 places:
  • Within the theme folder itself, and
  • In the images folder, modules/jsCookMenu/images/.
In the example above, the Office2003 theme (and now the Wizzud theme as well) has a few images within its own theme folder, eg. mainmenu.gif. These are images that are directly referenced from the theme's css stylesheet, as background images for example, and as such it keeps things simple if they held in the folder of the theme to which they apply.
The images held in the modules/jsCookMenu/images/ folder are available for use
  1. either explicitly from within a theme's theme.js.php file:
    for example, an extract from /modules/ThemeOffice2003/theme.js.php ...
    CODE
      // sub menu display attributes
      ,folderLeft: '<img alt="" src="{$this->sMenuImagePath}spacer.gif">'   // HTML code to the left of the folder item
      ,folderRight: '{$this->sFolderImageSub}'                                                   // HTML code to the right of the folder item
      ,itemLeft: '<img alt="" src="{$this->sMenuImagePath}spacer.gif">'     // HTML code to the left of the regular item
      ,itemRight: '<img alt="" src="{$this->sMenuImagePath}blank.gif">'     // HTML code to the right of the regular item
  2. or from the dropdowns available in the module's administration, where they can be selected as sub-menu indicators.
Top of Page
~~ The End ~~