Theme Archive Structure

The downloaded theme archive contains several folders:

  • "themler-8.x" - this is theme module for Drupal 8.
  • "untitled_preview-8.x" - this is preview theme.
  • "untitled-8.x" - this is basic theme.

The theme archive contains two themes: basic theme and preview theme (named as ). You see the preview theme in the Themler preview area and when you click Live Preview - this allows you to make and preview changes without saving. Once you click "Save" or "Publish", the basic theme will be updated.

NOTE: Since there are two fully functional themes, you should manage Drupal Blocks in regions for both themes.

How to install Drupal 8 theme

  1. Unzip the downloaded archive.
  2. Go to Drupal administer >> Appearance >> click "+Install new theme" and install both basic and preview themes.
  3. To activate Themler theme please find the basic theme and click "Install and set as default". Otherwise simply click "Install".
  4. Please find the preview theme and click "Install". If the preview theme is not installed you will not be able to start Themler and edit theme.
  5. Go to Drupal administer >> Extend >> click "+Install new module" and install Themler module ("themler-8.x").
  6. Activate the installed module.

Permissions

In order to edit a template in Themler and save changes to the template, please make sure that the user and group running on the web server are granted the appropriate read, write and execute (linux only) permissions on the following folders, as well as read and write permission on the files in these folders:

sites/default/files/
/modules/
/themes/   

How to do this for MacOS or Linux systems:

  1. Login to ssh/terminal under privileged user, get sufficient access rights if necessary using sudo or su to make the following changes
  2. cd your_web_site_root
    For example: 
    cd /var/www/drupal8
  3. chmod -R u=rwX,g=rX folder_name
    For example: 
    chmod -R u=rwX,g=rX app/code/local
  4. chown -R < user>:< group> folder_name
    For example: 
    chown --R apache:apache app/code/local

Note: This is a general approach. We would recommend that you ask your hosting administrator to grant access permissions for the listed folders and files.

How to use Drupal 8 Theme

For more details please refer to this article.
The usage of the theme is the same as in Drupal 6 and 7. The only difference is configuring of Horizontal and Vertical menu subitems.
To enable subitems in Drupal 8 please go to the Drupal administer >> Structure >> Block Layout >> choose Menu block >> Configure >> expand "Menu Levels" >> "Maximum number of menu levels to display" >> set levels to >2 or "Unlimited".

How to use Custom Templates

The usage of Custom templates in Drupal 8 themes is the same as described in this article for Drupal 6-7 themes. The only difference is that you should specify a little different file name for Custom templates:
page-node-machinename.html.twig

Here machinename is a machinename of the custom content type.

Why Themler does not create custom templates for Views.

In general, the structure of the custom template is described below.
To start, let's describe what is page- and node- for Drupal, in general.
Page - this is a template for the whole page with Header, Footer and wrapper of the main content area.
Node - at some point this is a template for main content area or exactly CMS content part. Usually, node is rendered on the page- (page.tpl.php or page.html.twig) as <?php print $content; ?> or {{ page.content }}. In case of Themler node is article (article content ({{content}}) and metadata tags like date, author, etc) inside Posts control. The Posts control itself is a part of the page- and may output several nodes.

So, let's take a custom content type with machinename test.
Themler creates page--node--test.html.twig template that includes Header, Footer and Sidebars control with Posts control. Inside the Posts control Themler renders an include called blog_ID. This include outputs {{ page.content }} (this is our node-). The template for node is node.html.twig. This template renders a structure of includes, responsible for specific parts of the article.

Now let's take a view that outputs a list of nodes by content type test.
-|page--node--test.html.twig
-|-| include called blog_ID
-|-|-| {{ page.content }}
-|-|-|-| View wrapper with columns, for example
-|-|-|-|-| node ({{ content }}) of test type.

To create template for specific view we need a template for view wrapper. But Themler creates the template for the whole page by content type. In other words, in Themler the template for View is a template for content part of the template.

- [Theme Archive Structure](#theme-archive) - [How to install Drupal 8 theme](#install-theme) - [Permissions](#theme-permissions) - [How to use Drupal 8 Theme](#theme-usage) - [Custom Templates](#custom-templates) - [Custom Templates and Views](#views-templates) <a id="theme-archive"></a> ### Theme Archive Structure The downloaded theme archive contains several folders: - "themler-8.x" - this is theme module for Drupal 8. - "untitled_preview-8.x" - this is preview theme. - "untitled-8.x" - this is basic theme. The theme archive contains two themes: basic theme and preview theme (named as <ThemeName_preview>). You see the preview theme in the Themler preview area and when you click Live Preview - this allows you to make and preview changes without saving. Once you click "Save" or "Publish", the basic theme will be updated. **NOTE:** Since there are two fully functional themes, you should manage Drupal Blocks in regions for both themes. <a id="install-theme"></a> ### How to install Drupal 8 theme 1. **Unzip** the downloaded archive. 2. Go to **Drupal administer** >> **Appearance** >> click *"+Install new theme"* and install both **basic** and **preview themes**. 3. To activate Themler theme please find the basic theme and click *"Install and set as default"*. Otherwise simply click "Install". 4. Please find the **preview** theme and click *"Install"*. If the preview theme is not installed you will not be able to start Themler and edit theme. 5. Go to **Drupal administer** >> **Extend** >> click *"+Install new module"* and install Themler module ("themler-8.x"). 6. Activate the installed module. <a id="theme-permissions"></a> ### Permissions In order to edit a template in Themler and save changes to the template, please make sure that the user and group running on the web server are granted the appropriate read, write and execute (linux only) permissions on the following folders, as well as read and write permission on the files in these folders: <pre> sites/default/files/ /modules/ /themes/    </pre> #### How to do this for MacOS or Linux systems: 1. Login to ssh/terminal under privileged user, get sufficient access rights if necessary using *sudo* or *su* to make the following changes 2. **cd your_web_site_root** For example: <pre>cd */var/www/drupal8*</pre> 3. **chmod \-R u=rwX,g=rX folder_name** For example: <pre>chmod \-R u=rwX,g=rX app/code/local</pre> 4. <blink>**chown \-R < user>:< group> folder_name**</blink> For example: <pre>chown \--R apache:apache app/code/local</pre> **Note:** This is a general approach. We would recommend that you ask your hosting administrator to grant access permissions for the listed folders and files. <a id="theme-usage"></a> ### How to use Drupal 8 Theme For more details please refer to [this article](page:3728). The usage of the theme is the same as in Drupal 6 and 7. The only difference is configuring of **Horizontal** and **Vertical menu subitems**. To enable subitems in Drupal 8 please go to the **Drupal administer** >> **Structure** >> **Block Layout** >> choose Menu block >> **Configure** >> expand "Menu Levels" >> *"Maximum number of menu levels to display"* >> set levels to >2 or "Unlimited". <a id="custom-templates"></a> ### How to use Custom Templates The usage of Custom templates in Drupal 8 themes is the same as described in [this article](page:26302) for Drupal 6-7 themes. The only difference is that you should specify a little different file name for Custom templates: `page-node-machinename.html.twig` Here `machinename` is a machinename of the custom content type. <a id="views-templates"></a> #### Why Themler does not create custom templates for Views. In general, the structure of the custom template is described below. To start, let's describe what is `page-` and `node-` for Drupal, in general. *Page* - this is a template for the whole page with Header, Footer and wrapper of the main content area. *Node* - at some point this is a template for main content area or exactly CMS content part. Usually, node is rendered on the `page-` (page.tpl.php or page.html.twig) as `<?php print $content; ?>` or `{{ page.content }}`. In case of Themler `node` is article (article content (`{{content}}`) and metadata tags like date, author, etc) inside Posts control. The Posts control itself is a part of the `page-` and may output several nodes. So, let's take a custom content type with machinename `test`. Themler creates `page--node--test.html.twig` template that includes Header, Footer and Sidebars control with Posts control. Inside the Posts control Themler renders an include called `blog_ID`. This include outputs `{{ page.content }}` (this is our `node-`). The template for `node` is `node.html.twig`. This template renders a structure of includes, responsible for specific parts of the article. Now let's take a *view* that outputs a list of nodes by content type `test`. -|page--node--test.html.twig -|-| include called `blog_ID` -|-|-| {{ page.content }} -|-|-|-| View wrapper with columns, for example -|-|-|-|-| node (`{{ content }}`) of `test` type. To create template for specific view we need a template for view wrapper. But Themler creates the template for the whole page by content type. In other words, in Themler the template for View is a template for content part of the template.