В самой первой статье посвященной созданию собственного шаблона для Joomla 3 я говорил, что данный процесс пусть не слишком сложный, но все же трудоемкий и занимает относительно много времени. В подтверждение тому данная, уже шестая по счету статья.
Ранее мы разобрали основные моменты создания шаблонов для CMS Joomla 3, разобрались с макетом, сверстали и оформили шапку сайта, главное меню, область контента и многое другое. Таким образом, мы плавно подобрались к заключительной части любого шаблона – футеру (или если хотите подвалу сайта).
Что такое футер, для чего он нужен и какая информация в нем содержится, мы говорили в статье посвященной редактированию стандартного шаблона и чтобы не повторяться, мы сразу начнем верстать и оформлять футер для нашего самодельного шаблона.
Для начала давайте посмотрим, что у нас должно получиться:
Как видите футер у нас двухцветный, значит, будет разбит на два отдельных блока – верхний и нижний. В верхнем блоке по аналогии с шапкой сайта мы расположим логотип и надпись, а так же сделаем две позиции для модулей, для вывода дополнительной навигации.
После того как мысленно разделили макет футера на отдельные блоки можно приступать к вёрстке. Первый блок у нас будет общий для всего футера, ему присвоим соответствующий идентификатор:
<div id="footer"> </div>
Внутри данного контейнера разместим еще два, которые будут отвечать за верх и низ шапки, они будут разной высоты и цвета:
<div id="footer"> <div class="ft-top"> </div> <div class="ft-bottom"> </div> </div>
Для начала займемся нижней частью футера, её реализовать проще всего. Добавим несколько блоков и напишем обычный текст:
<div class="ft-bottom">
<div class="ft-bottom-cont">
<p>Все права защищены © <?php echo date('Y') ?></p>
</div>
</div>
Как видите, внутри нижнего блока футера расположен еще один блок, который будет фиксированной ширины (в моем случае 1140 пикселей). Если Вы уже читали предыдущие части статей на тему «Как создать собственный шаблон», то наверняка уже знаете, для чего используется данный контейнер.
Для надписи был использован обычный тег <p>. Значок копирайта образуется при помощи специальных символов - ©. В заключение при помощи PHP выводим в футер сайта текущую дату (а точнее текущий год) - <?php echo date('Y')?>.
Для нижней части футера применим следующие стили:
.ft-bottom{height: 70px; background-color: #222222;}
.ft-bottom-cont p {color: #fff;text-align: center;height: 70px;line-height: 70px;}
Результат должен получиться вот таким:
Как видите, я не стал заморачиваться с иконками социальных сетей, их при необходимости всегда можно будет добавить в любое другое время.
Теперь переходим к верхней части, её можно разбить на три основных блока – логотип с текстом, меню в центре и некая контактная информация в правой части футера. Соответственно нам надо создать в блоке с классом ft-top три вложенных блока:
<div class="ft-top"> <div class="ft-top-cont"> <div class="ft-menu-1"></div> <div class="ft-menu-2"></div> <div class="ft-logo"></div> </div> </div>
Что это за контейнеры и для чего они нужны? Первые два блока с классами ft-menu-1 и ft-menu-2 мы используем под меню, третий ft-logo будет содержать логотип и текст. Все эти три контейнера вложены в блок с классом ft-top-cont (контейнер ограниченной ширины) и все они вместе находятся в родительском контейнере с классом ft-top (с шириной во весь экран).
Хочу обратить внимание на то, что блок, который будет контейнером для логотипа расположен в самом низу, хотя в макете логотип выводится в первую очередь. Тут нет никакой ошибки, все сделано именно так для того чтобы на мобильных устройствах логотип выводился под меню в самом низу страницы. А на устройствах с большими экранами мы изменим порядок вывода блоков при помощи определенных классов Bootstrap-а.
С фреймворком Bootstrap разберемся позднее, а сейчас давайте наполним содержимым наши блоки. В блоки с классами ft-menu-1 и ft-menu-2 мы будем выводить модули:
<div class="ft-menu-1"><jdoc:include type="modules" name="position-4" style="xhtml" /></div> <div class="ft-menu-2"><jdoc:include type="modules" name="position-5" style="xhtml" /></div>
А блок, предназначенный для логотипа, заполним обычной картинкой и текстом:
<div class="ft-logo"> <img alt="Joom4all.ru - создай свой сайт с нуля!" src="<?php echo $this->baseurl . 'templates/'. $this->template . '/images/ft-logo-min.png'?>"> <p id="ft-text"><span>JOOM4ALL - СОЗДАЙ СВОЙ САЙТ С НУЛЯ</span></p> </div>
Теперь давайте создадим несколько модулей (как минимум 2) и установим для них позиции с именами position-4 и position-5 соответственно. Я в качестве модулей использовал обычное меню, точнее сразу два меню, которым присвоил заголовок «Меню в футер» и «Меню в футер 2» (вот такая не богатая фантазия). В результате футер у меня получился вот таким:
Вот теперь пришло время поговорить о классах фреймворка Bootstrap, с помощью которых мы сможем легко оформить футер и изменить очередность вывода блоков в зависимости от разрешения экрана. Тем самым мы получим красивый и адаптивный футер для нашего шаблона (и сайта соответственно).
Давайте добавим к нашим блокам несколько дополнительных классов предопределенных Бутстрапом:
<div class="ft-menu-1 col-xs-12 col-sm-3 col-md-3 col-sm-push-6 col-md-push-5</div> <div class="ft-menu-2 col-xs-12 col-sm-3 col-md-4 col-sm-push-6 col-md-push-5"></div> <div class="ft-logo col-xs-12 col-sm-6 col-md-5 col-sm-pull-6 col-md-pull-7"></div>
Классов получилось целых пять штук, тем, кто знаком с фреймворком Bootstrap наверняка понятно для каких целей они нужны. Но я все же вкратце напишу, за что отвечает каждый из них.
Представьте себе, что вся ширина области определенного контейнера состоит из 12 равных вертикальных частей – в этом суть блочной системы Бутстрапа. Для того чтобы сделать блоки плавающими и расположить их горизонтально достаточно просто указать сколько таких частей будет занимать каждый блок, причем сумма частей не должна превышать 12 штук, то есть их общего количества. В противном случае последний блок будет съезжать.
С теорией разобрались, теперь перейдем непосредственно к используемым классам:
- col-xs-* - данный класс используется для устройств с шириной экрана менее 768 пикселей (телефоны). Вместо звездочки указывается количество частей, который будет занимать данный блок. В нашем случае все три блока будут занимать по 12 частей, другими словами будут растянуты по всей ширине страницы (это как раз то, что нужно для мобильных устройств).
- col-sm-* - задает размер блока на устройствах с шириной экрана от 768 до 991 пикселя (планшеты). В нашем случае блоки с меню будут занимать по 3 части (итого 6), а блок с логотипом займет оставшиеся 6 частей.
- col-md-* - как и предыдущие классы, но действует при ширине экрана от 992 до 1199 пикселей (настольные компьютеры с низким разрешением). Количество колонок занимаемых каждым блоком смотрите выше.
- col-*-push-* и col-*-pull-* – данные классы задают смещение блоков влево (pull) и вправо (push) относительно их текущей позиции на указанное количество частей. Так же необходимо указать на каких экранах будет происходить смещение.
В нашем случае мы смещаем блоки, предназначенные для меню вправо на 6 частей при ширине экрана от 768 до 991 пикселя (col-sm-push-6), а блок с логотипом так же на 6 частей, но влево (col-sm-pull-6). Таким образом, мы меняем приоритет вывода блоков на экран, не затрагивая при этом код разметки.
Возможно, Вам стало интересно, почему смещение происходит именно на 6 блоков влево (в случае с логотипом) на планшетах и на 7 блоков для компьютеров. Тут все просто, мы хотим увести наш логотип в самый левый край, для этого необходимо его сдвинуть на разницу общей ширины контейнера и самого блока. В нашем случае для планшетов это 12-6=6, а для компьютеров 12-5=7.
Ситуация с блоками меню несколько иная, так как мы в данном случае смещаемся вправо, то необходимо учитывать ширину левых блоков, а если ширина левого блока на планшетах у нас состоит из 5 частей (блок с логотипом), следовательно первый блок с меню надо подвинуть на 5 частей вправо. Надеюсь, объяснил доступно.
Общий код для футера у нас должен получиться вот таким:
<div id="footer">
<div class="ft-top">
<div class="ft-top-cont">
<div class="ft-menu-1 col-xs-12 col-sm-3 col-md-3 col-sm-push-6 col-md-push-5"><jdoc:include type="modules" name="position-4" style="xhtml" /></div>
<div class="ft-menu-2 col-xs-12 col-sm-3 col-md-4 col-sm-push-6 col-md-push-5"><jdoc:include type="modules" name="position-5" style="xhtml" /></div>
<div class="ft-logo col-xs-12 col-sm-6 col-md-5 col-sm-pull-6 col-md-pull-7">
<img alt="Joom4all.ru - создай свой сайт с нуля!" src="<?php echo $this->baseurl . 'templates/'. $this->template . '/images/ft-logo-min.png'?>">
<p id="ft-text"><span>JOOM4ALL - СОЗДАЙ СВОЙ САЙТ С НУЛЯ</span></p>
</div>
</div>
</div>
<div class="ft-bottom">
<div class="ft-bottom-cont">
<p>Все права защищены © <?php echo date('Y') ?></p>
</div>
</div>
</div>
Осталось применить минимальные стили оформления:
.ft-logo, .ft-menu-1, .ft-menu-2 {padding-top: 21px;}
.ft-logo img {display: block;}
p#ft-text {margin: 15px 0 27px 0; font-weight: 700;font-size: 20px;}
.ft-top{overflow: hidden; background-color: #f3ece8;}
.ft-bottom{height: 70px; background-color: #222222;}
.ft-bottom-cont p {color: #fff;text-align: center;height: 70px;line-height: 70px;}
В результате на устройствах с большим экраном наш футер выглядит следующим образом:
А на мобильных устройствах с шириной экрана менее 768 пикселей футер выглядит уже иначе:
Остается внести заключительные штрихи и оформить все это дело при помощи CSS. Как видите, нет ничего сложного, благодаря Bootstrap можно легко и просто решить практически любые задачи в кратчайшие сроки.
