Converting an HTML Template into a Skin

To use a design you have as HTML and CSS, put it into a clone of an existing skin. The skin already handles logins, profiles, lists and the ACP; you change how it looks.

1. Clone a skin (Cloning a Skin). Elastic 2 is a good start.
2. Put the design's header (everything before the content) into header.tpl, and its footer into footer.tpl. Keep the Smarty tags of the original templates that load the skin's CSS and JavaScript and show the menu.
3. Put the design's home page content into index.tpl, and replace its sample content with lists made by {jrCore_list}.
4. Add the design's CSS file to the skin's css/ folder, and register it in the skin's include.php (see below).
5. Put the design's images in img/, and show them with {jrCore_image image="name.png"}.
6. Reset the caches (ACP > Modules > Core > System Core > Tools > Reset Caches) to load the new CSS.

Work through the other templates, such as profile pages and item lists, the same way.

Add a line like the skin's own ones to include.php, in the skin's xxMySkin_skin_init() function:

jrCore_register_module_feature('jrCore', 'css', 'xxMySkin', 'mydesign.css');