| | 3 | * **Layout files** = Files that draw everything around the content of a page. E.g. Header, body, footer. |
|---|
| | 4 | * **Page files** = Main content for each and every page. |
|---|
| | 5 | * **View files** = Boxes and partials that are included in pages and layouts. |
|---|
| | 6 | |
|---|
| | 7 | ## Create A New Template |
|---|
| | 8 | |
|---|
| | 9 | - Copy the folder **~/includes/templates/default.catalog/** and all of it's contents to a new folder e.g. **~/includes/templates/mytheme.catalog/**. |
|---|
| | 10 | - Clear the contents of the subdirectory **pages/** and **views/**. This is because LiteCart will fetch views from 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. |
|---|
| | 11 | - Activate the new theme in Admin -> Appearance. |
|---|
| | 12 | |
|---|
| | 13 | ## Use A Different Layout For The Start Page |
|---|
| | 14 | |
|---|
| | 15 | - Create a new layout file named **~/includes/templates/mytheme.catalog/layouts/index.inc.php**. |
|---|
| | 16 | - Open up the defining page ~/pages/index.inc.php and insert the following code: |
|---|
| | 17 | |
|---|
| | 18 | ``` |
|---|
| | 19 | |
|---|
| | 20 | ``` |
|---|
| | 21 | |
|---|
| | 22 | ## How To Find Specific CSS Stylings |
|---|
| | 23 | |
|---|
| | 24 | Web browsers today comes with a set of handy developer tools. |
|---|
| | 25 | |
|---|
| | 26 | - Right click the element you want to style and select Inspect Element. |
|---|
| | 27 | |
|---|
| | 28 | - 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](https://developer.chrome.com/devtools). |
|---|
| | 29 | |
|---|
| | 30 | We recommend reading the article [How to change the look of your store](how_to_change_the_look_of_your_store) regarding LESS |
|---|
| | 31 | files. |
|---|
| | 32 | |
|---|
| | 33 | ## Template Settings |
|---|
| | 34 | |
|---|
| | 35 | You have probably noticed the config file inside the template. It |
|---|
| | 36 | enables you to create a settings structure that can be controlled from |
|---|
| | 37 | the admin interface. Bascially it uses the same functionality as the |
|---|
| | 38 | modules do. Example goes: |
|---|
| | 39 | |
|---|
| | 40 | ``` |
|---|
| | 41 | $template_config = [ |
|---|
| | 42 | [ |
|---|
| | 43 | 'key' => 'background', |
|---|
| | 44 | |
|---|
| | 45 | 'default_value' => '#fff', |
|---|
| | 46 | 'title' => language::translate('title_background', 'Background'), |
|---|
| | 47 | 'description' => language::translate('description_background', 'A CSS background value'), |
|---|
| | 48 | 'function' => 'text()', |
|---|
| | 49 | ], |
|---|
| | 50 | ]; |
|---|
| | 51 | ``` |
|---|
| | 52 | **Note:** For more 'function' options you can look at the function "form_draw_function()" found in the file "func_form.inc.php". |
|---|
| | 53 | |
|---|
| | 54 | To call this value use the following in a template layout: |
|---|
| | 55 | |
|---|
| | 56 | ``` |
|---|
| | 57 | |
|---|
| | 58 | body { |
|---|
| | 59 | background: ; |
|---|
| | 60 | } |
|---|
| | 61 | |
|---|
| | 62 | ``` |
|---|
| | 63 | |
|---|
| | 64 | **Note:** The settings values are reset once the template is changed to another template. |
|---|
