Делаем собственный дизайн для CMS

Как бы не был прекрасен "внутренний мир" сайта, а встречают, все равно, "по одежке", так что рано или поздно, но мы приходим к созданию собственного дизайна.

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

Итак, давайте рассмотрим структуру шаблонов. Шаблоны находятся в каталоге /skins/. Каждый подкаталог представляет собой отдельный дизайн (скин, шкуру и т.д. - выбирайте термин на свое усмотрение). Выбрать дизайн можно в настройках сайта из выпадающего меню. Внутри подкаталога с дизайном находятся подкаталоги с шаблонами отдельных модулей, каталоги со скриптами js, файлами css, страницами ошибок, а так же, так называемые, сборочные шаблоны.

Сборочные - название корявое, но достаточно точно отражающее назначение и принцип действия. Каждый модуль, в процессе работы выдает некий результат. В конце все эти результаты собираются в кучку и раскладываются в сборочном шаблоне. Сборочных шаблонов в дизайне может быть неограниченное количество. В базовом шаблоне их два - default.tpl и blank.tpl. Причем, последний служит не для дизайна, а для вывода структуры без оформления (xml, js и тому подобного). Если в дизайне не найден указанный в настройках узла сборочный шаблон, то будет произведена попытка подключить шаблон default.tpl, в затем default.tpl и blank.tpl из базового дизайна.

В каталоге css движок ищет файлы стилей. Причем, название файла он берет в качестве атрибута media. То есть файл all.css будет автоматически подключен к дизайну как

<link rel="stylesheet" type="text/css" href="css/all.css" media="all" />

а файл screen.css, соответственно

<link rel="stylesheet" type="text/css" href="css/screen.css" media="screen" />

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

Внутри каталогов шаблонов модулей структура аналогичная: автоматически просматриваются каталоги css и js.

Итак, пора бы уже от рассуждений перейти к активным действиям. Идем в каталог /skins и создаем там каталог "my_design". После этого идем в настройки сайта и переключаем дизайн с default на my_design. После нажатия кнопки "сохранить", произойдет переключение на выбранный дизайн и... ничего не меняется. Так происходит потому, что что при отсутствии в текущем скине каталога "css", файлы стилей заимствуются из скина default.

Теперь, вооружившись кувалдой и напильником, можно придавать дизайну желаемый облик. Создаем каталог /skins/my_design/css, а в нем файл all.css. После чего начинаем его редактировать и смотрим что получится.

Возникает вопрос: а почему бы не отредактировать базовый шаблон? По одной простой причине - он постоянно обновляется и развивается вместе с системой. Так что при очередном обновлении либо все Ваши изменения будут перезаписаны, либо придется отказаться от обновлений, либо придется вручную контролировать где и какие были сделаны изменения. Не очень удобно, согласитесь.

Итак. Неужели все дизайностроение заключается только в правке css? Как-то бледно... Конечно нет. Если Ваш дизайн достаточно сложен и требует собственного шаблона, то его имеет смысл сделать. Например, если Вы хотите изменить шаблон /skins/default/module/some.tpl, то для этого достаточно создать свою версию шаблона по адресу /skins/my_design/module/some.tpl. Вот и все.

Теперь абзац для самых продвинутых:) Шаблоны написаны с использованием языка smarty. Это такая смесь html и "программирования для самых маленьких". Если Вы чувствуете себя достаточно уверенно для написания собственного шаблона, то можете ознакомиться с руководством по адресу http://smarty.net, в противном случае, лучше взять за основу шаблон из базового дизайна и вносить исправления в его копию. Вообще-то это стоит сделать в любом случае, так как жизнь коротка и ее есть куда потратить кроме как на написание собственного шаблона;)

Еще одна ремарка: в своем дизайне имеет смысл создать сборочные шаблоны default.tpl и blank.tpl даже в том случае, если они будут являться копиями этих шаблонов из базового дизайна, так как они потребуются Вам при настройке структуры сайта.