Parent and child design themes

How to use files of one design theme in other themes

Contents...

Website sections powered by different apps use separate design themes, because each theme belongs to its app. For example, on Site app’s and on Blog app’s pages separate themes are used.

Pages displayed within various website sections can have different or common appearance. The latter is usually achieved by one of these methods:

Differences between parent and child themes

A parent theme does not use other themes’ files and is completely independent. Parent themes are most simple by structure.

A child theme can use some files of its parent theme. For example, CSS styles or common templates such as header, sidebars, footer, etc.

A child’s theme.xml file contains the following:

These are the only differences that exist between parent and child themes.

Smarty variables for including design theme files

Various files of the parent and child themes can be included in HTML tempates using variables. Variables can be used only HTML templates, their values are not available in files of other types.

If a design theme has been reset to its original state, then the variables listed below refer to directory wa-apps/[app_id]/themes/[theme_id]/ or its URL.

If a user has saved theme settings or a theme was uploaded via backend as an archive file, then variables refer to directory wa-data/public/apps/[app_id]/themes/[theme_id]/ or its URL.

Including JavaScript, CSS, and font files

These variables contain URL of theme directories; therefore, they can be used to include only files directly available in a browser; e.g., CSS- or JavaScript files.

$wa_theme_url

Relative URL of the directory of the design theme to which current HTML file belongs. If CDN is enabled, then the variable contains the absolute URL of the directory’s CDN copy.

If a child theme includes an HTML file of the parent theme using attribute parent="1", then the variable in that file contains the URL of the parent theme directory.

In child theme’s own files the variable contains the URL of the child theme directory.

In parent theme files, the variable contains the URL of the parent theme directory.

Example

<link href="{$wa_theme_url}extra.css" rel="stylesheet" type="text/css">
$wa_real_theme_url

Relative URL of the directory of the design theme to which current HTML file belongs, like $wa_theme_url. Always contains a URL relative to the domain on which Webasyst is installed regardless of the CDN setting status.

Example

<link href="{$wa_real_theme_url}extra.css" rel="stylesheet" type="text/css">
$wa_active_theme_url

Relative URL of the directory of the design theme which includes current HTML file on a website page.

If a child theme includes an HTML file of the parent theme using attribute parent="1", then the variable in that file contains the URL of the design theme of the current website page’s settlement: either that of the parent or of a child theme.

In child theme’s own files the variable contains the URL of the child theme directory.

In parent theme files, the variable contains the URL of the parent theme directory.

Example

<link href="{$wa_active_theme_url}extra.css" rel="stylesheet" type="text/css">
$wa_parent_theme_url

Relative URL of the parent theme directory.

This variable makes sense only in HTML files of a child theme to include parent theme files.

Example

<link href="{$wa_parent_theme_url}mytheme.css" rel="stylesheet" type="text/css">

Including HTML files

$wa_active_theme_path

Full path to the design theme directory using current HTML file on a website page.

If current HTML file belongs to a parent theme and is included into its child theme using attribute parent="1", then the variable in that file contains the path to the directory of the current website page settlement’s design theme: either the parent or the child one.

Example

{include file="`$wa_active_theme_path`/sidebar.html"}
$wa_parent_theme_path

Full path to the parent theme directory.

Use of this variable makes sense only in HTML files of a child theme to include parent theme files.

Example

{include file="`$wa_parent_theme_path`/home.html"}