Создание шаблона для InstantCMS 1.X

Внимание! Это руководство по созданию шаблона для InstantCMS 1.X. Руководство по шаблонам для InstantCMS2 находится тут

Часть 1. Делаем верстку

Основной файл шаблона в InstantCMS представляет из себя один php-файл, в котором размечены позиции для модулей, основного тела, названия сайта и других функциональных частей страницы.

1. Чтобы создать новый шаблон, сначала необходимо создать для него папку внутри директории "templates".

Для примера назовем ее "mytemplate". Система сама обнаружит появление новой папки и шаблон станет доступен для выбора из панели управления. Внутри папки "mytemplate" так же можно создать папки для картинок, js скриптов и css.

2. На следующем этапе создается файл "template.php" в папке "mytemplate". После создания папок и файлов получаем следующую структуру:

3. Теперь дело за самим дизайном. Открываем файл "template.php" и верстаем в нем нужную html-страницу. При этом все картинки складываем в папку "mytemplate/images", а стили в файл "mytemplate/css/styles.css". Естесственно, что страница должна представлять из себя лишь скелет (шапка, колонки, подвал) и не содержать никакого контента (текста). Пример верстки см. на рисунке:

4. Настало время для рутинной части работы - создания css-классов. InstantCMS использует одни и те же названия классов и стилей в каждом шаблоне. Например, для вывода заголовков всегда используется класс "con_heading" и т.д. Ваша задача состоит в том, чтобы создать классы со стандартными названиями и нужным дизайном. Здесь можно взять готовый шаблон и действовать по образцу.

Удобнее всего смотреть на названия классов в браузере. Т.е. открываем сайт с шаблоном по-умолчанию, смотрим как называются стили (заголовков, ссылок, таблиц и всего необходимого) и делаем такие же для своего шаблона.

Мы рекомендуем для этой цели использовать браузер Mozilla Firefox с плагином Firebug.

5. После того как страница готова, необходимо проверить правильность указания путей к css-таблице и картинкам. Все пути обязательно должны быть абсолютными. Т.е., путь к css-файлу должен выглядеть как:

/templates/mytemplate/css/styles.css

А пути ко всем картинкам должны выглядеть на подобии:

/templates/mytemplate/images/abc123.jpg

Удобнее всего воспользоваться автозаменой ("images/" заменить на "/templates/mytemplate/images/"). После всех этих действий сохраните свой шаблон и попробуйте применить его на сайте (Панель управления - Настройки - Шаблон). Если все было сделано верно, вы должны увидеть ваш дизайн, но без какого-либо содержимого.

Страницы: 1 2