Design themes

Contents...

The Site application is a common design editor for several other (already released or being developed) apps: Site, Blog, Shop.

Design templates

In Webasyst there are two standard places where design template (theme) files are stored:

  1. wa-apps/APP_ID/themes/ — original design theme files inside the application folder
  2. wa-data/public/APP_ID/themes/ — custom design changes applied by application users

In the app folder (wa-apps/) are stored the original theme files, where they are copied, when a theme is installed in the Installer. When any template file is modified using the Site's built-in editor, a copy of the original theme is created in user folder wa-data/public/APP_ID/themes/, and only this copy is used thereafter (the original theme remains in folder wa-apps/ and is never more modified by the design editor).

We recomend using only the built-in editor to modify design templates, because in this case all your changes will be guaranteed preserved when updates are installed using the Installer. If you prefer editing templates directly in files (e.g., via FTP) without using the design editor, then we strongly suggest that you modify only the user copy located inside wa-data/ in order not to lose your changes after the next software update.

Built-in design editor

Webasyst's backend and frontend utilize template processing engine Smarty; therefore, you can use all Smarty functions in the design templates. In the bottom right corner of the design editor window you will find a cheat sheet with the list of structures and variables, which you can use in the current template.

Depending on its specific functionality, each application has its own set of mandatory design templates. For example, in the Site app such mandatory template files are only index.html (general page layout), page.html (single page), and error.html (error message). In the Blog app there are other mandatory templates: post.html (single post), stream.html (post list), comments.html (comment list to a post). The developer of each application can decide, which templates a design theme should consist of and which templates are mandatory.

Using the built-in design editor, the website owner can edit all templates, create new templates, connect them to the basic templates using Smarty function {include file="..."}, but cannot delete the mandatory template files and thus impair normal operation of the application.

Design theme structure

A design theme is a combination of HTML/Smarty template, JavaScript, CSS, and image files, and the manifest file theme.xml stored in one folder.

Manifest file theme.xml contains basic theme settings (title and version) and the list of files, which should be accessible via the design editor. The applicable DTD file defining its XML structure is available at http://www.webasyst.com/wa-content/xml/wa-app-theme.dtd.

Read more about the design theme structure →.