[Cpt.Crashtastic]

As you may have discovered the Wki for Litecommerce is incorrect for the current version. This currently works for XCN1.1.0

First we have to create some folders. The first is the developer id and the second the module name. these are placed in the classes/Xlite/Module folder.

You should end up with classes/XLite/Module/<ADEV>/<ASKIN>

Replace <ADEV> and <ASKIN> with appropiate names for this and the following file.

The next item to create is a php file called Main.php

<?php


namespace XLite\Module\<ADEV>\<ASKIN>;

/**
 * The skin module main class
 *
 */
abstract class Main extends \XLite\Module\AModule
{
    const CUSTOMER_SKIN_DIR = '<ASKIN>'; //This is the name of the folder that will contain our skin which reside in the skins folder
    
    
    /**
     * Author name
     *
     * @return string
     */
    public static function getAuthorName()
    {
        return '<ADEV>';
    }

    /**
     * Get module major version
     *
     * @return string
     */
    public static function getMajorVersion()
    {
        return '1.1';
    }

    /**
     * Module version
     *
     * @return string
     */
    public static function getMinorVersion()
    {
        return '0';
    }

    /**
     * Module name
     *
     * @return string
     */
    public static function getModuleName()
    {
        return '<ASKIN> Skin Name';
    }

    /**
     * Module description
     *
     * @return string
     */
    public static function getDescription()
    {
        return 'A skin for your web site';
    }
    // This function registers the new skin folder
    /**
     * Module skin directory
     * @return string
     */
    public static function init() {
	parent::init();
	\XLite\Core\Layout::getInstance()->addSkin(static::CUSTOMER_SKIN_DIR, \XLite::CUSTOMER_INTERFACE);
    }
}

NOTE: DO NOT CLOSE THE PHP TAG
    

Next create the the skin folder and a language folder 'en'. This resides in the skins folder so you have
skins/<ASKIN>/en

At this point you can copy the theme.css and style.css files from the skins/default/en/css folder to a new folder 'css' under our en folder.

Next go to admin and Maintenance->Rebuild Cache (Put the kettle on)

Next go to Add Ons and the new module should be listed. Turn it on and scroll to the botton and save changes. The cache will be rebuilt (Make Tea).

If you go to Settings->General settings select the performance tag and deselect the aggragate css and js options you should see when you reload the front end that the site is now using the css from the new skin.

I will extend this with a little more functionality over the next couple of days. For example relocating widgets.