Второй sidebar (слева)

Итак, появилась необходимость сделать второй сайдбар (слева) с возможностью указывать в common/config/widgets.php что и где в нем показывать. Возможно, у кого-то уже оскомина от этой темы (и на Альто уже поднимался этот вопрос), но я всё же опишу здесь, как я это реализовал. Надеюсь, кто-то укажет на ошибки.

Внимание: данная статья НЕ РУКОВОДСТВО.

Сначала для Synio

1. Для начала, нужно создать позицию для нового сайдбара.
Открываем файл header.tpl и сразу после:

<div id="wrapper" class="{if $noSidebar}no-sidebar{/if}{hook run='wrapper_class'}">

вставляем:

{include file='leftbar.tpl'}

2. Далее, создаем файл шаблона отвечающего за вывод блоков в новом сайдбаре указанных в widgets.php. Для этого, дублируем файл в sidebar.tpl, переименовываем его в leftbar.tpl и меняем всё его содержимое на этот код:

<aside id="leftbar">
    {wgroup group='left'}
</aside>

Т.е. изменили значение id и right поменяли на left.

3. Далее прописываем css (можно в synio/themes/default/style.css) для нашего сайдбара:

#leftbar { float: left; width: 25% }

Идем в css/grid.css и изменяем ширину контента с

#content-wrapper { float: left; width: 100%; margin-right: -295px; }

на

#content-wrapper { float: left; width: 75%; margin-right: -295px; }

— со стилями, так или иначе, придется поиграться, изменяя в основном ширину контента и сайдбаров.

4. Теперь, для того, чтобы вывести в нашем сайдбаре блоки (виджеты), нам нужно, либо создать свой блок (виджет) с нужным содержимым и вписать его в widgets.php указав новую позицию ('wgroup' => 'left'):

$config['widgets'][] = array(
    'name' => 'widgets/my_widget.tpl',
    'wgroup' => 'left',
);

— либо прописать новое значение ('left') в уже существующих виджетах, которые мы хотим видеть в нашем новом сайдбаре.

Developer-kit для AltoCMS 1.0

С «developer-kit» (а делалось это, в-первую очередь, для него) добавление «левого» сайдбара выглядит немного иначе. В header.tpl после

<div class="row-fluid">
    {if !$noSidebar && $sidebarPosition == 'left'}
        {include file='sidebar.tpl'}
    {/if}

— добавляем:

{include file='leftbar.tpl'}

— создаем в корне скина шаблон leftbar.tpl с содержимым:

<aside class="span4">
    {wgroup group='left'}
</aside>

— настраиваем css (для указанного шаблона основные стили прописаны в developer-kit/bootstrap/css/) и проделываем то, что описано выше в пункте «4».

Нюансов — целый вагон и маленькая тележка, поэтому описывать все нет смысла. Все решается «по месту» и в зависимости от ваших требований. Как-то так... Прошу прощения за многа букаф. Надеюсь, не наделал ошибок в описании...

P.S.: если наличие левой колонки выглядит несколько напряжно при просмотре в мобильных устройствах, то её можно и вовсе скрыть (отключить), добавив следующий код в любой css файл шаблона (условно поставим ограничение на 600px):

@media (max-width: 600px) {
  #leftbar {display: none;} /* скрываем левую колонку */
}

Прямой эфир слева (Synio)


Прямой эфир слева (developer-kit)


«Свой» виджет (developer-kit)