====== Как работать с кодом шаблона? ======

  * Учебник HTML, основы - [[http://www.webremeslo.ru/html/glava0.html|ссылка]]
  * Учебник CSS для начинающих - [[http://www.webremeslo.ru/css/glava0.html|ссылка]]

===== Доступ к коду шаблона: =====

По ссылке ваш-магазин.ru/manager/page/Template
  * Браузерный интерфейс для редактирования разметки, css, js, картинок
  * И [[ftp_доступ_к_витрине|ftp доступ]] для прямого редактирования


===== Страницы: =====

**Разметка шаблона (tpl)**
	
Принцип прост."tpl файлы" - это HTML код отдельных частей шаблона, с вставками тегов в {фигурных скобках}, на место тегов в отображении подставляется динамическое содержимое. Если нужно вставить НЕпеременную с фигурными скобками (например скрипт, содержащий фигурные скобки), то этот код надо окружить тегами {literal} здесь ваш код {/literal}.

**Основные теги которые могут вам понадобится:**

<WRAP center round box 100%>
{$название переменной} [[переменные_шаблонов|список переменных]]
  * Подставляет на место тега значение соответствующей переменной шаблна.

{if (условие)} 111 {/if}
  * Выводит 111 если выполняется условие

{if (условие)} 111 {else} 222 {/if}
  * Выводит 111 если выполняется условие, 222 если оно не выполняется.
</WRAP>

Вот и вся основная информация по управлению разметкой.

----

  * Head.tpl - код раздела Head (если есть необходимость, создаёте файл в таком формате и заливаете на фтп);
  * Код раздела Body (index.tpl) - (отвечает за содержимое верхней, боковых, нижней части шаблона)
  * Каталог (products.tpl) - (отвечает за содержимое категорий товаров: блоки товара, фильтр товара, навигационные кнопки страниц, описание категории)
  * Главная страница (start_page.tpl) - (отвечает за содержимое главной страницы: блоки товаров, описание главной страницы)

**CSS** 
  * Хранит в себе файлы стилевых описаний HTML тегов (т.е через .css мы редактируем все элементы сайта, меняем их внешний вид -размер, цвет, шрифт и т.д.)

<WRAP center round important 100%>
Чтобы отредактировать карточку товара или любой другой блок, закрытый для прямого редактирования - смотрим её css стил в permanent.css и переносим этот код, с изменением в style.css
</WRAP>

	
**Картинки**
  * Папка с графическими элементами дизайна (логотипы, кнопки, и др.)
  * URL адрес до папки картинок "ваш-сайт.ру/design/images/ваша-картинка"


====== Как найти код элемента? ======

В каждом браузере присутствует функция "Просмотр кода элемента": (*название может отличаться для каждого браузера)


Для того, чтобы найти код конкретного элемента - кликаем по эл-ту (прим. картинке), и в открывшемся окне кода у нас будет выделен блок с данным эл-том


  * Таким образом мы видим что данное фото находится в .tpl файле в блоке (3) "<div class="photo-big"…>"  и в таблице стилей .css (4) - ".photo-big { width:267…}"

В этих же окошках можем менять, добавлять параметры (изменения происходят в реальном времени).

После того, как подогнали параметры их нужно перенести в соответствующий файл сайта.

Переходим в менеджер-панель > открываем соответствующий файл > находим нужный блок > меняем параметры > сохраняем:

{{:pasted:20150820-134448.png}}