Theme settings

Материал из Insales Wiki
Перейти к: навигация, поиск

О настройка темы

Настройки темы позволяют упростить изменение различных параметров шаблона для конечного пользователя. Например, удобно выбирать цвет, лого, фон и многое другое.

Конечный пользователь видит список настроек тут(Сайт->Дизайн->Настройки темы):

Setting user.jpg

Setting user 2.jpg

Редактировать и добавлять туда параметры можно через Сайт->Дизайн->Редактор шаблонов->Настройки темы:

Theme settings.jpg

Использование "Настроек темы" в других файлах/шаблонах

Вызов значения какого-либо параметра задается переменной
{{settings.переменная_необходимого_параметра}}

Первоначально вызов возможен только из шаблонов, но если к .js или .css файлу добавить .liquid (Пример: style.css.liquid) в них так же можно будет вызывать нужные переменные.

Общепринятый стиль верстки настроек темы

В целом вы можете довольно широко менять вид "Настроек темы", однако лучше придерживаться единого стиля.

1. Каждый подраздел настроек заключается в <fieldset>

2. Название подраздела и параметров должно быть очевидным. Например
<legend>Цвета</legend>

3. Параметры задаются через <input>

4. Подраздел настроек формируется в таблице.

Пример:

<fieldset>
  <legend>Цвета</legend>
  <table>
    <tr>
      <td><label for="text_color">Обычный текст</label></td>
      <td><input name="text_color" class="color" id="text_color" value="#505050" /></td>
    </tr>
    <tr>
      <td><label for="accent_color">Выделенный текст</label></td>
      <td><input name="accent_color" class="color" id="accent_color" value="#000000" /></td>
    </tr>
  </table>
</fieldset>

Где Цвета- название подраздела, Обычный текст и Выделенный текст- названия параметров, а text_color и accent_color их переменные.

Примеры использования

1. Цвет элемента:

<tr>
      <td><label for="text_color">Обычный текст</label></td>
      <td><input name="text_color" class="color" id="text_color" value="#505050" /></td>
</tr>

2. Загрузка файла(Например логотипа):

<tr>
        <th><label for="loaded_logo">Загрузить свой файл</label></th>
        <td><input name="loaded_logo.png" data-max-width="300" id="loaded_logo_image" type="file" data-max-height="75" /></td>
</tr>

data-max-width="300" и data-max-height="75" отвечают, за максимальный размер без авто-ресайза.

3. Выбор вариантов параметра из выпадающего селектора:

<tr>
      <td><label for="regular_font">Обычный текст</label></td>
      <td>
        <select name="regular_font" class="font" id="regular_font">
<option selected value="'DejaVu Sans', Tahoma, Verdana, sans-serif"></option>
        </select>
      </td>
    </tr>

4. Чек-бокс:

<tr>
      <td><label for="use_logo_image">Использовать логотип?</label></td>
      <td><input name="use_logo_image" id="use_logo_image" value="1" type="checkbox" /></td>
</tr>