Skip to content
diyphpdeveloper edited this page Apr 12, 2019 · 1 revision

FOLDER STRUCTURE

The "resources/themes" directory located in Laravel's root contains the available themes for the current project. Every base install of CMS Canvas comes with the default theme which is a good starting point for building custom themes. Themes use Twig which is a very powerful PHP template engine. More documentation about Twig and its usage can be found at http://twig.sensiolabs.org/.

A standard theme directory tree should be similar to the following:

theme_name/
    views/
        layouts/
            default.twig
        master.twig

NOTE: The only required naming conventions are the folders: views and layouts

VIEWS (Required)

This directory contains a layouts subdirectory and all core template files.

LAYOUTS (Required)

Layouts are for the most part just the layout of the content and usually extend a master template. When a page is requested it first determines the page's content type. Typically the content type will have a theme layout which is located in this directory assigned to it but not always. If the page's content type has a layout assigned, it will load that layout and replace the short tag {{ content }} with the content type's content.

THEME ASSETS

Public assets for themes are located in the "public/diyphpdeveloper/cmscanvas/themes/<theme_name>" directory. From here you can store assets like images, stylesheets, and scripts however you would like.

BUILDING A CUSTOM THEME

The best way to get started building a custom theme is to copy the default theme to the themes directory and rename it to whatever you would like. If you plan on renaming the default layout located in /resources/themes/your_theme/views/layouts, do that now as well.

The next step is to login to the admin panel of your site and go to System => General Settings and select your newly created theme from the dropdown (Shown below). Also select the default layout for the theme and then click save.

The site is now using the newly created theme. From here use /resources/themes/default/views/layouts/default.twig and /resources/themes/default/views/master.twig as a guide on how to build your theme. For more documenation on templating and available functions and tags see Twig's documentation: http://twig.sensiolabs.org/

Clone this wiki locally