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>
sectionmain.html
: template for child theme's app's main contentheader.html
: template for website header displayed at the page top, because each app within a website can provide its own functionality for this areasidebar.html
: left-hand sidebar templatefooter.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'stheme/
subfolders. - In file
theme.xml
of each app's theme change theme IDdummy
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
- Dummy theme on GitHub (it's not available in Installer).
- Design themes.
- Parent themes.
- Design theme settings.
- Design theme localization.
- Powered by Webasyst.