Тема оформления — различия между версиями

Материал из Школьный портал: справочника
Перейти к: навигация, поиск
(CSS =)
(Внешний вид меню)
Строка 27: Строка 27:
  
 
Благодаря столь простой структуре становится возможным в короткие сроки и без особых усилий и знаний адаптировать существующий шаблон для Школьного портала.
 
Благодаря столь простой структуре становится возможным в короткие сроки и без особых усилий и знаний адаптировать существующий шаблон для Школьного портала.
 +
 +
== Как сделать свою тему ==
 +
 +
Перед тем, как начать делать свою тему с нуля, попробуйте начать с изменения существующей. Скачайте одну из предустановленных тем, что нравится вам больше, распакуйте, переименуйте папку с ней, откройте нужный файл в текстовом редакторе, либо картинки в графическом, затем запакуйте в архив и установите. Большинство пользователей так и поступают.
 +
 +
Экономьте время: не оформляйте те модули, которыми вы не собираетесь пользоваться.
 +
 +
В качестве первого эксперимента предлагаем сменить «шапку» сайта.

Версия 13:44, 24 февраля 2011

Тема оформления сайта — набор файлов, на основе которых CMS отображает страницы школьного или личного сайта.

Чтобы максимально наглядно представлять себе, как устроены темы оформления, рассматривайте тему sp-default, она содержит в себе больше всего комментариев, все опциональные файлы и из неё берутся шаблоны блоков для других тем, когда в самих темах они не определены.

Есть 3 типа файлов:

  1. HTML-шаблоны: *.html
  2. (опционально) CSS: style.css
  3. (опционально) Настройки иерархического меню: menu-settings.js

Теперь о каждом файле по-порядку.

HTML-шаблоны

  • index.html — единственный жизненно необходимый для работоспособности темы глобальный шаблон для каждой страницы. Он должен содержать хотябы одну переменную из списка: $top, $left, $center, $right. При выводе страницы сайта компоненты выводятся последовательно согласно порядку сортировки в одноимённые блоки. Именно их представляют вышеназванные переменные. Их можно разместить в макетной таблице или в DIV-ах с разными id для DIV-ной вёрстки. Переменная $HEAD должна располагаться в теге <head>, она нужна для вывода служебных строк (например, вставка JavaScript-кода для иерархического меню, ключевые слова конкретной страницы и т. п.) Другие переменные: $sitedate — текущая дата, $ou_name — название образовательного учреждения, $ou_num — номер образовательного учреждения.
  • остальные *.htmlTODO: подробно о каждом шаблоне и допустмых переменных. Каждый шаблон представляет собой блок HTML-кода с переменными. Начало имени файла совпадает с именем компонента CMS.

CSS

Файл style.css — обыкновенный файл с CSS-стилями. Всё то, что вы наверстали в HTML-шаблонах, оформляется в этом файле.

Имя файла должно быть именно таких. В разработке функциональность, которая потребует от темы оформления именно такого имени файла со стилями.

Изображения можно располагать произвольно либо рядом, как в теме xp, либо в подпапке. В этом нет никакие правил, делайте как вам удобно.

Внешний вид меню

Файл menu-settings.js хранит настройки внешнего вида иерархического меню. Откройте его текстовым редактором. Он прокомментирован. Если ваше меню плоское (ссылки не собраны в папки), этот файл не используется. Его наличие не требуется даже в том случае, если меню у вас иерархическое; в этом случае меню будет выглядеть «ненастроенным», нейтральным, но работать будет. Сравните содержимое таких файлов в других предустановленных темах оформления. Отличия там буквально в цветах, шрифтах, размерах и т. п.

Благодаря столь простой структуре становится возможным в короткие сроки и без особых усилий и знаний адаптировать существующий шаблон для Школьного портала.

Как сделать свою тему

Перед тем, как начать делать свою тему с нуля, попробуйте начать с изменения существующей. Скачайте одну из предустановленных тем, что нравится вам больше, распакуйте, переименуйте папку с ней, откройте нужный файл в текстовом редакторе, либо картинки в графическом, затем запакуйте в архив и установите. Большинство пользователей так и поступают.

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

В качестве первого эксперимента предлагаем сменить «шапку» сайта.