Создаём шаблон для LinkorCMS. Часть 3, Первые шаги.

В предыдущей статье мы немного разобрались в тех файлах, которые составляю основу шаблона (темы) для LinkorCMS. Эта информация поможет при модификации шаблонов необходимых вам модулей и блоков.

Теперь ставим перед собой задачу создать новую тему для LinkorCMS. При этом за основу можно взять идущую в комплекте с CMS стандартную тему IgrimTheme. Для этого создаём копию тему IgrimTheme и переименовываем её, например, как это сделал я в Simple. Далее, открываем находящийся внутри файл info.xml любым удобным редактором и изменяем теги в нём следующим образом:

<!--?xml version="1.0" encoding="UTF-8"?-->

   Simple
   Тема в серых тонах.
   BulatLab
   http://bulatlab.ru
   1.0

В данном файле в тегах указывается имя темы (в теге name), краткое описание (в теге description) и другие данные, которые будут отображаться в админпанели CMS (авторство, сайт автора, версия). Вы можете указать свои данные по желанию. После изменения сохраняем файл и перезапускаем локальный сервер. Сразу договоримся, что все работы ведутся на локальном сервере типа Денвера.

Следующий шаг, который нужно сделать, это из админпанели управления CMS установить в качестве текущего наш новый шаблон. Для этого в админпанели идём в меню « Система» à «Расширения» à «Шаблоны», и в левом боковом меню выбираем пункт «Установить». В появившейся табличке ставим галочку на нашей новой теме, которая теперь была определена системой под названием Simple, и устанавливаем её, нажав кнопку «Установить».

После этого идём в меню «Сайт» à «Настройки сайта»и в разделе «Шаблон сайта» выбираем нашу вновь созданную тему «Simple» и сохраняем изменения. Теперь, хоть наша тема пока и не обладает почти никакими особенностями, но мы имеем возможность наблюдать все изменения, которые мы будем производить в ней.

Далее, с чем необходимо определиться, так это с тем, каким будет наш новый шаблон (новая тема). Здесь всё, конечно же, зависит от фантазии и дизайнерского решения. Но в качестве примера я решил, что новая тема будет иметь следующие основные особенности:

- Общая цветовая схема – серо-голубая

- Собственный логотип, уменьшенный по высоте до размера в100 пикселей

- Верхнее меню расположено в границах логотипа с правой стороны страницы

- Сайт по умолчанию будет двухколоночный (слева - блоки, а справа - модули)

- В подвале сайта продублировать верхнее меню и указать авторские права

- Блоки и модули сделать с закругленными краями, градиентом и тенями.

- … и не забывать о кроссбраузерности :-)

За основу был взять шаблон-основа html-странички, примерный внешний вид которой представлен на рисунке. Именно в рамках этого дизайна будем размещать блоки и модули системы LinkorCMS, немного модифицируя их под свои нужды и вписывая в цветовую гамму предложенной странички.

Текст html-кода

   
<!-- основной контейнер -->
<div class="my_container">
  <!-- шапка сайта -->
  <div class="my_header"> </div>
  <!-- хлебные кпрошки -->
  <div class="my_holder_top"> </div>
  <!-- основная часть сайта -->
  <div class="my_holder">
     <!-- левая часть для блоков-->
     <div class="my_left"> </div>
     <!-- правая часть для модулей-->
     <div class="my_right"> </div>
  </div>
  <!-- подвал сайта -->
  <div class="my_footer"> </div>
</div>

И соответствующий файл стиля default2.css

* {margin: 0; padding: 0;}
body {	background: #FFF url (body.jpg) repeat-y center top;}
/* страничка */
.my_container {
margin: 0 auto; 
width: 980px;}
/* шапка */
.my_header {	
background: url(3.jpg) no-repeat;	
height: 100px;}
/* хлебные крошки */
.my_holder_top {
background: url(2.jpg) no-repeat;	
height: 28px; 
padding:10px 0px 0px 30px;}
 /* основная часть */
.my_holder {
background: url(4.jpg) repeat-y;
padding: 0 24px;
min-height: 840px;}
/* левая часть */
.my_left{
width:200px;
float:left;}
/* правая часть */
.my_right{
width:732px;
float:right;}
 /* подвал */
.my_footer { 
      	background: url(2.jpg) no-repeat;
height: 28px;
padding:10px 0px 0px 30px;
   	background-position: left bottom;}

В файлах body.jpg, 3.jpg, 2.jpg, 4.jpg содержатся соответственно рисунки фона для страницы, шапки сайта, обрамления для хлебных крошек и подвала, обрамления для основной части сайта. Скачать их при необходимости можно отсюда.

На этом пока остановимся. В следующей части будем работать с файлом стилей и некоторыми шаблонами, и начнём непосредственно менять дизайн некоторых блоков.

До встречи!

2002

Создаём шаблон для LinkorCMS. Часть 3.Первые шаги.