Qnits

Это старая версия документа.

---

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

Короткая ссылка на эту страницу: http://qnits.ru/s/настройкаДизайна

23 марта 2015 г. 12:56

• Учебник HTML, основы - ссылка
• Учебник CSS для начинающих - ссылка

Доступ: По ссылке ваш-магазин.ru/manager/page/Template

• Браузерный интерфейс для редактирования разметки, css, js, картинок
• И ftp доступ для прямого редактирования

Страницы:

Разметка шаблона (tpl)

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

• {$название переменной} список переменных
	Подставляет на место тега значение соответствующей переменной шаблона
• {if (условие)} 111 {/if}
	Выводит 111 если выполняется условие
• {if (условие)} 111 {else} 222 {/if}
	Выводит 111 если выполняется условие, 222 если оно не выполняется.
	

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

1) Head.tpl - код раздела Head

2) Код раздела Body (index.tpl) - (отвечает за содержимое верхней, боковых, нижней части шаблона):



3) Каталог (products.tpl) - (отвечает за содержимое категорий товаров: блоки товара, фильтр товара, навигационные кнопки страниц, описание категории):



4) Главная страница (start_page.tpl) - (отвечает за содержимое главной страницы: блоки товаров, описание главной страницы)

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

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

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

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

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

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

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

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

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