Тема оформления
Школьный портал поставляется с несколькими предустановленными темами оформления, которые можно использовать для изменения внешнего вида сайта школы, личного сайта учителя или ученика.
Темы устроены очень просто: это набор html-файлов, на основе которых CMS отображает страницы сайта.
Чтобы наглядно представить себе, как устроены темы оформления, рассматривайте тему sp-default. Эта тема содержит в html-тексте комментарии и весь набор необходимых html-файлов. В других темах некоторые html-файлы могут отсутствовать. В этом случае портал использует шаблоны из темы sp-default.
Есть 3 типа файлов:
- HTML-шаблоны: *.html
- (опционально) CSS: style.css
- (опционально) Настройки иерархического меню: menu-settings.js
Теперь о каждом файле по-порядку.
HTML-шаблоны
- index.html — единственный жизненно необходимый для работоспособности темы глобальный шаблон для каждой страницы. Он должен содержать хотябы одну переменную из списка:
$top, $left, $center, $right. При выводе страницы сайта компоненты выводятся последовательно согласно порядку сортировки в одноимённые блоки. Именно их представляют вышеназванные переменные. Их можно разместить в макетной таблице или в DIV-ах с разными id для DIV-ной вёрстки. Переменная$HEADдолжна располагаться в теге<head>, она нужна для вывода служебных строк (например, вставка JavaScript-кода для иерархического меню, ключевые слова конкретной страницы и т. п.) Другие переменные:$sitedate— текущая дата,$ou_name— название образовательного учреждения,$ou_num— номер образовательного учреждения. - остальные файлы *.html Каждый шаблон представляет собой блок HTML-кода с переменными. Начало имени файла совпадает с именем компонента CMS. О назначении каждого блока и допустимых переменных в нём смотрите в архиве с шаблоном темы.
CSS
Файл style.css — обыкновенный файл с CSS-стилями. Всё то, что вы наверстали в HTML-шаблонах, оформляется в этом файле.
Имя файла должно быть строго таким. В разработке функциональность, которая потребует от тем оформления именно этого имени файла со стилями.
Изображения можно располагать произвольно либо рядом, как в теме xp, либо в подпапке. В этом нет никаких правил, делайте как вам удобно.
Внешний вид меню
Файл menu-settings.js хранит настройки внешнего вида иерархического меню. Откройте его текстовым редактором. Он прокомментирован. Если ваше меню плоское (ссылки не собраны в папки), этот файл не используется. Его наличие не требуется даже в том случае, если меню у вас иерархическое; в этом случае меню будет выглядеть «ненастроенным», нейтральным, но работать будет. Сравните содержимое таких файлов в других предустановленных темах оформления. Отличия там буквально в цветах, шрифтах, размерах и т. п.
Благодаря столь простой структуре становится возможным в короткие сроки и без особых усилий и знаний адаптировать существующий шаблон для Школьного портала.
Как создать свою тему
Перед тем, как начать делать свою тему с нуля, попробуйте начать с изменения существующей. Большинство пользователей поступают именно так.
Скачайте одну из предустановленных тем, которая ближе всего к задуманному. Распакуйте, переименуйте папку с темой, откройте нужные файлы в текстовом редакторе, картинки в графическом редакторе, и редактируйте, сохраняя переменные (они начинаются со знака доллара). затем запакуйте в архив (запаковывать надо саму папку) и установите (меню «Сайт → Темы оформления → Установить…», затем в списке тем нажмите на ссылку «Применить» напротив своей темы).
Экономьте время: не оформляйте те модули, которыми вы не собираетесь пользоваться.
Если вы решились адаптировать существующий (непортальный) шаблон для портала, в любом случае рекомендуем сначала изучить какой-нибудь портальный шаблон в качестве образца.
Портал не позволяет изменять коробочные темы оформления (для вашей темы оформления требуется имя, отличающееся от имён коробочных тем), чтобы при обновлении портала ваши темы оформления остались нетронутыми.
По этой же причине мы рекомендуем не ссылаться на картинки из коробочных тем, а брать их копии в свою тему. Мы иногда изменяем старые коробочные темы, чтобы, например, поддержать новый функционал, лаконичнее переверстать, оптимизировать или освежить, сделать современнее. Таким образом картинки могут измениться как незначительно, так и вовсе исчезнуть или приобрести новые имена.
Домашнее задание: создать тему на основе sp-default со своей собственной картинкой в «шапке».
Шаблон темы
Архив:
http://spcms.ru/theme-template.zip
содержит шаблон для создания темы оформления с нуля. Вёрстка либо отсутствет полностью, либо представлена в минимальном объёме. В каждом HTML-файле есть комментарии о назначении блока и каждой возможной переменной. Присутствует пример настройки иерархического меню и слегка начатый CSS-стиль в основном со сбросами.
