My bro

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

Дата: 08.01.2014
Автор: Сергей
Источник: bulallab.ru

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

 

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

 

<?xml version="1.0" encoding="UTF-8"?>
<info>
	<name> Simple</name>
	<description>Тема в серых тонах</description>
	<author>Булат</author>
	<site>http://bulatlab.ru</site>
	<version>1.0</version>
</info>

      

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

 

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

      

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

      

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

 

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

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

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

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

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

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

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

 

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

 

      

       Текст html-кода

 

<!DOCTYPE html> 
<html>
<head> 
   <meta http-equiv="content-type" content="text/html; charset=Windows-1251"/> 	
   <link rel="stylesheet" type="text/css" href="default2.css" media="screen"/>
</head> 
<body>
   <!-- основной контейнер --> 
   <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> 
</body>
</html>

     

 И соответствующий файл стиля 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 содержатся соответственно рисунки фона для страницы, шапки сайта, обрамления для хлебных крошек и подвала, обрамления для основной части сайта. Скачать их при необходимости можно отсюда.

      

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

До встречи!

 

Оценить эту статью:   
Просмотров: 706
Комментариев: 0
Оценка: (1)


Добавить комментарий
Поделитесь этой страничкой в социальных сетях