Modifying Template Files

Theme package

The package includes following themes:

  1. Charm: (machine name: charm) - This theme is the base theme for all TheMAG themes and also holds the vendor libraries and plugins used by the TheMAG. This theme is hidden and is not visible under the Appearance page.

  2. TheMAG(base): (machine name: themag) - This is TheMAG "base" theme. This theme hold original template files, styles and javascript files. You should not modify this theme is you plant to use future theme updates. This theme is also hidden and is not visible under the Appearance page.

  3. TheMAG: (machine name: themag_st) - This is default theme and is safe for modifications.

  4. Seven Extended: (machine name: pd_seven) - This theme is a extend version of Drupal Seven theme and comes with modified UI for better content editing experience.

Enable Drupal debug/development mode

When you are working on development stage, the caching mode is recommended to be disable. To disable render caching and JavaScript/CSS aggregation, do the following:

Edit the sites/default/settings.php and at the bottom of the file uncomment this code:

if (file_exists($app_root . '/' . $site_path . '/settings.local.php')) {
  include $app_root . '/' . $site_path . '/settings.local.php';
}

Assuming that you are using themag_drupal codebase included in the Envato package, otherwise you should read "Debugging compiled Twig templates"

It is highly important to disable Drupal debug/development mode on a production site. Otherwise you will facing performance issues.


Modify template file

  1. Copy the template file you wish to override from themes/themag/templates and place it the sub-theme templates directory themes/themag_st/templates.
  2. Go to performance page Configuration > Development > Performance (/admin/config/development/performance) and click on "Clear all cache" button.
  3. Now you can apply the changes to your new template file

It can be noted that not all template files are registered Drupal template files. Those files cannot be overridden following the procedure above.

For example header.html.twig is included in the page.html.twig file. To override header.html.twig, you have to copy both, page.html.twig and header.html.twig to your subtheme and change the include path from {% include '@themag/header/...'' %} to {% include '@themag_st/header/...'' %} for example.


How to know which template file is used by the theme

Drupal 8 has own debugging tool that allows you to locate the template file that outputs the markup.
Put the Drupal in development mode and use the browser inspector. You will see comments in the code like this: