TemplateToaster

Обзор TemplateToaster 5 Professional. Визуальный редактор шаблонов

 

 

В предыдущей статье «Обзор TemplateToaster 5. Генератор CSS шаблонов» мы продолжили обзор инструментов TemplateToaster и рассмотрели новшества, которые появились в 5-й версии программы по сравнению с 4-й.

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

Меню

Для настройки внешнего вида меню редактор шаблонов предоставляет целый ряд инструментов на одноимённой вкладке (рисунок ниже).

Меню TemplateToaster 5
Меню TemplateToaster 5

Область PresetGroup, инструмент Пресеты. Данный инструмент (рисунок ниже) содержит готовые стили оформления меню.

TemplateToaster Professional
TemplateToaster Professional

Инструмент Позиция меню. Данный инструмент позволяет разместить меню под, над или внутри верхнего колонтитула (хэдэра). Также есть возможность вовсе его отключить.

Все инструменты в областях Задний фон, Макет, Эффекты, Логотип, Изображение на переднем плане, Текстовые области были рассмотрены ранее.

Область Кнопка меню, инструмент Свойства кнопки меню. При помощи инструментов и параметров, которые предоставляет Вам визуальный редактор шаблонов в данном разделе Вы можете настроить внешний вид кнопок меню. Доступно множество настроек (рисунок ниже):

  • Разделитель. Настройка внешнего вида линии между кнопками меню. Можно менять стиль, толщину и цвет линии.
  • Высота. Высота кнопок меню в процентах от высоты области меню заданной в инструменте Высота область Макет.
  • Отступ. Внешний отступ справа и слева между кнопками меню.
  • Отступ. Внутренний отступ справа и слева от края кнопки до текста (названия) пункта меню.
  • Выравнивание. Можно задать горизонтальное (по левому, правому краю, по центру или ширине) и вертикальное (вверху, по центру, внизу) выравнивание кнопок меню.
  • Иконки. Визуальный редактор шаблонов позволяет Вам добавить иконки (изображения), которые будут отображаться рядом с названием пункта меню внутри кнопки. Можно выбрать одно из предлагаемых изображений или загрузить своё. Плюс, Вы можете показать цвета иконки: Нормальный (цвет иконки, когда пользователь не навёл курсор мыши на кнопки и когда пользователь не находится на странице сайта, закреплённой за текущим пунктом меню), Наведённый (цвет иконки, когда пользователь навёл курсор мыши на кнопки), Активный (цвет иконки, когда находится на странице сайта, закреплённой за текущим пунктом меню).
Редактор шаблонов
Редактор шаблонов
  • Стрелка. Оформление внешнего вида стрелки, которая будет отображаться на кнопке меню тогда, когда у данного пункта меню есть подменю (рисунок ниже). Можно задать толщину и цвет нормального, наведённого и активного состояния.
  • Текстура. Можно наложить текстуру и задать тень для кнопки. Это всё настраивается для нормального, наведённого и активного состояния.
Визуальный редактор шаблонов
Визуальный редактор шаблонов

Область Кнопка меню, инструмент Задний фон. В редакторе шаблонов Joomla Вы можете задать сплошной цвет, градиент или изображение для заднего фона кнопки меню. Это настраивается для нормального, наведённого и активного состояния.

Область Кнопка меню, инструмент Граница. Можно указать стиль, толщину, радиус скругления и цвет границы кнопки меню (все эти опции были рассмотрены ранее в статьях). Это настраивается для нормального, наведённого и активного состояния.

Область Кнопка меню, инструмент Типография. Настройка шрифта заголовка пункта меню для нормального, наведённого и активного состояния. Опции рассмотрены ранее в статье «Обзор TemplateToaster 5. Генератор CSS шаблонов».

Область Подменю. Настройка «макета» и «реакции» подменю.

  • Click. Открытие подменю по нажатию на кнопку пункта меню.
  • Hover. Открытие подменю при наведении курсора мыши на кнопку пункта меню.

Переключаясь между инструментами Мега, Вертикальный и Горизонтальный Вы меняете «макет» подменю. На рисунках ниже приведены примеры подменю в зависимости от выбранного инструмента (согласно порядку, в перечне выше).

Редактор шаблонов Joomla
Редактор шаблонов Joomla
Редактор шаблонов сайтов
Редактор шаблонов сайтов
Горизонтальный
Горизонтальный

В зависимости от выбранного инструмента (Мега, Вертикальный и Горизонтальный) будут доступны другие. Например, если выбрать Мега, то можно настроить Область подменю, Пункт меню и Заголовок подменю. Если выбрать Вертикальный или Горизонтальный, то только Область подменю и Пункт меню.

Область Подменю, инструмент Область подменю. Можно настроить задний фон (цвет, градиент или изображение), границу (стиль, толщину, радиус скругления или цвет) и тень.

Область Подменю, инструменты Пункт подменю и Заголовки подменю. Опции этих инструментов одинаковые (рисунок ниже). Редактор шаблонов сайтов позволяет Вам настроить такие параметры (все они были рассмотрены выше в статье или ранее в других статьях):

  • Высота.
  • Ширина.
  • Задний фон. Нормальное и наведённое состояние.
  • Граница.
  • Граница при наведении курсора.
  • Тень.
  • Тень при наведении.
  • Разделитель.
  • Отступ. Внешний.
  • Отступ. Внутренний.
  • Иконка. Нормальное и наведённое состояние.
  • Типография. Лучше «типографика» - настройка шрифтов. Нормальное и наведённое состояние.
Пункт подменю
Пункт подменю

Боковая панель

На вкладке Боковая панель (рисунок ниже) расположены инструменты для настройки боковых колонок шаблона.

Боковая панель
Боковая панель

Инструмент Макет. Позволяет указать, сколько боковых панелей должно быть, и где они должны располагаться (рисунок ниже).

  • Нет. Без боковых панелей.
  • Слева боковая панель. Одна боковая панель слева от области (колонки) содержимого.
  • Справа боковая панель. Одна боковая панель справа от области содержимого.
  • Слева Слева боковая панель. Две боковые панели слева от области содержимого.
  • Слева справа боковая панель. Одна боковая панель слева от области содержимого, одна - справа.
  • Справа Справа боковая панель. Две боковые панели справа от области содержимого.
Макет
Макет

Все инструменты в областях Задний фон, Макет, Эффекты, были рассмотрены ранее в статьях.

Область Высота. Позволяет задать, какой должна быть высота боковых панелей. Или 100% от высоты основной области страницы (контентной) – опция Высота 100% или боковая колонка должна подстраиваться под высоту содержимого, которое в ней размещается. Опция Эквивалентно содержимому.

Модули

На данной вкладке (рисунок ниже) Вы найдёте инструменты, при помощи которых можно настроить внешний вид модулей. Редактор шаблонов TemplateToaster 5 Professional предоставляет Вам для этого ряд инструментов. Обратите внимание, что вкладка Модули появляется только тогда, когда Вы активируете использование одной или двух боковых панелей на вкладке Боковая панель, инструмент Макет.

Модули
Модули

Причём, инструменты разделены на области, соответствующие областям модулей (рисунок ниже).

  • Контейнер. Зелёная рамка на рисунке ниже.
  • Хэдэр. Голубая рамка на рисунке ниже.
  • Контент. Красная рамка на рисунке ниже.
Область модуля
Область модуля

Область Контейнер, инструмент Свойства контейнера. Вы сможете настроить внешний, внутренний отступы, границы (стиль, толщина, радиус скругления, цвет) и тень. Все эти опции уже рассматривались ранее, также, как и инструмент Задний фон.

Область Хэдэр. Все инструменты данной области, включая Свойства верхнего колонтитула (иконки, внешний и внутренний отступы, тип заголовка), уже рассмотрены в предыдущих статьях.

Область Контент. Инструмент Задний фон уже рассматривался. Инструмент Свойства контента (рисунок ниже) помимо рассмотренных ранее настроек позволяет сконфигурировать новые элементы.

  • Активная ссылка, Наведённая ссылка, Посещённая ссылка. Вы можете задать оформление текста, по аналогии с другими текстовыми объектами (стиль, размер, цвет и так далее), рассмотренными ранее, для трёх различных состояний гиперссылок.
  • Текст. Для этого элемента добавлена опция Отступ, которая позволяет настроить абзацный отступ (не путать с междустрочным интервалом).
  • Заголовки. Визуальный редактор шаблонов позволяет задать стиль, размер шрифта (кегль), семейство (гарнитуру), цвет, отступ, эффекты, выравнивание, оформление (подчёркнутый, зачёркнутый). Причём, это можно сделать для заголовка каждого уровня (H1-H6) отдельно.
  • Нумерованный список. Настройка оформления нумерованного списка. Помимо уже знакомых настроек шрифта можно выбрать стиль. Например: 1, 2, 3; a, b, c и так далее.
  • Неупорядоченный список. Настройка оформления маркированного списка. Только настройки шрифта.
Свойства контента
Свойства контента

Инструмент Быстрые стили. Содержит набор предварительно установленных вариантов оформления модулей (рисунок ниже).

Быстрые стили
Быстрые стили

Вертикальное меню

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

Вертикальное меню
Вертикальное меню

Хочу только привести варианты оформления меню (рисунок ниже), в зависимости от выбранного «типа» расширяемого горизонтально подменю: Мега, Вертикальный, Горизонтальный.

Тип Мега
Тип Мега
Тип Вертикальный
Тип Вертикальный
Тип Горизонтальный
Тип Горизонтальный

Контент

В этой вкладке (рисунок ниже) редактор шаблонов Joomla предоставляет Вам ряд возможностей по настройке внешнего вида самого главного, что есть на любом сайте – содержимого (контента). Большинство инструментов и их настроек уже рассматривались ранее. Не будем их затрагивать, а только остановимся на новых.

Контент
Контент

Примеры предварительно установленных стилей оформления (прессетов) контента показаны на рисунке ниже.

Пример приссетов
Пример приссетов

Область Контент, инструмент Свойства контента. Помимо уже знакомых опций позволяет настроить высоту строки в пикселях (аналог междустрочного интервала).

Хочу обратить Ваше внимание, что для контента доступно задание нескольких границ:

  • Синяя сплошная линия на рисунке ниже. Область Макет, инструмент Свойства контентаГраница.
  • Чёрная сплошная линия на рисунке ниже. Область Публикация, инструмент Свойства публикации – Внутренняя рамкаГраница.
  • Красная сплошная линия на рисунке ниже. Область Публикация, инструмент Свойства публикации – Граница контента.
  • Зелёная пунктирная линия на рисунке ниже. Область Публикация, инструмент Граница.
Границы
Границы

Область Контент, инструмент Списки. В отличие от списков в модуле, для маркированных списков (неупорядоченных) можно указать иконку маркера и её цвет.

Область Контент, инструмент Таблица. При помощи настроек данного инструмента (рисунок ниже) редактор шаблонов сайтов позволяет Вам настроить внешний вид таблиц сайта (не путать с CSS-таблицами).

  • Table background. Фоновый цвет таблицы.
  • Table Margin. Отступ от верхнего, правого, нижнего, левого края таблицы до окружающих объектов.
  • Table Padding. Отступ от верхнего, правого, нижнего, левого края ячейки до внутреннего содержимого ячейки.
  • Table Header. Настройка цвета фона и текста заголовка таблицы.
  • Тип рамки. Одинарная или двойная обводка.
  • Граница. Стиль, толщина и цвет границы таблицы.

Для тех, кто делает сайты на Джумла предлагаю ознакомиться со статьёй «Обзор Droptables. Создание прайс листа в Joomla», в которой описано расширение позволяющее сделать красивые и функциональные таблицы без знаний программирования.

Область Публикация, инструмент Свойства публикации. Здесь (рисунок ниже) собраны настройки по управлению содержимым области контента, которую можно условно разделить на «заголовок», «содержимое» и «метаданные».

Свойства публикации
Свойства публикации

На рисунке ниже заголовок обведён синим, содержимое – красным, а метаданные – зелёным.

Область содержимого
Область содержимого

Настройки, доступные для этих областей (рассмотрим только новые настройки):

  • Показывать метаданные. Отображает\скрывает метаданные.
  • Внутренняя рамка. Возможно задать рамку для заголовка и\или метаданных. Можно изменить тип, цвет, ширину и радиус скругления рамки, добавить тень, изменить задний фон и внутренний\внешний отступы.
  • Поля от контента и Отступ содержания (лучше «Отступ содержимого»). Отступ от контента до границы области содержимого и отступ от границы области содержимого до контента (почти одно и то же).
  • Изображение публикации. Позволяет добавить изображение к материалу и настроить внешний вид обрамляющей его рамки.
  • Пост на главной. Это своего рода управление макетом страницы типа «Блог категории» (в Joomla). Пример такой страницы – страница категории с обзорами TemplateToaster Professional. Можно выбрать значение «0» – не отображать в верхней части страницы статью во всю ширину (за исключением тех случаев, когда для опции Колонки выбрано «1»), «1» – отображать в верхней части страницы статью во всю ширину.
  • Колонки. Доступно отображение контента в 1, 2, 3 или 4 колонки. По аналогии с газетными колонками.

Область Публикация, инструмент Типография. Аналогичен рассмотренным ранее одноимённым инструментам, но позволяет изменить свойства шрифтов таких элементов контента как:

  • Заголовок.
  • Title Hover. Заголовок, на который наведён курсор мыши.
  • Метаданные.
  • Мета-ссылка. Гиперссылка в области метаданных.
  • Наведённая мета-ссылка. Гиперссылка в области метаданных, на которую наведён курсор мыши.
  • Контент.

Область Публикация, инструмент Иконки. Редактор шаблонов сайтов позволяет Вам задать иконку для таких элементов:

  • Заголовок публикации.
  • Автор.
  • Дата.
  • Печать.
  • эл. Почта.
Иконки
Иконки

Эти иконки отображаются над материалом (например, на этом сайте вверху есть иконка печати). Вы можете выбрать одну из доступных иконок в библиотеке TemplateToaster 5 Professional, задав ей цвет, или указать своё собственное изображение.

В следующей статье «Обзор TemplateToaster Professional. Генератор HTML шаблонов» мы рассмотрим позиции модулей, настройки внешнего вида различных элементов управления и футэр (подвал сайта или нижний колонтитул).

Похожие материалы
Автор статьи – Хорошевский Алексей

Хорошевский Алексей Примерно с 2008 года и по сегодняшний день создаю сайты «под ключ» на Joomla и WebSite X5. Также занимаюсь их доработкой, SEO-продвижением, контекстной рекламой, защитой от взлома и оптимизацией скорости загрузки сайта.

Кандидат технических наук по специальности «Информационные технологии».

На этом сайте есть контакты и информация обо мне. На нём Вы найдёте примеры моих работ, а также перечень и цены предоставляемых услуг.

 

Полезные ссылки: