Мы завершаем создание собственного шаблона, на сей раз нам необходимо внести заключительные штрихи – добавить необходимые шрифты, изменить внешний вид меню в правой части, а так же выявить возможные недочеты при просмотре на мобильных устройствах.
Для начала определимся со шрифтами, их у нас в макете целых 4 разновидности. Загружать все четыре шрифта я не стану, мне не нужен лишний объем страниц сайта, ограничусь, пожалуй, тремя основными – Noteworthy, Helvetica-Regular и Roboto-Condensed.
Подгружаем новые шрифты
Как добавить новые шрифты на сайт мы уже говорили в предыдущей статье, поэтому не вижу смысла повторно описывать данный процесс. Если кратко, то нам необходимо положить нужные шрифты в папку fonts нашего шаблона и подключить их в файле стилей при помощи вот такого выражение:
@font-face {
font-family: 'Roboto';
src: url('../fonts/Roboto-Condensed.eot');
src: local('☺'), url('../fonts/Roboto-Condensed.woff') format('woff'), url('../fonts/Roboto-Condensed.ttf') format('truetype'), url('../fonts/Roboto-Condensed.svg') format('svg');
font-weight: normal;
font-style: normal;
}
После чего данный шрифт можно применить к любому из элементов страницы стандартным способом:
p {font-family:'Roboto', sans-serif;}
Таким образом, мы можем использовать совершенно любые шрифты на нашем сайте, но не стоит загружать слишком много шрифтов, это может снизить производительность сайта. Оптимальным вариантом будет 2-3 шрифта.
Оформляем правое вертикальное меню
Теперь приступим к оформлению дополнительного вертикального меню в правой части страницы. Его стандартный вид не слишком презентабельный:
Переопределяем стиль модуля меню
Для начала мы сделаем вот что – переопределим стиль модуля меню, прошу не путать с альтернативным макетом. Для чего? Как минимум для того чтобы меню отличалось от других модулей (модуля последних и популярных новостей). Кроме того переопределив стиль модуля мы сможем заменить стандартные теги заголовка модуля семантически нейтральным тегом span.
Как переопределять стиль вывода модуля мы уже говорили в статье посвященной конструкции jdoc:include и именно там подробно рассмотрели данный процесс. Не вдаваясь в подробности, я просто покажу мой код файла отвечающего за стиль модуля:
После того как стиль будет переопределен, переходим в настройки модуля меню и на вкладке «Дополнительные параметры» указываем вновь созданный нами стиль, в моем случае его имя RightMenu.
Оформление правого вертикального меню
Осталось оформить наше меню при помощи CSS. Сложностей с этим быть не должно, открываем файл template.css и пишем в него следующие стили:
/*--Меню с пунктами--*/
span#menutitle {/*Заголовок*/
font-size: 16.667px;
font-family: 'Roboto', sans-serif;
color: #000;
font-variant: small-caps;
}
div#menu-content {border-left: 2px solid #7a7a7a;}/*Рамка слева*/
div#menu-content>ul>li>a {/*Пункты меню первого уровня*/
font-size: 16.667px;
font-family: 'Helv-Regular', sans-serif;
color: #000;
margin: 0 0 0 14px;
padding: 5px;
border-bottom: 1px solid #bababa;
}
div#menu-content>ul>li>ul {margin-top: 10px;padding: 0 0 0 15px;}/*Меню второго уровня*/
div#menu-content>ul>li>ul>li{list-style: none;margin-bottom: 3px;}
div#menu-content>ul>li>ul>li a{font-size: 12.5px;font-family: "Helv-Regular";color: #000;display: block;padding-left: 15px;}
div#menu-content>ul>li>ul>li:before{
content: url(../images/arrow-min.png); /*Загружаем изображение стрелочки для вложенных пунктов меню*/
display: block;float: left;margin-top: 2px;
}
div#menu-content>ul>li>ul>li.current a {color: #00bd01;}
div#menu-content>ul>li.active>a {color: #7a7a7a;}
div#menu-content>ul>li>ul>li a:hover {text-decoration: none;color: #7a7a7a;}
Сохраняем изменения, в результате наше дополнительное вертикальное меню стал гораздо лучше:
Оформление пагинации на сайте
Теперь пришло время разобраться с оформлением пагинации на сайте. По умолчанию она выглядит просто ужасно:
Для начала давайте в пагинации избавимся от надписи «Страница 1 из 3» (количество страниц может быть разным). Для этого в общих настройках материалов (Система -> Общие настройки -> Материалы) переходим на вкладку «Общие настройки» и скрываем отображение результатов разбиения на страницы:
После того как мы избавились от не нужной надписи можно приступать к оформлению пагинации. Если честно, то нам не придется писать, какие либо дополнительные стили для её оформления, за нас это уже сделали разработчики Bootstrap. А раз уж наш шаблон использует данный фреймворк, тогда не будем изобретать велосипед, а просто добавим необходимые классы в разметку пагинации.
Для этого необходимо внести определенные поправки в файл pagination.php, а точнее добавить к ненумерованному списку <ul> класс pagination.
Чтобы не писать весь код файла (он получается довольно громоздким) вы можете скачать данный файл и положить его в папку html текущего шаблона.
Теперь можно посмотреть на результат проделанной работы:
Останется только расположить пагинацию по центру страницы, а при желании оформить в соответствие с цветами сайта.
Проверка адаптации под мобильные устройства
Если честно я просмотрел практически все страницы сайта на различных устройствах и не заметил особых искажений. Оно и понятно, ведь мы использовали Bootstrap, следовательно, все содержимое страниц должно отображаться корректно на любых устройствах.
Но некоторые недочеты все же были, по большей части эти недочеты касались изображений, которые несколько неадекватно сжимались (или не сжимались вовсе) по ширине страницы. Чтобы это исправить, необходимо определить при каком разрешение экрана изображения начинают искажаться и при помощи меди запросов добавиться следующие свойства:
.item-page img {
width: 100%;
height: auto !important;
}
Кнопка «наверх» при помощи JavaScript
Заключительным штрихом будет добавление кнопки ведущей в начало страницы. Причем надо сделать так, что если страница не пролистывалась то кнопку видно не будет, а как только пользователь начал скролить страницу кнопка будет появляться.
Процесс создания подобной кнопки уже был достаточно подробно описан в статье посвященной редактированию стандартного шаблона Joomla 3 (на примере шаблона Protostar). Поэтому повторяться не вижу смысла. Все что нам необходимо сделать, это оформить кнопку при помощи CSS, затем написать небольшой скрипт и подключить его к нашему шаблону.
Исправление ошибки связанной с плагином mAvik Thumbnails
В процессе проверки работоспособности шаблона я обнаружил очень неприятную ошибку – изображения, которые обрабатываются плагином mAvik Thumbnails, после нажатия по ним не разворачиваются в модальном окне, а открываются на новой странице. Согласитесь неприятная ситуация.
Как известно плагин mAvik Thumbnails использует для модальных окон несколько библиотек – jQuery, Magnific Popup, Mootools. В зависимости от выбранного типа всплывающего окна используется та или иная библиотека. Но когда мы подключали новые библиотеки фреймворка Bootstrap, все старые за ненадобностью были благополучно отключены плагином joomla options master.
Так вот, если для всплывающего окна будет использоваться jQuery, тогда при загрузке страницы сайта мы получим следующую ошибку Uncaught ReferenceError: jQuery is not defined. Причем ошибка эта будет даже в том случае, если мы эту библиотеку подключим.
В чем проблема? Почему появляется ошибка Uncaught ReferenceError: jQuery is not defined? Все дело в том, что возможности jQuery используются до их объявления. Как это исправить? Очень просто, необходимо подключить jQuery до вывода head’а страницы:
<head> <!-- jquery --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js" integrity="sha384-THPy051/pYDQGanwU6poAc/hOdQxjnOEXzbT+OuUAFqNqFjL+4IGLBgCJC3ZOShY" crossorigin="anonymous"></script> <!—Выводим head --> <jdoc:include type="head" /> </head>
Точно такая же проблема будет с вышеописанной кнопкой «наверх», другими словами, если кнопка не работает, необходимо подключать jQuery, как показано выше.
Если для всплывающего окна вы используете Magnific Popup, тогда подключаем соответствующую библиотеку, но на этот раз это можно делать в самом конце страницы, перед закрывающимся тегом </body>:
<!-- Magnific Popup--> <script src="<?echo($this->baseurl . '/templates/' . $this->template . '/js/jquery.magnific-popup.min.js')?>"></script> </body>
Конечно, плагин стоит предварительно скачать и положить в папку js текущего шаблона.
На этом я завершаю данную статью, по мере обнаружения дополнительных ошибок буду отписываться. Все интересующие Вас вопросы можно оставлять в комментариях.
