Суббота, Август 22, 2015
  • 1

Andy Miller - Энди Миллер -
один из разработчиков Joomla!,
руководитель студии Rockettheme,
создатель Gantry Framework

image

RocketTheme

Шаблоны Joomla!

Самый известный в Joomla-сфере клуб

Расширения

Отличные и, главное, бесплатные

Wordpress Themes Club

Уникальные темы для блогов

Присоединиться

Модуль с фотографией Энди Миллера - это так называемый "floating module" - плавающий модуль. Он перемещается в пределах позиций, указанных ему в настройках шаблона.

В настройках можно также отрегулировать высоту "падения" модуля.

Позиция Feature Feature Section
 
 
 
 
Джумла для чайников
Предисловие
к странице про Gantry Framework
 

Да, я честно признаюсь, что потратила уйму времени на то, чтобы разобраться и понять, чем уж так хорош для простого вебмастера этот прибамбас с непонятным названием "Gantry Framework". Не один мой сайт "слетел", пока шел процесс изучения. И лишь женское упрямство привело меня к тому моменту, когда я смогла воодушевленно воскликнуть:

                                                I love Gantry !!!

Сегодня я смело (и даже с гордостью) могу утверждать, что ни один рунетовский сайт не даст вам столько практической информации о Gantry, сколько её может дать наш сайт. Но для того, чтобы вы смогли ею воспользоваться, вы должны скачать бесплатный пакет шаблона Afterburner2 , который в списке загрузок числится под именем "Joomla 3.3 RocketLauncher", и установить его на свой Денвер (или поддомен уже имеющегося сайта) . Процесс установки я описала в уроке "Как установить RocketLauncher".

А на этой странице я знакомлю вас с тем, как работает на Gantry выбранный мною для сайта шаблон Alerion от студии RocketTheme. Чтобы было понятнее, ниже я раскрыла все имеющиеся  в соответствии с Gantry позиции своего шаблона, разместив в них для наглядности модули с разной информацией. В позиции Main для пущего понимания размещена небольшая обзорная статья про размещение модулей сайта с помощью Gantry Framework, которую я буду дополнять новыми сведениями, в том числе и в соответствии с вашими вопросами в комментариях к статье.

Попробуйте Gantry! - он вам понравится!


Позиция Utility Utility Section
You must have the Adobe Flash Player installed to view this player.

Parallax

Прокручивая страницу, не начинаете ли вы почти физически ощущать, что двигаетесь вместе с лодкой по качающимся морским волнам? Этот 3D-эффект создаётся включением в настройках шаблона кнопки "Parallax". Она есть в параметрах каждой позиции нашего шаблона.

Позиция Main Main Section

MainBody (место для статей) + позиция Sidebar для модулей

На нашем сайте я использую приём копирования основного шаблона, что даёт мне возможность в "новом" шаблоне изменять расположение MainBody, т.е. места для вывода статей. Если вы посмотрите на шаблон Главной страницы сайта, то увидите, что статьи находятся слева, а модули - справа. Позиция модулей называется Sidebar-a. Однако я могу ту же самую позицию перевести влево, и тогда Mainbody перейдёт вправо (что я и сделала применительно к этой странице). Если в Менеджере шаблона подвигать бегунок во вкладке Layouts , то можно выбрать для себя самый подходящий вариант :

image
image
image
 

 Ниже приведены варианты взаиморасположения "главного тела" и sidebar-а:

Sidebar
A
Mainbody
Sidebar
B C
 
Sidebar
A B
Mainbody
Sidebar
C
 
 
Sidebar
A B C
Mainbody
 
Mainbody
Sidebar
A
 
 
Mainbody
Sidebar
A B
 
Mainbody
Sidebar
A B C
 
 
Sidebar
A
Mainbody
 
Sidebar
A B
Mainbody

Подсказка: Если в позицию Sidebar не ставить модули, то статьи будут показаны во всю ширину экрана, вне зависимости от настроек во вкладке Layouts.

Обратите также внимание на то, что я уменьшила ширину позиции sidebar-a, увеличив тем самым место для вывода статей:

Позиция content-top

Если модулю прописана в настройках эта позиция, то он появится прямо над статьёй. Посмотреть на графической схеме

"Одежда" этого модуля зависит от примененного двойного суффикса класса модуля: "box4 jagged". К суффиксу добавлена иконка "icon-pushpin", которую я выбрала в самом конце страницы "Своя типография" .

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

Изучая Alerion и открывая для себя его возможности, я частенько восклицала: ну почему - при таких-то шаблонах!!! - основная масса сайтов имеет унылый и даже удручающий вид? Взять хотя бы Алерион: на форуме по нему вебмастера к задаваемым вопросам прицепляют ссылку на проблемную страницу своего сайта, и я не пропустила ни одной, - ведь интересно посмотреть, что там коллеги-вебмастера наваяли! Так вот, глядя порой на какое-то почти варварское "творчество" по переделке шаблона, я до слёз жалела разработчика великолепнейшего продукта...

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

Если бы можно было озватить взглядом всю эту страницу целиком, то оказалось бы, что она состоит как бы из параллельных горизонтальных полос. Каждая полоска - это ПОЗИЦИЯ (position, иногда section). В каждом шаблоне свой набор позиций. Более того, можно создавать дополнительно собственные "полосочки". Хотя вроде бы куда уж больше -в  нашем шаблоне Alerion, например, их 19. Для наглядности я подписала некоторые из них в соответствии с тем, как они названы в Менеджере шаблона. Полную графическую схему вы пожете посмотреть на странице "Схема позиций модулей".

А теперь представьте, что мы стоим на верхней площадке лестницы и по ступенькам спускаемся вниз. Смотрим влево на модуль быстрой навигации по странице. Он является одной из изюминок нашего шаблона, и суть его заключается в том, чтобы, с одной стороны, показывать, в какой части страницы мы сейчас находимся, и, с другой стороны, помогать мгновенно переключиться в нужную секцию. Сейчас вы читаете мои вирши, а модуль показывает, что статья расположена в позиции (секции) MAIN, или mainbody, в которой на любом сайте выставляются статьи. Я обозначила эту позицию иконкой с флагом. Как только статья закончится и мы шагнем на следующую ступеньку, на модуле подсветится гаечный ключ, как указатель позиции Extension. Если мы захотим вернуться к началу статьи, то просто нажмём на флажок. И так вот быстренько можно попасть в любую секцию. Правда, здорово? Страница длинная, информации много, сиди, читай, слушай музыку, гуляй по секциям-позициям...

Теперь переходим к модулям, для которых эти позиции и созданы.

Если в Менеджере шаблона открыть вкладку Layout (раскладка), то можно увидеть, что каждая позиция разделена на несколько частей. С помощью бегунка можно увеличивать одну часть, уменьшая другие. Например, я разделила секцию Header  на три части в пропорции 2:8:2; в первой части висит лого, во второй - меню сайта, в третьей расположился модуль поиска по сайту.

Ещё пример: для этой страницы я мало того, что поменяла местами позиции mainbody и sidebar (статья теперь занимает место в правой части, в отличие от Главной страницы), но ещё и увеличила место для статьи, уменьшив левостороннюю позицию для модулей.

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

Если в какую-то позицию вы не поставили ни одного модуля, то она не будет открыта и не отразится в модуле быстрой навигации.

Из числа немаловажного я бы хотела обратить ваше внимание на то, что у каждой позиции может быть своё цветовое оформление и свой собственный бэграунд, к которому, в свою очередь, можно применить различные эффекты: закрыть полуматовой вуалью, или залить полупрозрачным градиентом, или наложить едва заметный узор. Ну, или применить все эффекты одновременно. Сравните: на главной странице футер имеет одну картинку, на этой странице - другую. Но обе они прикрыты полуматовой завесой. А вот бэграунд позиции Utility на этой странице (где расположен проигрыватель) прикрыт только легким градиентом.

Далее можно увеличить варианты оформления с помощью копирования шаблона. Это типа "каждому разделу - свой шаблон!". Шаблон-то, конечно, останется тем же, но стиль у каждой копии будет отличным от базового  благодаря вашим дизайнерским фантазиям.

На этом я заканчиваю  нашу экскурсию по позициям шаблона на gantry framework, а вас приглашаю к более пристальному его изучению, начинающемуся с урока "Как установить Joomla 3.3 + gantry".

 

Комментировать материал через:

  • Joomlalessons.ru
  • Вконтакте

Поделиться:

Репутация сайта joomlalessons.ru 

Репутация сайта - joomlalessons.ru

Rocket Launcher

Launcher  - это практически готовый сайт, потому что устанавливается архив, в котором есть Joomla! + шаблон, который вы выбрали + gantry framework + демо-контент, включая модули. Устанавливаете Launcher так, как будто бы устанавливаете Joomla!

Иными словами::
если устанавливаете Launcher, то чистую Джумлу ставить вообще НЕ надо!!!

Позиция Extension Extension Section

Демо-1

Демонстрация  к Пояснению 3.
Данный модуль находится в позиции extension-a.

Пояснение 2

Этот модуль имеет позицию extension-b. Его вид отличается от двух соседних модулей, потому что к нему применён другой суффикс класса модуля, позволяющий убрать фон, т.е. сделать его невидимым, или транспарентным. Тем самым вам предоставляется возможность лучше рассмотреть дорогу на заднем плане общей для этих трёх модулей позиции Extension.

Пояснение 3

Этот модуль находится в позиции extension-c. Поскольку в настройках шаблона я разбила общую позицию Extension на три равные части, то в одном ряду можно поставить только три модуля.

Однако, если мы будем размещать в общей позиции Extension ещё несколько модулей, то они будут становиться один под другим, создавая тем самым второй ряд.
Ниже я демонстрирую сказанное  модулями Демо-1 и Демо-2

 

Демо-2

Демонстрация  к Пояснению 3.
Данный модуль находится в позиции extension-c.

Позиция Bottom Bottom Section

Как прописать суффикс

В Joomla 2.5 откройте любой модуль через Менеджер модулей и в Дополнительных настройках справа пропишите в строчке "Суффикс CSS-класса модуля" название суффикса:Суффикс класса модуля

Естественно, в каждом шаблоне свои суффиксы, т.е. их названия зависят только от воли разработчика шаблона.
Если это прописано в шаблоне, то можно компоновать суффиксы. Например, в моём шаблоне к одному модулю я могу применить сразу два суффикса:  box3 title1.

Где искать суффикс CSS-класса модуля

В Менеджере модулей Joomla 3.0 откройте любой модуль. Наверху страницы находятся Основные и Дополнительные параметры. Суффикс прячется в Дополнительных параметрах:.

Суффикс класса модуля

 

А теперь сравните оба этих модуля:  они относятся к типу "HTML-код", но благодаря прописанным суффиксам кардинально отличаются друг от друга своей внешностью (один белый, другой - серый ).