Theme on tags: the “Side column” sample

The bundled themes differ in colour, font and details, but all have the header on top and the menu in a row. The “Side column” theme (rail) is built differently: the menu stands on the left as a full-height column and the content is on the right. The whole page frame lives in one tag file: themes/rail/views/layouts/main.tpl.html. The rest of the theme is theme.json and assets/css/theme.css (shared theme styles plus the rail layer at the end of the file).

The page frame

<div class="rail-shell">
  <aside class="rail">
    <a class="rail__brand brand" href="{home}"><span class="brand-name">{site_name}</span></a>
    <div class="rail__find">{search}</div>
    <nav class="rail__nav">
      [each:menu]<a class="rail__link" href="{item.url}">{item.title}</a>[/each]
    </nav>
    <div class="rail__side">{region:sidebar}</div>
    <div class="rail__foot">
      {languages}
      [if:user.logged]<div class="rail__me">{user_menu}</div>[else]<div class="rail__login">{login}</div>[/if]
    </div>
  </aside>
  <div class="rail-main">
    <main id="content" class="rail-content">{content}</main>
    <footer class="rail-foot"><p>© {year} {site_name}</p>{region:footer}</footer>
  </div>
</div>

The example keeps the essentials; the theme itself also has a top strip and places before and after the content.

How it holds on a phone

The left column works from 768 points. Narrower, the column turns into a compact row “search · language · sign in”, with a top strip above it holding the name and the “Menu” button ({menu_toggle}, which also opens the sections). It is all done with styles, so the markup is the same for all widths and no script is needed.

What is already ready-made

• the member menu {user_menu} (with the sign-out button), sign-in {login}, search {search}, language choice {languages} — ready tags of the engine; forms and protection keys stay with the engine;
• the places {region:…} — module blocks placed into the theme (banners, subscription, archive, poll);
• the frame needs no interface words: every label is already inside the ready tags, so the theme works in all seven languages without translations of its own.

How to make your own from this sample

1. Copy the themes/rail folder under your own name and edit name and the titles in theme.json.
2. Change only views/layouts/main.tpl.html (the layout) and the layer at the end of assets/css/theme.css.
3. If you cannot find the tag you need, see the list on the help page “All tags”. If the tag file is missing or broken (an unclosed block), the ordinary view works and the page does not break.
4. Not allowed: PHP, the form, script and style tags, event handlers. Only the engine draws forms.