User Tools

Site Tools


how_to_create_a_template

How To Create A LiteCart Template

  • Layout files = Files that draw everything around the content of a page. E.g. Header, body, footer.
  • Page files = Main content for each and every page.
  • View files = Boxes and partials that are included in pages and layouts.

Create A New Template

  1. Copy the folder ~/includes/templates/default.catalog/ and all of it's contents to a new folder e.g. ~/includes/templates/mytheme.catalog/.
  2. Clear the contents of the subdirectory ~/includes/templates/mytheme.catalog/views/. This is because LiteCart will use the default view files if there are none in the new template. Basically we just want to store the views we are overriding inside the new template.
  3. Edit ~/includes/templates/mytheme.catalog/layouts/default.inc.php which is the main layout unless nothing else is specified.
  4. Activate the new theme in Admin → Appearance

Use A Different Layout For The Start Page

  1. Create a new layout file named ~/includes/templates/mytheme.catalog/layouts/index.inc.php.
  2. Open up the defining page ~/pages/index.inc.php and insert the following code:
  document::$layout = 'index';

How To Find A Specific CSS Rule

Google Chrome comes with a set of handy developer tools.

  1. Right click the element you want to style and select Inspect Element.
  2. Look at the style definitions shown on the side. It will tell you which LESS file and line the rule is stated. More information about the developer tools be found in https://developer.chrome.com/devtools.

We recommend reading the article How to change the look of your store regarding LESS files.

Template Settings

You have probably noticed the config file inside the template. It enables you to create a settings structure that can be controlled from the admin interface. Bascially it uses the same functionality as the modules do. Example goes:

  $template_config = array(
    array(
      'key' => 'background',
      'default_value' => '#fff',
      'title' => language::translate('title_background', 'Background'),
      'description' => language::translate('description_background', 'A CSS background value'),
      'function' => 'input()',
    ),
  );

Note: For more 'function' options you can look at the function “form_draw_function()” found in the file “func_form.inc.php”.

To call this value use the following in a template layout:

<style>
body {
  background: <?php echo document::$settings['background']; ?>;
}
</style>

Note: The settings values is a shared space. Each time a template is swapped, the settings of the template are reset.

how_to_create_a_template.txt · Last modified: 2017/05/02 00:58 by admin