Как создать шаблон на базе Blank template и Twitter Bootstrap

шаблоны сайтов

В данном уроке мы расскажем, как на базе Blank Template ("пустой шаблон") и при помощи Twitter Bootstrap можно создать дизайн с адаптивной версткой на Joomla (версия 2.5). В итоге мы получим следующий результат:

В качестве примера можете посмотреть тестовый полигон: http://jab12.blank.vc. Я буду признателен, если вы поддержите мою разработку идеями и советами. Если данный урок найдете полезным, то можете также приобрести электронную книгу о Blank Template. Итак, приготовьте чашечку горячего чая или кофе, и можно не откладывая погрузиться в процесс настройки шаблона и интеграции Twitter Bootstrap в Joomla.
Подготовительный этап

Прежде всего нужно скачать Blank template. После этого, распакуйте архив и переименуйте папку в jab12. Далее, открываем на редактирование файл templateDetails.xml и заполняем всю информацию. Переименовываем языковые файлы (en-GB.tpl_templatename.ini на en-GB.tpl_jab12.ini) и имена языковых файлов в папке languages (файлы желательно локализовать на русский язык - прим.пер). Также по желанию можно заменить изображения превью шаблона template_preview.png, template_thumbnail.png и favicon.ico. Базовые изменения внесены. Теперь запакуйте папку шаблона (формат архива .zip) и установите шаблон через Менеджер расширений в панели управления Joomla. После того, как шаблон успешно установлен, идите в Менеджер шаблонов и назначьте наш шаблон по умолчанию. Теперь, если посмотреть на сайт с фронтальной части, мы увидим пустую, белую страницу - это вполне нормальная практика на этапе разработки.
Blank template

Для того, чтобы в полной мере оценить привлекательность и простоту дизайна на базе Blank Template, откройте следующие файлы: template.css, tablet.css и phone.css в /templates/jab12/css (jab12 - папка шаблона). Скопируйте целую строку с определениями body в template.css (body {...}) и вставьте её в в tablet.css и в phone.css. Измените значение background-color в tablet.css на red и в phone.css на green (как известно, для определения зеленого и красного цветов можно использовать соответствующие слова английского языка вместо вместо использования шестнадцатеричных кодов для определения цвета). После того, как изменения в файлах будут сохранены, обновите фронтальную страницу сайта и эффект будет налицо: фоновый цвет изменится с белого на красный и на зелёный при изменении размера окна браузера от большого к малому. Кроме того, Blank template также поддерживает различные расширения экранов гаджетов.

А теперь, если присмотреться к файлу template.css, можно обнаружить раздел, названный как 'floats'. Здесь можно найти вспомогательные селекторы для вёрстки. Если вы помещаете контент-область и сайдбар в boxmodel (коробочная модель), то можно использовать класс float-left для размещения их бок о бок и поместить их в тег <div> класса group для корректной очистки.

01.
<div class="group">
02.
<div id="content" class="float-left">
03.
<div class="incontent">
04.

05.
</div>
06.
</div>
07.
<div id="sidebar" class="float-left">
08.
<div class="insidebar">
09.

10.
</div>
11.
</div>
12.
</div>

Пример работает во всех браузерах. Разместите этот код внутри файла index.php шаблона (jab12) после <div class="inmain">. Содержимое у нас будет загружаться через Joomla API. В теге <div> с классом incontent выводятся не только системные сообщения, но также и содержимое всего компонента (например, материалы):

1.
<jdoc:include type="message" />
2.
<jdoc:include type="component" />


В теге <div> с классом insidebar вы вставляете позицию модуля под названием 'sidebar':

1.
<jdoc:include type="modules" name="sidebar" style="xhtml" />


Позиция модуля также должна быть объявлена в файле templateDetails.xml. Открываем файл и вставляем:

1.
<position>sidebar</position>

между <positions> и </positions>. После обновления страницы во фронтэнде, мы увидим заголовок сайта в виде слова 'Home', заглавие вашего сайта. Здорово! Но, пожалуй, неплохо бы увидеть более релевантную информацию. В панели администратора проследуйте в Материалы > Менеджер материалов > Добавить новый материал и напишите заголовок 'Blank Template Workshop' и текст статьи вроде такого:

Donec id elit non mi porta gravida at eget metus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean lacinia bibendum nulla sed consectetur. Donec ullamcorper nulla non metus auctor fringilla.

Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cras justo odio, dapibus ac facilisis in, egestas eget quam.

Пометим материал статусом 'избранные' и сохраним его. Поскольку это все равно тестовая статья, то можно вставить совершенно любой текст образца Lorem Ipsum ("рыба" материала) или как в примере выше. На этот материал в дальнейшем будут ссылаться пункты меню.

Не нравится как выглядят иконки печати и отправить другу во фронтэнде, а также элементы навигации "пред.", "след." и т.д.? Их можно скрыть в настройках менеджера материалов (закладка "материалы"). Выключите параметры ''Навигация', 'Показывать иконки', 'Иконка печати', 'Иконка электронной почты' и 'Кол-во просмотров'.

Теперь перейдем в Расширения > Менеджер модулей и откроем модуль 'Login Form' ('Вход на сайт'). Ему по умолчанию назначена позиция position-7. Задайте позициям уникальные и ясные названия (sidebar, menu или header - подходящие примеры, иллюстрирующие данный подход). Опубликуйте модуль авторизации в позиции sidebar. Сохранив страничку и обновив фронтальную часть сайта, мы увидим, что область контента и модуль авторизации не отображаются бок о бок, поскольку у блоков не задана ширина. Её нужно задать в файле template.css:

1.
#content {width:720px;}
2.
#sidebar {width:260px;}

после #main {} выставляем селектору #overall параметр width на 980px. Обновляем фронт и видим, что теперь блоки шаблона отображаются корректно.


Источник: http://joomlablog.ru

Добавить комментарий:
Имя:
E-mail:
2021 © Обсуждение Joomla и других CMS-систем управления сайтами  Правила | О проекте | Обратная связь