Making your own Theme using Multiple Layouts

In some cases, you may require multiple layouts for your custom theme. When would this be applicable? An example would be to facilitate a splash page or a special home page. The best way to do this would be to have a separate layout in your theme, and then simply select that layout for your front page. The examples on this page will assume you want to create a separate layout for a splash page.

How to Create

Creating another layout is pretty simple. When you unzip a theme into a directory you should have a default.html file which is your theme file. Simply make a copy of this file and call it "splash.html" - then make whatever changes you want to create your front page - a good example might be taking a two column layout and only presenting a single column (location) on the front page.

Make whatever changes you want to your layout following the regular theming guidelines found in the Making your own Theme area.

Once you are done, open config/theme/xml - you will need to add a little bit of configuration to tell Viviti about your new Layout.

Basically, just add this between the <author> tag and before the closing </theme>

 <layouts>
 <layout name="splash" label="Splash Page!"></layout>
 </layouts>

Of course, this code reflects the second layout being named splash.html - the name part should match the filename (but without the .html). You do not need to tell Viviti about your default (default.html) layout, but you can add as many alternative layouts as you want.

How to Use

When ready, just upload your custom theme. The Page Settings (either when creating a new page, or editing an existing one) will include a new section called "Layout" where you can select "Default" or "Splash".

config.xml

For themes with only 1 layout, the config.xml file is not required, however it is necessary if you intend to use multiple layouts or share your theme. The requirements for this file are:

Name
Author
Layouts (if applicable)

An example of the elements required in this file are as follows:

<?xml version="1.0" encoding="UTF-8"?>

<theme>
  <name>Theme Name</name>
  <author url="http://yourwebsite.com">Author Name</author>

  <layouts>
    <layout name="one" label="Single column"></layout>
  </layouts>
</theme>