Пример создания шаблона (v4.0.7RE)

[Aleksey]

Расскажу вкратце пример создания вот такого шаблона:


Делать его будем из шаблона "С колонкой для анонса" (hot).

В папке admin создаем файл admin_cms_hot_layout_my.html со следующим содержимым:

<table border="1">
	<tr>
		<td colspan="4">{header}</td>
	</tr>
	<tr valign="top">
		<td colspan="3" width="66%">{hot}</td>
		<td rowspan="3" width="33%">{right}</td>
	</tr>
	<tr valign="top">
		<td rowspan="2" width="33%">{left}</td>
		<td colspan="2" width="33%">{middle}</td>
	</tr>
	<tr>
		<td width="16%">{middle_left}</td>
		<td width="16%">{middle_right}</td>
	</tr>
	<tr>
		<td colspan="4">{footer}</td>
	</tr>
</table>

В фигурных скобках указываются теги блоков, можно переименовать как угодно.

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

При открытии этого файла должна получиться такая таблица:


При необходимости корректируем файл, добиваясь нужного расположения блоков в таблице. После получения окончательного варианта удаляем из файла border="1".

В папке templates/user создаем копию файла layout_hot.html, и переименовываем копию в layout_hot_my.html.

Теперь надо div-ами расположить наши блоки в нужном порядке. Изменять будем то, что расположено внутри div с классом contentStyle.

Каждый блок (серый цвет на рисунке ниже) обрамлен двумя div, например:

<div class="leftStyle">
	<div class="leftStylePadding">
		{left}
	</div>
</div>

Теги блоков должны быть такие же, как и в файле admin_cms_hot_layout_my.html.

Класс leftStyle задает расположение и размеры div (например, .leftStyle {float: left; position: relative; width: 25%;}), где 25% - это ширина div относительно родительского div. Чтобы было понятнее, вот ширина блоков для данного примера:
{hot} - 80%
{right} - 20%
{left} - 25%
{middle} - 75%
{middle_left} - 50%
{middle_right} - 50%

Класс leftStylePadding задает пустое пространство вокруг блока (например, .leftStylePadding {padding: 0 3px 3px 0;}).

Если под каким-либо блоком горизонтально расположено несколько других блоков, то их надо объединить под одним div. В этом примере, под блоком {hot} расположены блоки {left} и {middle}, а под блоком {middle} расположены блоки {middle_left} и {middle_right}.

На рисунке расположены блоки с тегами и классами, справа – дерево div-ов:


В итоге получается так:

<div class="contentStyle">
	<div class="hotStyle">
		<div class="hotStylePadding">
			{hot}
		</div>
		<div class="leftStyle">
			<div class="leftStylePadding">
				{left}
			</div>
		</div>
		<div class="centerStyle">
			<div class="myCenterStyle">
				<div class="centerStylePadding">
					{middle}
				</div>
			</div>
			<div class="myLeftMiddle">
				<div class="myLeftStylePadding">
					{middle_left}
				</div>
			</div>
			<div class="myRightMiddle">
				<div class="myRightStylePadding">
					{middle_right}
				</div>
			</div>
		</div>
	</div>
	<div class="rightStyle">
		<div class="rightStylePadding">
			{right}
		</div>
	</div>
</div>

При необходимости прописываем свои стили в css-файл. Для данного примера дописываем:
.myCenterStyle {float: left; position: relative; width: 100%;}
.myLeftMiddle {float: left; position: relative; width: 50%;}
.myRightMiddle {float: right; position: relative; width: 50%;}
.myLeftStylePadding {padding: 0px 3px 0px 0px;}
.myRightStylePadding {padding: 0px 0px 0px 0px;}

Теперь нужно внести записи в таблицу va_cms_layouts:
layout_name - имя, например, HOT_LAYOUT_MY_MSG
layout_order - порядок отображения
layout_template - layout_hot_my.html
admin_template - admin_cms_hot_layout_my.html

Далее вносим записи в таблицу va_cms_frames (через тире указаны значения frame_name и tag_name):
HEADER_MSG - header
HOT_TITLE - hot
LEFT_COLUMN_MSG - left
MIDDLE_COLUMN_MSG - middle
MIDDLE_LEFT_MSG - middle_left
MIDDLE_RIGHT_MSG - middle_right
RIGHT_COLUMN_MSG - right
FOOTER_MSG - footer

layout_id везде равен значению из таблицы va_cms_layouts.

В файл messages/ru/admin_messages.php дописываем строку:

define("HOT_LAYOUT_MY_MSG", "Мой хот-лайоут"); 

Выглядеть этот шаблон будет примерно так:

[Alexgr]

Оно конечно полезная вроде как инфа, но показывать такое количество всплывающей рекламы на картинке портит все впечатление (((

[expy]

Оно конечно полезная вроде как инфа, но показывать такое количество всплывающей рекламы на картинке портит все впечатление (((

Оно конечно ваш пост вроде как малосодержателен. Пока замечание.

[Shmasser]

.......Далее вносим записи в таблицу va_cms_frames (через тире указаны значения frame_name и tag_name):
HEADER_MSG - header
HOT_TITLE - hot
LEFT_COLUMN_MSG - left
MIDDLE_COLUMN_MSG - middle
MIDDLE_LEFT_MSG - middle_left
MIDDLE_RIGHT_MSG - middle_right
RIGHT_COLUMN_MSG - right
FOOTER_MSG - footer

layout_id везде равен значению из таблицы va_cms_layouts.
.....

Кто-нибудь знает, где эти таблицы? Кто-то работал с ними?
Напишите пожалуйста об этом подробнее...

[brand]

По создание шаблона посмотрите ещё здесь , изменял шаблон под себя, всё работает.