====== Интеграция своего дизайна для режима конструктора ======
Конструктор в Astra.CMS автоматически формирует итоговые шаблоны для сайта из **взаимозаменяемых** фрагментов для основных областей/блоков. Поэтому верстка и внедрение html кода и стилей имеет свои особенности и отличается от [[:integration:index|интеграции дизайна обычным способом]].

===== Каркасы (layouts) =====
Первая особенность состоит в том что для сайта уже заранее предусмотрено несколько вариантов каркасов, в которые на этапе сборки внедряются выбранные фрагменты. Доступно 8 готовых вариантов, достаточно {{:constructor:layout_rez_lr.zip|скачать}} один из них, чтобы увидеть базовые слои и стили.
  * Фиксированная ширина, левая колонка блоков;
  * Фиксированная ширина, правая колонка блоков;
  * Фиксированная ширина, левая и правая колонка блоков;
  * Фиксированная ширина, без боковых колонок;
  * Резиновая ширина, левая колонка блоков;
  * Резиновая ширина, правая колонка блоков;
  * Резиновая ширина, левая и правая колонка блоков;
  * Резиновая ширина, без боковых колонок.

===== Основные области =====
Ниже перечислены области сайта, которые подразумевают взаимозаменяемость, т.е. один вариант области можно заменить на другой без ущерба целостности верстки дизайна.

==== Шапка сайта ====
Физическое расположение файлов этой области - wizard_config/[mysiteid]/header/. 
  * header.tpl - файл шаблона.
  * header.css - файл стилей.
  * images - каталог с графическими файлами.
Эта область на уровне каркаса заключена в %%<div id="header"> ... </div>%% , поэтому имеет смысл делать классы стилей относительно #header. Для #header требуется обязательно указать свойство height.

<note tip>
Файлы preview.html и preview.css для исходных файлов генерируются автоматически для всех областей.
</note>

==== Подвал сайта ====
Физическое расположение файлов этой области - wizard_config/[mysiteid]/footer/. 
  * footer.tpl - файл шаблона.
  * footer.css - файл стилей.
  * images - каталог с графическими файлами.
Эта область на уровне каркаса заключена в %%<div id="footer"> ... </div>%% , поэтому имеет смысл делать классы стилей относительно #footer. Для #footer требуется обязательно указать свойство height.

==== Левая колонка блоков ====
Физическое расположение файлов этой области - wizard_config/[mysiteid]/sidebar/left/. 
  * sidebar.tpl - файл шаблона.
  * sidebar.css - файл стилей.
  * images - каталог с графическими файлами.
Эта область на уровне каркаса заключена в %%<div id="sl"> ... </div>%% , поэтому имеет смысл делать классы стилей относительно #sl. Для #sl требуется обязательно указать свойство width.


==== Обрамление левого блока ====
Физическое расположение файлов этой области - wizard_config/[mysiteid]/frame/left/. 
  * frame.tpl - файл шаблона.
  * frame.css - файл стилей.
  * images - каталог с графическими файлами.
Шаблон должен содержать специальные вставки [[#TITLE|TITLE]] и [[#CONTENT|CONTENT]].

==== Правая колонка блоков ====
Физическое расположение файлов этой области - wizard_config/[mysiteid]/sidebar/right/. 
  * sidebar.tpl - файл шаблона.
  * sidebar.css - файл стилей.
  * images - каталог с графическими файлами.
Эта область на уровне каркаса заключена в %%<div id="sr"> ... </div>%% , поэтому имеет смысл делать классы стилей относительно #sr. Для #sr требуется обязательно указать свойство width.

==== Обрамление правого блока ====
Физическое расположение файлов этой области - wizard_config/[mysiteid]/frame/right/. 
  * frame.tpl - файл шаблона.
  * frame.css - файл стилей.
  * images - каталог с графическими файлами.
Шаблон должен содержать специальные вставки [[#TITLE|TITLE]] и [[#CONTENT|CONTENT]].

==== Центральная область ====
Физическое расположение файлов этой области - wizard_config/[mysiteid]/content/. 
  * content.tpl - файл шаблона.
  * content.css - файл стилей.
  * images - каталог с графическими файлами.
Эта область на уровне каркаса заключена в %%<div id="content"> ... </div>%% , поэтому имеет смысл делать классы стилей относительно #content.
Шаблон должен содержать специальную вставку [[#CONTENT|CONTENT]].

==== Строка навигации (хлебные крошки) ====
Физическое расположение файлов этой области - wizard_config/[mysiteid]/navigation/. 
  * navigation.tpl - файл шаблона.
  * navigation.css - файл стилей.
  * images - каталог с графическими файлами.
В шаблоне используется [[:integration:objects#Строка навигации (хлебные крошки)|стандартный набор данных]] для этого объекта.

==== Нумератор страниц ====
Физическое расположение файлов этой области - wizard_config/[mysiteid]/pager/. 
  * pager.tpl - файл шаблона.
  * pager.css - файл стилей.
  * images - каталог с графическими файлами.
В шаблоне используется [[:integration:objects#Многостраничная навигация (нумератор страниц)|стандартный набор данных]] для этого объекта.

==== Блоки (для каждого типа) ====
Физическое расположение файлов для каждого из блоков - wizard_config/[mysiteid]/blocks/[blockid]. 
В шаблонах используются стандартные наборы данных для каждого из [[:blocks|типов блоков]].

===== Особенности верстки =====
Для достижения взаимозаменяемости, верстка каждой области делается максимально изолированной. А именно, отдельный tpl и css файл в котором все используемые стили действуют только в рамках этой области. Набор необходимых графических файлов так же обособлен.

Например, для шапки сайта все стили будут иметь вид:   
<code css>
#header .classname 
{
 … 
}
</code> 

Для центральной области:  
<code css>
#content .classname 
{ 
… 
}
</code>

Таким образом, каждая область (например шапка) будет состоять из своего tpl файла, своего css файла, и своей папки с картинками. Для выбранного варианта шапки физически это будет каталог wizard_config/[mysiteid]/header/.

Редактировать файлы tpl и css, а так же загружать используемые картинки можно через веб-редакторы админки для соответствующей области.

{{ :constructor:constructoruse.jpg?800 }}

===== Особенности языка шаблонов =====
В качестве языка шаблонов (tpl файлы) используется [[:smarty|Smarty]], такой же как при [[:integration:index|обычном способе интеграции]] дизайна. Кроме этого используются специальные вставки:

==== [IMAGESDIR] ====
Используется для указания пути к графическим файлам. Сами графические файлы загружаются либо с помощью веб-редактора, либо непосредственно в каталог wizard_config/[mysiteid]/header/images/ (для области шапки сайта).

<code html>
<img src="[IMAGESDIR]/logo.gif">
</code>

<note tip>
Можно использовать так же и {$system.imgdir} как в обычных шаблонах.
</note>

==== [BLOCKS_LEFT] ====
Используется только в шаблоне [[index#Левая колонка блоков|левой колонки блоков]] (закладка "Колонка"). На этапе сборки замещается на функцию [[:smarty:smarty6#leftblocks|leftblocks]], которая осуществляет вывод всех блоков с левым расположением.

==== [BLOCKS_RIGHT] ====
Аналогично для правой колонки блоков.

==== [TITLE] ====
Используется только в шаблонах обрамлений боковых блоков. На этапе сборки замещается на вывод переменной с названием блока.

==== [CONTENT] ====
Используется:
  - В шаблонах обрамлений боковых блоков. На этапе сборки замещается на вывод переменной с содержимым блока.
  - В шаблоне [[index#Центральная (основная) область|центральной области]]. Подразумевает область основног контента и позволяет добавить для него специальное обрамление.

===== Особенности оформления CSS =====
Про обособленность стилей для локальных областей уже писалось [[#Особенности верстки|выше]]. Все необходимые глобальные стили помещаются в css файл выбранной темы, который доступен для редактирования в секции [[index#Тема дизайна|"Тема дизайна"]]. 

Пути к графическим файлам должны указываться в относительном виде: url('images/myimage.png'). При этом путь 'images/...' будет таким всегда, меняться могут только имена файлов. 

===== Создание опциональных свойств =====
В tpl и css файлах можно использовать специальные конструкции для вынесения каких-то параметров в список визуальных опций (например цвет, размер шрифта и т.п.).

==== Формат ====

[**?ид_опции** **caption**=%%"название опции"%% **type**=%%"тип"%% **default**=%%"значение по умолчанию"%%]

  * **ид_опции** – уникальное название опции в рамках темы, например header-height.
  * **название опции** – текстовое название, которое будет показано в редакторе опций.
  * **тип** – определяет тип значения и формат редактора для опции.

<note important>
Двойные кавычки для значений параметров обязательны для успешного распознавания этой конструкции.
</note>

==== Доступные типы ==== 
  * **string** – любая строка.
  * **px** – целое значение (подставляется сразу с px на конце).
  * **int**  - целое число.
  * **color** – цвет (подставляется в формате #FFFFFF).
  * **select** – несколько значений на выбор (список).
  * **image** – файл картинки.

<note important>
Для типа **select**, в формате конструкции используется дополнительный параметр **options**=%%"значение1:название1, значение2:название2, …"%%.
</note>

==== Примеры ====

<code css>
#header {
  height: [?header-height caption="Высота" type="px" default="225"];
}
</code>

<code css>
#content {
  background: url('images/[?content-background caption="Фон" type="image"]');
}
#content a, #content a:visited {
  text-decoration: none;
  color: [?content-a-color caption="Цвет ссылки" type="color" default="FB9233"];
}
</code>

<code css>
.pager { 
  font-size: [?pager-font-size caption="Размер шрифта" type="px" default="14"];
  text-align: [?pager-align caption="Выравнивание" type="select" options="left:Слева,right:Справа,center:По центру" default="center"];
}
</code>

===== Особенности для центральной/рабочей области =====
Центральная область включает в себя основной контент страницы, как для главной, так и для внутренних. В отдельном css файле, с префиксом #content следует указывать стили для форматирования заголовков, текста, списков, таблиц.

==== Шаблоны рабочей области всех типов страниц ====
Для всех предусмотренных в конструкторе типов страниц, шаблоны физически располагаются в wizard_config/[mysiteid]/templates/, откуда они копируются в момент сборки итоговых шаблонов.
Веб-редактор этих шаблонов доступен в секции [[index#Тема дизайна|"Тема дизайна"]]. 

<note important>
Шаблоны центральной области внутренних страниц можно редактировать и стандартным способом: "Панель управления" -> "Файлы" -> "Шаблоны", однако следует помнить, что изменения в этом случае могут быть потеряны после каких-то изменений в конструкторе.
</note>