Как подключить дизайн сайта на MODx

Архив шаблона должен включать в себя следующие файлы:

Default
Index.html — страница, предоставленная разработчиками, на которой демонстрируется работа шаблона на различных мобильных устройствах и ПК. Данная страница нам не потребуется.

В свою очередь папка Default включает в себя папку с CSS-элементами, js, home.html.

CSS — изображения и стили, которые используются в текущем шаблоне сайта на MODx.
Js — элементы jquery + элементы (скрипты) для отображения на главной странице слайдера.
home.html – является основным файлом в этой папке.

Шаблоны вашего сайта на MODx хранятся в директории /assest/templates. В данную папку скопируйте файлы приобретенного HTML-шаблона.

Примечание. Для каждого шаблона создается своя папка, в которую и копируются файлы. Допустим, в данном случае мы назовем папку «Shablon».

Настраиваем дизайн главной страницы сайта

Откройте административную панель сайта (http://мой_сайт.ru/manager). Перейдите в раздел «Элементы» — «Управление элементами» — «Шаблоны». Откройте страницу «Minimal Template».

Где находится шаблон сайта MODx

Рис. 1

Из данного шаблона мы будем формировать страницу, а именно, главную страницу сайта (home).

Форма состоит из следующих полей:

Имя шаблона – как мы уже сказали, из этого шаблона мы будем формировать главную страницу сайта — поэтому имя шаблона будет «Главная» (или Home).
Описание — небольшое описание шаблона, которое будет отображаться только здесь и в общем списке шаблонов.
Существующие категории — категории уже созданных шаблонов.
Новая категория — если ни одна категория из списка выше не подходит, то можно задать новую группу для данного шаблона.
Код шаблона HTML — добавьте в данное поле код страницы home.html, которая находится у нас в директории assets/templates/shablon/home.html.

Где находится Minimal Template MODx

Рис. 2

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

Для того чтобы подключить стили и скрипты шаблона MODx, необходимо снова перейти в управление элементами и открыть наш шаблон для главной.

Как настроить скрипты и стили:

Между тегом <head> </head> пропишите путь к шаблону, например:
<base href=””>.
Замените пути к файлам всех строчек, которые имеют значение «src».
Например, у нас прописан путь «<img src=”css/images/cart-uim.png” alt=”” />», тогда перед «css/images/cart-uim.png» необходимо добавить «assets/templates/shablon/».

Примечание. «Shablon» – это условное наименование шаблона, у вас будет свое название шаблона.

После этого нажмите на кнопку "Сохранить".

Варианты готовых шаблонов для CMS MODx

Помимо HTML-шаблона, на сайт можно также установить и готовый шаблон, настроенный под определенную CMS, в нашем случае — MODx.

"Booom!" — шаблон для MODX — красочный и привлекательный шаблон, который подойдет для проекта или компании, ориентированных на услуги по воспитанию детей или развлечения для детей. Шаблон построен на Bootstrap 3.0. Простое управление шаблоном. Демо / Скачать
"Cube" — интересный шаблон для ночного клуба или проекта, который освещает все грядущие развлекательные события в городе. Шаблон разработан на Twitter Bootstrap Grid System. Респонсивный шаблон. Использование HTML5 и CSS3, гибкая настройка, события, медиа, галерея, блог, AjaxForm. Демо / Скачать
"Light" — Целевая страница для компании в сфере бизнес-услуг. Многофункциональный шаблон MODX. Поддержка Wayfinder и Formlt элементов. Шрифты PT Serif и PT Sans (шрифты Google). Демо / Скачать
"Other" — шаблон для фотостудии. Идеально подходит для демонстрации творческих работ. Основное место на сайте уделяется изображениям и галереям. Использование AJAX для загрузки. Демо / Скачать