Dummy theme template for custom design theme development

(beta)

Contents...

Dummy theme is a quick start package for fast development of new design themes, with full support of core Webasyst apps' functionality. This simple theme offers template files with source code simplified and reduced to the maximum, without any unnecessary extra inclusions.

JavaScript code is well-structured, and almost all JavaScript logic is contained in separate files so as to avoid the mixing of HTML/Smarty and browser scripts code with each other.

CSS styles are better structured, too, and are stored in separate subfolders, with only HTML templates and the manifest file (theme.xml) left in the theme root.

Dummy supports all core Webasyst apps: Site, Store, Blog, Photos, Hub, Helpdesk. This theme is intended only for web developers and is not available in Installer, only on GitHub.

Parent & child themes

Dummy theme for site app is the parent theme, other app's Dummy themes (for shop, blog, hub, photos, helpdesk) inherit its CSS styles, core JavaScript code, and main HTML layout.

Every child theme must contain the following template files:

  • head.html: template file with child theme resources to be included at the end of the <head> section
  • main.html: template for child theme's app's main content
  • header.html: template for website header displayed at the page top, because each app within a website can provide its own functionality for this area
  • sidebar.html: left-hand sidebar template
  • footer.html: child theme's page footer template.

New theme development steps

1. Preparation

  • Copy Dummy theme source files to directory wa-apps/site/themes/[theme_id]/. In a similar fashion copy appropriate source files to other apps's theme/ subfolders.
  • In file theme.xml of each app's theme change theme ID dummy to your own.
  • In "Structure" section of Site app select your new theme in each of the available app settlements.

2. Planning

Think of the common structure of an entire website which would be powered by your design theme and which must be implemented in the parent theme for site app:

  • design of the header and the footer, which are the same for all apps within a website
  • layout of the main content area and the sidebar, vertical menu, etc.
  • common navigation elements (headers, "breadcrumbs", etc.)
  • common styles for text and functional elements.

It is essential to pick out the common functionality which will be the same for all apps' themes.

For example, template sidebar.html in site app implements simply a sidebar of a certain width on the left of website pages, while in shop it displays the catalog navigation menu and product filters.

The same principle applies to the structuring of CSS and JavaScript resources of your theme: common elements are contained in the parent theme for site app and all other, app-specific, styles and scripts must be part of an app's separate theme.

3. Development

  • Create the theme core in a parent theme for site app.
  • Implement app-specific functionality and displaying of individual apps' content in their respective child themes.

4. Fast creation of a new design theme based on Dummy

Use the console command createTheme; e.g.,:

php wa.php createTheme site,shop,blog mytheme -name 'My theme' -version 1.0.0 -vendor 123456 -prototype dummy

Useful links