Здесь показаны различия между двумя версиями данной страницы.
Предыдущая версия справа и слева Предыдущая версия | |||
как_работать_с_кодом_шаблона [2015/09/04 11:32] watch-led.ru@mail.ru [Страницы:] |
как_работать_с_кодом_шаблона [2017/06/17 11:15] (текущий) watch-led.ru@mail.ru |
||
---|---|---|---|
Строка 15: | Строка 15: | ||
**Разметка шаблона (tpl)** | **Разметка шаблона (tpl)** | ||
- | Принцип прост."tpl файлы" - это HTML код отдельных частей шаблона, с вставками тегов в {фигурных скобках}, на место тегов в отображении подставляется динамическое содержимое.Если нужно вставить НЕпеременную с фигурными скобками (например скрипт, содержащий фигурные скобки), то этот код надо окружить тегами {literal} здесь ваш код {/literal}. | + | Принцип прост."tpl файлы" - это HTML код отдельных частей шаблона, с вставками тегов в {фигурных скобках}, на место тегов в отображении подставляется динамическое содержимое. Если нужно вставить НЕпеременную с фигурными скобками (например скрипт, содержащий фигурные скобки), то этот код надо окружить тегами {literal} здесь ваш код {/literal}. |
**Основные теги которые могут вам понадобится:** | **Основные теги которые могут вам понадобится:** | ||
Строка 35: | Строка 35: | ||
* Head.tpl - код раздела Head (если есть необходимость, создаёте файл в таком формате и заливаете на фтп); | * Head.tpl - код раздела Head (если есть необходимость, создаёте файл в таком формате и заливаете на фтп); | ||
- | * Код раздела Body (index.tpl) - (отвечает за содержимое верхней, боковых, нижней части шаблона): | + | * Код раздела Body (index.tpl) - (отвечает за содержимое верхней, боковых, нижней части шаблона) |
- | + | * Каталог (products.tpl) - (отвечает за содержимое категорий товаров: блоки товара, фильтр товара, навигационные кнопки страниц, описание категории) | |
- | {{:pasted:20150820-133942.png}} | + | |
- | + | ||
- | * Каталог (products.tpl) - (отвечает за содержимое категорий товаров: блоки товара, фильтр товара, навигационные кнопки страниц, описание категории): | + | |
- | + | ||
- | {{:pasted:20150820-134025.png}} | + | |
* Главная страница (start_page.tpl) - (отвечает за содержимое главной страницы: блоки товаров, описание главной страницы) | * Главная страница (start_page.tpl) - (отвечает за содержимое главной страницы: блоки товаров, описание главной страницы) | ||
- | |||
- | {{:pasted:20150820-134101.png}} | ||
**CSS** | **CSS** | ||
Строка 64: | Строка 56: | ||
В каждом браузере присутствует функция "Просмотр кода элемента": (*название может отличаться для каждого браузера) | В каждом браузере присутствует функция "Просмотр кода элемента": (*название может отличаться для каждого браузера) | ||
- | {{:pasted:20150820-134358.png}} | ||
- | Для того, чтобы найти код конкретного элемента - кликаем по эл-ту (прим. картинке), и в открывшемся окне кода у нас будет выделен блок с данным эл-том: | + | Для того, чтобы найти код конкретного элемента - кликаем по эл-ту (прим. картинке), и в открывшемся окне кода у нас будет выделен блок с данным эл-том |
- | {{:pasted:20150820-134421.png}} | ||
* Таким образом мы видим что данное фото находится в .tpl файле в блоке (3) "<div class="photo-big"…>" и в таблице стилей .css (4) - ".photo-big { width:267…}" | * Таким образом мы видим что данное фото находится в .tpl файле в блоке (3) "<div class="photo-big"…>" и в таблице стилей .css (4) - ".photo-big { width:267…}" | ||
Строка 76: | Строка 66: | ||
После того, как подогнали параметры их нужно перенести в соответствующий файл сайта. | После того, как подогнали параметры их нужно перенести в соответствующий файл сайта. | ||
- | Переходим в менеджер-панель > открываем соответствующий файл > находим нужный блок > меняем параметры > сохраняем: | + | Переходим в менеджер-панель > открываем соответствующий файл > находим нужный блок > меняем параметры > сохраняем: |
{{:pasted:20150820-134448.png}} | {{:pasted:20150820-134448.png}} |