Designs

A design is everything that decides how content looks: templates, style sheets, images that are not content, fonts and scripts. Designs live in directories, and a siteaccess says which design it uses. Because content is kept apart from design (see Content and design), one installation can show the same content with several designs, for example the public site and the administration.

What a design directory holds

design/<design>/                    or extension/<extension>/design/<design>/
├── templates/                 templates by path: pagelayout.tpl, node/view/full.tpl, content/datatype/view/...
├── override/templates/        templates chosen by override rules (override.ini)
├── stylesheets/               CSS
├── images/                    images of the design
├── javascript/                scripts
└── fonts/                     fonts (when the design has any)

The name of the directory is the name of the design. A design can be spread over several places: the same design name in design/ and in any number of extensions counts as one design, as long as each extension is listed in design.ini [ExtensionSettings] DesignExtensions[] (an extension adds itself there in its own settings/design.ini.append.php).

The designs that ship

A public site normally uses a design of its own, often from a site package or an extension, with base and standard as its fallbacks.

Choosing the design of a siteaccess

<?php /* #?ini charset="utf-8"?
# settings/siteaccess/site/site.ini.append.php

[DesignSettings]
SiteDesign=mydesign
AdditionalSiteDesignList[]
AdditionalSiteDesignList[]=base

*/ ?>

SiteDesign is searched first, then the designs of AdditionalSiteDesignList[] in their order, then StandardDesign. How the files of all these designs are combined into one search path is described in Design combinations.

Using design files in templates

<img src={'logo.png'|ezimage} alt="Logo" />               {* images/logo.png of the first design that has it *}
<link rel="stylesheet" href={'stylesheets/site.css'|ezdesign} />
{include uri='design:parts/header.tpl'}                    {* templates/parts/header.tpl *}

Style sheets and scripts are usually not linked one by one but listed in design.ini ([StylesheetSettings] FrontendCSSFileList[], [JavaScriptSettings] FrontendJavaScriptList[]), so the packer can combine and cache them. The Templates and design guide shows how to find the template that made a page and override it; template engines (.tpl, Smarty, Twig) are compared in The three template engines compared.