Как подключить дизайн сайта на 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, необходимо снова перейти в управление элементами и открыть наш шаблон для главной.

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

  1. Между тегом <head> </head> пропишите путь к шаблону, например:
    <base href=””>.
  2. Замените пути к файлам всех строчек, которые имеют значение «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 для загрузки.

Демо / Скачать

Write a comment

  • Required fields are marked with *.

If you have trouble reading the code, click on the code itself to generate a new random code.