Интеграция своего дизайна для режима конструктора

Конструктор в Astra.CMS автоматически формирует итоговые шаблоны для сайта из взаимозаменяемых фрагментов для основных областей/блоков. Поэтому верстка и внедрение html кода и стилей имеет свои особенности и отличается от интеграции дизайна обычным способом.

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

• Фиксированная ширина, левая колонка блоков;
• Фиксированная ширина, правая колонка блоков;
• Фиксированная ширина, левая и правая колонка блоков;
• Фиксированная ширина, без боковых колонок;
• Резиновая ширина, левая колонка блоков;
• Резиновая ширина, правая колонка блоков;
• Резиновая ширина, левая и правая колонка блоков;
• Резиновая ширина, без боковых колонок.

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

Физическое расположение файлов этой области - wizard_config/[mysiteid]/header/.

• header.tpl - файл шаблона.
• header.css - файл стилей.
• images - каталог с графическими файлами.

Эта область на уровне каркаса заключена в <div id="header"> ... </div> , поэтому имеет смысл делать классы стилей относительно #header. Для #header требуется обязательно указать свойство height.

Физическое расположение файлов этой области - 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 и 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 и CONTENT.

Физическое расположение файлов этой области - wizard_config/[mysiteid]/content/.

• content.tpl - файл шаблона.
• content.css - файл стилей.
• images - каталог с графическими файлами.

Эта область на уровне каркаса заключена в <div id="content"> ... </div> , поэтому имеет смысл делать классы стилей относительно #content. Шаблон должен содержать специальную вставку CONTENT.

Физическое расположение файлов этой области - wizard_config/[mysiteid]/navigation/.

• navigation.tpl - файл шаблона.
• navigation.css - файл стилей.
• images - каталог с графическими файлами.

В шаблоне используется стандартный набор данных для этого объекта.

Физическое расположение файлов этой области - wizard_config/[mysiteid]/pager/.

• pager.tpl - файл шаблона.
• pager.css - файл стилей.
• images - каталог с графическими файлами.

В шаблоне используется стандартный набор данных для этого объекта.

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

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

Например, для шапки сайта все стили будут иметь вид:

#header .classname 
{
 … 
}

Для центральной области:

#content .classname 
{ 
… 
}

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

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

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

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

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

Используется только в шаблоне левой колонки блоков (закладка «Колонка»). На этапе сборки замещается на функцию leftblocks, которая осуществляет вывод всех блоков с левым расположением.

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

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

Используется:

1. В шаблонах обрамлений боковых блоков. На этапе сборки замещается на вывод переменной с содержимым блока.
2. В шаблоне центральной области. Подразумевает область основног контента и позволяет добавить для него специальное обрамление.

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

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

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

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

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

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

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

#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"];
}

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

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

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