Давно хотел поближе познакомиться с этим замечательным шаблоном основанном на T3 Framework и вот дошли руки. Ниже предлагаю вам небольшую инструкцию по использованию этого, без сомнения, интересного шаблона.
ДЕМО (поиграйтесь с размером окна брузера, вы увидите как шаблон автоматически адаптируется под него)
Мой тестовый сайт с установленным шаблоном
http://dtkp.ru/Шаблон бесплатен, скачать можно с оф.сайта
http://www.joomlart.com/forums/downloads.php?do=cat&id=20433Этот шаблон в первую очередь интересен тем, что он "как бы резиновый". Сам шаблон сверстан на CSS сетке grig, что подразумевает фиксированные размеры блоков, но в шаблон встроен механизм адаптации на JQuery плагине Masonry (разработчик David DeSandro) под разные разрешения экрана, то есть он автоматически подстраивает расположение колонок и блоков под то разрешение на котором он (сайт) в данный момент отображается. Причем он подстраивается под 4 типа размеров, под размер мобильного телефона (одна колонка, урезанное гланое меню), под размер планшета (2 колонки более расширенное меню) и под размеры настольных дисплеев. В шаблоне имеется дополнительная 6-ая колонка, которая появляется только на экранах с разрешение более 1440 рх по ширине.
И так начнем.
УстановкаСкачав основной архив с шаблоном мы найдем в нем 4 папки.
component, plugin, quickstart и template
В папке quickstart содержится дистрибутив Joomla 2.5.4 со встроенным шаблоном и всем для него необходимым, но стоит учесть что эта версия Joomla не русифицирована и ее придется дополнительно обучить русскому языку.
В остальных трех папках находится сам шаблон, плагин T3 Framework и компонент "Менеджер расширений от JoomlArt" которые необходимы для нормальной работы шаблона. Если вы решили установить шаблон в ручную, то сначала установите плагин, потом компонент и в самом конце сам шаблон из соотв. папок. Установка идет как обычно, через менеджер расширений Joomla. Не забудьте проверить включились ли все установленные вами расширения.
Структура шаблонаРабочие позиции для расположения модулей:
position-7, position-5 - две основных позиции, в которых и размещаются все блоки.
extra-col - та самая скрытая колонка, которая появляется только на широких экранах.
search и social - две позиции в верхнем правом углу для размещения блока поиска и соц.кнопок.
footer и footnav - 2 позиции внизу шаблона, во всю ширину.
debug - служебная позиция для работы режима отладки (использовать нельзя)
Основной блок контента расположен слева и имеет фиксированную ширину 3 блока (3х240 рх), блоки position-7, position-5, располагаются справа и автоматически распределяются по колонкам в зависимости от разрешения экрана, блок extra-col всегда раположен в крайней правой колонке и отображается на экранах более 1440 рх в ширину, в других случаях его не видно.
Сами блоки могут быть 3-х размеров, одинарного, двойного (суффикс: grid-double) и тройного (суффикс: grid-tripple) Для того что бы установить нужный размер блока на сайте вы должны указать CSS суффикс соответствующий нужной ширине, для одинарной ширины суффикс не нужен. Блок тройной ширины будет находится под блоком с основным контентом слева, но если экран шире 1440 рх, может перемещаться и в правые 3 колонки.
Блоки могут быть 5-ти цветов красного, черного, фиолетового, синего и зеленого. При помощи суффиксов вы можете назначить любой нужный вам.
И есть маленькая приятная штука, как небольшие бйджики вверху модуля, которые также при помощи дописывания суффикса можно добавить к блоку.
Вот пример некоторых суффиксов:
[пробел]grid-double[пробел]mod-contrast[пробел]contrast-blue - это модуль будет 2-ой ширины, синего цвета
[пробел]grid-double[пробел]mod-contrast[пробел]contrast-red[пробел]badge-photo - этот модуль будет 2-ой ширины, краного цвета и с изображением бйджа с фотокамерой
[пробел]grid-tripple[пробел]badge-hot - это модуль белого цвета 3-ой ширины с изображением бейджа с надписью HOT
Шаблон позволяем использовать в настройках любые гугл-шрифты, включая кирилические, можно гибко настраивать отображение блока с контентом (включать или выключать на нужных страницах сайта), очень гибкое главное меню (настраивается ширина выпадающих колонок, возможность добавить модули или изображения). В меню настроек шаблона множество ссылок на инструкции и видео уроки по использованию, настройке как шаблона, так и фреймворка Т3.
Если у вас возникнут вопросы, спрашивайте - отвечу.
P.S.
Так как я впервые написал подобный обзор-инструкцию и она получилась довольно объемная, то хочу спросить у вас, уважаемые форумчане, нужно ли добавить в этот пост инструкцию по настройке верхнего меню этого шаблона, по переопределению макетов вывода некоторых специфических частей шаблона (например как самостоятельно переопределить head шаблона, как настроить гугл-шрифты для кирилицы)