Размещаем сайдбар слева

По мотивам этого топика и многих других.
Если стоит задача расположить сайдбар слева на всем сайте, то все решается через css.

А что если нужно разместить сайдбар слева не на всем сайте, а на определенных экшенах/эвентах?
Изучив шаблон Synio, сделал вывод что переменная sidebarPosition задумывалась именно для этого. И судя по названиям присваиваемых классов это предполагалось для страниц профиля:
В файле header.tpl
<div id="content" role="main" {if $sidebarPosition == 'left'}class="content-profile"{/if}...>

В файле sidebar.tpl
<aside id="sidebar" {if $sidebarPosition == 'left'}class="sidebar-profile"{/if}>

Классы #content.content-profile и #sidebar.sidebar-profile появляются в профиле (даже на этом сайте), но в CSS для них ничего нет. Это актуально для всех шаблонов, базирующихся на Synio.

Соответственно, чтобы задействовать эту задумку автора Synio, нужно:
1. Прописать в grid.css
#content 	         { min-height: 1px; margin-right: 295px; background: #fff; position: relative; }
#content.content-profile { margin-left: 295px; margin-right: 0; } // ДОБАВЛЕННАЯ СТРОКА
#sidebar	         { float: right; width: 240px; }
#sidebar.sidebar-profile { float: left; } // ДОБАВЛЕННАЯ СТРОКА

2. В нужных шаблонах сверху прописать
{assign var="sidebarPosition" value='left'}

Важно: По умолчанию в Synio эта строка уже есть в шаблонах ActionProfile, ActionSettings и ActionTalk (другими словами — для станиц профиля). Поэтому, если вы хотите сайдбар слева для чего-то другого, то здесь эти строки нужно закомментировать и добавить их в нужные вам шаблоны.

… не пойму почему эта рекламка ниже присобачилась именно к моему топику?
Заработать в интернете проще простого! Просто скачайте форекс приложение.

8 комментариев

avatar
не пойму почему эта рекламка ниже присобачилась именно к моему топику?
монетизация…
  • ort
  • +3
avatar
она началась именно с этого топика? :)
avatar
Думаю многим были бы интересны подробности: где можно купить? :)
avatar
avatar
Спасибо, но я имел ввиду не плагин купить, а сами ссылки с этого сайта)
avatar
sorry
avatar
В шаблоне «Developer» достаточно в нужных экшенах первой строчкой прописать:
{assign var="sidebarPosition" value='left'}


Думаю, «Synio» делали из «Developer'a», там сайдбар профиля слева, а в «Synio» просто пооставались «хвосты».
avatar
Для Bootstrap-based шаблонов нашел более изящное решение.
Например для шаблонаdeveloper-kit by vOFFka
В файле header.tpl
<div id="content-wrapper" class="content col-md-8{if $sidebarPosition == 'left'} col-md-push-4{/if}" ...>

В файле sidebar.tpl
<aside class="sidebar col-md-4{if $sidebarPosition == 'left'} col-md-pull-8{/if}">
Практически данные классы меняют местами колонки.
Соответственно, из CSS можно убрать незадействованные классы (content-right, content-profile и т.п.).

Также для удобства настроек я сделал следующее:
— убрал со всех шаблонов переменную {assign var=«sidebarPosition» value='left'}
— в конфиг добавил
$config['sidebar_left'] = array('profile', 'settings', 'talk'); // экшены, на которых сайдбар должен располагаться слева
— в header.tpl и sidebar.tpl добавил
{* Список Actions (экшенов), на которых сайдбар будет слева *}
{if (in_array(Router::GetAction(), Config::Get('sidebar_left')))}
    {$sidebarPosition = 'left'}
{/if}
Решение менее гибкое (экшены целиком), но удобное.

Обратил внимание, что в большинстве шаблонов есть места, где сайдбар не загружается в шаблоне. Например:
— при $noSidebar='true'
— когда sidebar.tpl инклудится взависимости от $sidebarPosition сверху или снизу контента.

Это не позволяет манипулировать сайдбаром с помощью js, например в плагине showhidesidebar.
На мой взгляд целеообразнее использовать CSS:
#wrapper.no-sidebar #content-wrapper { left: 0; width: 100%; }
#wrapper.no-sidebar #sidebar         { display: none; }


P.S.: Хотел добавить в топик, но нет возможности редактирования. Наверное, потому что в нем постовой…
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.