Всем привет! Читали статью про новую сборку? Хотите сменить скин сайта, но не совсем поняли как это сделать? Сегодня я подробно расскажу как это сделать.
После того как вы развернули нашу сборку, магазин выглядит так:
Простой скин, а нам хочется, чтобы оформление отличалось от стандартного. Для этого надо всего лишь установить новую тему bootstrap. Лезем в интернеты и ищем любую понравившуюся нам тему (главное условие — bootstrap версии 3+). А далее делаем все по следующей инструкции:
1) Укажем название нашего скина. Для этого переходим в настройки системы, меняем раздел на modxsmarty, находим переменную modxSmarty.pre_template и меняем значение на skin/имя_вашей_папки_с_шаблоном — в моем случае это skins/StonnieAnnie.
Теперь Smarty учитывает директорию нашего скина и при обращении к странице, ищет указанный шаблон в нашей директории. В случае, если в нашей директории файл шаблона не найден, Smarty ищет этот шаблон в директории основного скина сайта. Так как пока еще моей папки скина нет, для сайта еще ничего не поменялось.
2) Создадим Смарти-скин. Для этого переходим в Smarty Templates и создадим там свою папку скина (напомню, что в моем случае это skins/StonnieAnnie). В этой папке создаем файл layout.tpl.
Все основные шаблоны страниц основного скина так или иначе расширяют layout.tpl, так что мы имеем возможность вклиниться в шаблонизацию всего сайта. Т.к. данный файл пустой, перейдя на сайт мы увидим только белую страницу. Это логично: нет кода в шаблоне — нечего и выводить. Давайте исправим это, прописав {extends "[main]layout.tpl"}.
Таким образом мы расширим базовый шаблон layout.tpl из основного скина сайта ([main] указывает Смарти на то, что надо искать файл именно в директории главного скина (такое название ему задано в плагине modxSmarty)). Теперь на странице сайта все вернулось к первоначальному виду. То есть у нас уже свой переопределяющий скин, но мы пока ничего не стали менять в общей шаблонизации.
3) А теперь самое главное — залить новую bootstrap-тему и задать ее сайту. Заходим в Public Templates. В папке skins создаем папку для своего скина, а в ней еще одну для будущих файлов шаблона bootstrap.
Заливаем файлы из скачанного bootstrap-шаблона.
Всё, файлы темы залили. Осталось только задать их сайту. Открываем файл index.html из папки bootstrap. Рамкой выделены нужные нам стили и скрипты. Они нужны нам для переопределения bootstrap-блока из базового шаблона.
Этот блок можно найти в основном шаблоне layout.tpl главного скина сайта. Он располагается в Smarty Templates->shopmodx-> layout.tpl. В шаблоне находим блок bootstrap, копируем его в шаблон layout.tpl нашего скина.
В блоке удаляем все старые данные bootstrap и прописываем новые из добавляемой темы. Не забываем сменить пути до файлов. Особое внимание обратите на переменные $template_url. Эта переменная содержит путь до публичной папки основного скина, а путь до публичной папки нашего скина содержится в переменной $pre_template_url.
Так выглядит переопределенный блок bootstrap:
?
Сохраняем изменения, обновляем сайт и переходим на него. Теперь наш сайт выглядит следующим образом:
Хммм, мне не нравится высота header. Создаем свой файл style.css.
В нем прописываем нужные нам стили.
Остается только его подключить. Для этого переопределяем блок {styles}.
Сохраняем изменения, обновляем сайт и переходим на него. Как видно, минимальная высота header изменилась.
Вообще, при желании можно многое поменять, но перед нами стояла задача смены дефолтного скина сайта на какой-нибудь другой. Мы лишь немного подправили настройки стиля bootstrap.
З.Ы. Данный скин можно увидеть в новой сборке ShopModxBox-2.5.1