Создаем шаблон для Joomla с нуля. Часть 5, заключительная

Вернуться
Опубликовано: 20.03.2015 г.

В прошлой части материала мы закончили всё визуальное оформление, кроме вертикального и горизонтального меню сайта. По этому сейчас начнем оформление.

Создаем оформление меню

Для простоты и удобства всё, что связано с меню, будет вынесено в отдельный файл – menu.css. Данный файл следует поместить в ту же папку, куда и основной CSS-файл, тогда движок сможет с ним полноценно работать. Кроме того, нужно сообщить Joomla, что мы добавляем новый стилевой файл. Делается это добавлением строчки в наш основной файл шаблона index.php:

Для работы с меню будет использоваться рассмотренный ранее .moduletable, который упрощает процесс написания стилей и их применения. Начнем мы с горизонтального меню сайта. Для него будет создан отдельный суффикс _topmenu. Таким образом, CSS-селектор будет выглядеть следующим образом:

Здесь вы при помощи обычных правил задаете оформление на свой вкус. Не забывайте про шрифты, цвета, выравнивание текста, границы, их толщину и цвет. Делайте всё на свой вкус, в качестве примера возьмите template.css, здесь всё аналогично.

Точно так же выполняется и настройка вертикального меню. Конечно, будет отличаться селектор, в данном случае он будет выглядеть так:

Здесь также понадобится задать все необходимые стили, касающиеся оформления – цвета, шрифты, их размеры и т.д. Также вертикальное меню отличается тем, что содержит заголовки, поэтому нужно добавить для них селектор h3:

Для заголовков задаются отступы, шрифт и его начертание, фон. Закончив с оформлением вертикальных списков, остается только сохранить файл menu.css и наслаждаться результатом. По сути, это последняя глобальная доработка нашего шаблона, все остальные – это мелкие правки для улучшения юзабилити.

Добавляем собственный favicon

Для большей красоты и «солидности» можно добавить в шаблон свой собственный favicon, то есть, иконку, которая будет отображаться во вкладке браузера с открытой страницей. Также он отображается в поисковой выдаче. Если его не добавлять, будет отображаться стандартный значок Joomla, что автоматически превращает сайт в «недоделанный». Для того чтобы добавить иконку, нужно вначале ее подготовить. Для этого понадобится графический файл с разрешением 16х16 пикселей с особым расширением .ico. Его можно подготовить самостоятельно при помощи любого графического редактора (например, Photoshop, Paint.net), а также воспользоваться одним из онлайн-сервисов.

Когда файл favicon.ico готов, он прописывается, как и все другие файлы, в templateDetails.xml:

<filename>favicon.ico</filename>

Кроме того, для вывода иконки данные необходимо занести в index.php:

Сам файл помещается в корень папки с шаблоном.

Ссылка на главную страницу

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

Для того, чтобы сделать это, требуется внести небольшие модификации в наш главный файл шаблона index.php. Нам нужно найти кусок кода, который описывает логотип, и заменить его на такой же, но со ссылкой. Искать в коде нужно вот такой кусок: <div id="logo">. Теперь осталось заменить этот кусочек кода на следующую строку:

Понятно, что вместо sitename.com указывается адрес заглавной страницы нашего сайта.

Поздравляем! Вы создали свой первый шаблон для Joomla!

Создаем шаблон для Joomla с нуля. Часть 1

Создаем шаблон для Joomla с нуля. Часть 2

Создаем шаблон для Joomla с нуля. Часть 3

Создаем шаблон для Joomla с нуля. Часть 4

1129 0

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *