Tutorial: two sites, two designs #

This tutorial is for designers who style two brands that share one installation and the same page structure, for example "North" and "South". You will build pattern A of Designs in a multisite installation: one shared design and a small brand layer per site. Allow two hours.

Contents #

1. Step 1: the shared design
2. Step 2: two brand designs
3. Step 3: the design chains
4. Step 4: load the brand stylesheet
5. Step 5: check both

Step 1: the shared design #

Your theme extension has the design corporate with all templates, the base stylesheet and the scripts, built on tokens (Design tokens).

Step 2: two brand designs #

In the same extension:

extension/corporate_theme/design/brand_north/stylesheets/brand.css
extension/corporate_theme/design/brand_north/images/logo.svg
extension/corporate_theme/design/brand_south/stylesheets/brand.css
extension/corporate_theme/design/brand_south/images/logo.svg

brand_north/stylesheets/brand.css:

:root {
  --site-accent: #0b5cad;
  --site-font: "Source Sans 3", system-ui, sans-serif;
}
:root[data-theme="dark"] { --site-accent: #7fb3f0; }

brand_south/stylesheets/brand.css has its own values for the same tokens, and no other rules.

Step 3: the design chains #

# settings/siteaccess/north/site.ini.append.php
[DesignSettings]
SiteDesign=brand_north
AdditionalSiteDesignList[]
AdditionalSiteDesignList[]=corporate
AdditionalSiteDesignList[]=standard

and the same for south with brand_south. The extension is registered once with DesignExtensions[]; all three folders under its design/ become design bases.

Step 4: load the brand stylesheet #

In the shared pagelayout of corporate:

{ezcss_load( array( 'tokens.css', 'corporate.css', 'brand.css' ) )}
...
<a class="site-logo" href={'/'|ezurl}><img src={'logo.svg'|ezimage} alt="{$site.title|wash}" width="160" height="40"></a>

brand.css and logo.svg are found in the brand design first, because it is first in each chain. If a brand has no brand.css, the cascade finds none and the packer skips it with a warning; give corporate a default brand.css so a third site starts from sensible values.

Step 5: check both #

• To do: Each site shows its own colors and logo, in light and dark.
• To do: A template change in corporate shows on both.
• To do: Caches: both siteaccesses are in each other's RelatedSiteAccessList[], so publishing clears both.
• To do: Brand-specific templates (if any) live only in the brand design, never in corporate with an if on the siteaccess name.

Related pages #

• Designs in a multisite installation
• The design cascade
• Free documentation: this page is free to copy, translate and improve under the GNU FDL 1.3.