Design theme settings

Contents...

In addition to the direct access to its source code (HTML, CSS, JavaScript), a design theme can also enable a Webasyst to specify various parameters which will affect the visual appearance of his website; e.g., header color, background color, logo image, navigation menu style, etc. Use of such settings prevents modifications of the theme's source code yet enables a user to easily change something in his website. Here is how the settings screen may appear in Webasyst backend:

The following types of controls can be used to specify various design theme parameters:

If the control type is not specified for a settings control, then that control will be displayed and handled as a simple text field (text).

In order to add settings controls to your design theme's manifest file theme.xml, create one common settings element with nested setting elements, each having a control_type attribute containing the control type (according to above control type list) and a var attribute containing the variable name to access its value in HTML templates.

Settings parameters

Required parameters

Each setting element must contain the following set of nested elements (in the specified order):

You may specify multiple name, description, and value elements, for each of language locale. In this case, each such element must contain a locale attribute with the name of the corresponding locale.

Optional parameters

A setting element can contain the following optional nested elements:

Hidden settings

Any setting can be made hidden. To do so, add the invisible attribute to a setting XML element and assign it value true.

Example
<setting var="..." control_type="..." invisible="true">
...
</setting>

Hidden settings are by default not displayed to a user. They can be displayed using “Show hidden settings” checkbox.

Grouping settings

Large lists of settings can be grouped so that users can see a list of groups rather than the entire long list of all available settings. Each group can be expanded to view only the settings within that group, other groups’ settings not interfering with the process.

To create a settings group, add a setting element with group_divider type before the first setting to be included in the new group.

Example
<setting var="group_1" control_type="group_divider">
    <name locale="en_US">Group 1</name>
</setting>

<setting var="settings_1">
    <name locale="en_US">Setting #1 for group 1</name>
</setting>

<setting var="settings_2">
    <name locale="en_US">Setting #2 for group 1</name>
</setting>

Settings groups can be placed inside each other. To do so, add a value element for the nested setting containing a value in the “parent_ID/own_ID” format.

Example
<setting var="group_1" control_type="group_divider">
    <name locale="en_US">Group 1</name>
</setting>

...

<setting var="group_2" control_type="group_divider">
    <value>group_1/group_2</value>
    <name locale="en_US">Group 2</name>
</setting>

<setting var="settings_3">
    <name locale="en_US">Setting #3 for group 2</name>
</setting>

Design theme settings file example

Below is shown a portion of a theme.xml file with examples of different design theme settings controls:

<settings>
    <setting control_type="text" var="caption">
        <value locale="en_US">Sample caption</value>
        <value locale="ru_RU">Пример заголовка</value>
        <name locale="en_US">Header caption</name>
        <name locale="ru_RU">Заголовок сайта</name>
    </setting>
    <setting control_type="select" var="color_scheme">
        <value>light</value>
        <name locale="en_US">Color scheme</name>
        <name locale="ru_RU">Цветовая схема</name>
        <options>
            <option value="light">
                <name locale="en_US">light</name>
                <name locale="ru_RU">светлая</name>
            </option>
            <option value="dark">
                <name locale="en_US">dark</name>
                <name locale="ru_RU">темная</name>
            </option>
        </options>
    </setting>
    <setting control_type="checkbox" var="show_subscription_form">
        <value>1</value>
        <name locale="en_US">Show subscription form</name>
        <name locale="ru_RU">Показывать форму подписки</name>
    </setting>
    <setting control_type="radio" var="menu_type">
        <value>dropdown</value>
        <name locale="en_US">Main menu type</name>
        <name locale="ru_RU">Тип главного меню</name>
        <options>
            <option value="simple">
                <name locale="en_US">simple</name>
                <name locale="ru_RU">простое</name>
                <description locale="en_US">Simple tree-like menu in the left sidebar.</description>
                <description locale="ru_RU">Простое древовидное меню в левой панели сайта.</description>
            </option>
            <option value="dropdown">
                <name locale="en_US">dropdown</name>
                <name locale="ru_RU">выпадающее</name>
                <description locale="en_US">Dynamic menu with great visual effects.</description>
                <description locale="ru_RU">Динамическое меню с привлекательными визуальными эффектами.</description>
            </option>
        </options>
    </setting>
    <setting control_type="color" var="header_color">
        <value>#777777</value>
        <name locale="en_US">Header color</name>
        <name locale="ru_RU">Цвет заголовка</name>
    </setting>
    <setting control_type="image" var="logo">
        <value></value>
        <filename>images/logo.*</filename>
        <name locale="en_US">Your logo</name>
        <name locale="ru_RU">Логотип</name>
        <description locale="en_US">128×128px large image.</description>
        <description locale="ru_RU">Изображение размером 128×128 пикселей.</description>
    </setting>
    <setting control_type="image_select" var="background_image">
        <value>images/themesettings/backgrounds/01.png</value>
        <name locale="en_US">Background image</name>
        <name locale="ru_RU">Фоновое изображение</name>
        <options>
            <option value="images/themesettings/backgrounds/01.png" />
            <option value="images/themesettings/backgrounds/02.png" />
            <option value="images/themesettings/backgrounds/03.png" />
            <option value="images/themesettings/backgrounds/04.png" />
        </options>
    </setting>
</settings>

Use of setting values in Smarty templates

Settings values specified by a user are accessible in design theme templates in the form {$theme_settings.var}, where the var part must be replaced with the variable name specified in the var attribute of the corresponding settings control. For example, in order to display the user-uploaded logo (suppose that the corresponding settings control has value var="logo"), you may add the following code to a design theme template:

{if $theme_settings.logo}
<img src="{$theme_settings.logo}">
{/if}