Skip to main content

Modifying Template Files

Theme package​

The package includes the following themes:

  1. Charm: (machine name: charm) - This theme is the base theme for all TheMAG themes. Thi theme includes 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 contains original template files, styles, and javascript files. If you plan to use future them updates, do not modify the files in this theme, instead, use a subtheme (themag_st) to do any modifications.
  3. TheMAG: (machine name: themag_st) - This is the default theme. This theme extends TheMAG base theme, and it's safe for doing any modifications on it.
  4. Seven Extended: (machine name: pd_seven) - This theme is an extended version of Drupal Seven theme and has modified UI for better content editing experience.

Enable Drupal debug/development mode​

When you are working on the development stage, the caching mode is recommended to be disabled. To do that, 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"

caution

It is essential to disable Drupal debug/development mode on a production site. Otherwise, you will face 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 its 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: