У нас есть базовая структура макета страницы. Теперь мы хотим сделать так, чтобы этот макет соответствовал придуманному нами дизайну, а не использовал исключительно цвета и шрифты по умолчанию. В Twitter Bootstrap для генерации сложных стилей используется версия CSS под названием LESS. Однако в нашем простом шаблоне мы будем использовать стандартный CSS-код.
Создайте пустой файл с именем custom.css и сохраните его в папке ess вашего шаблона. После этого добавьте новую таблицу стилей в index.php после таблицы template.css.
<?php $doc->addStyleSheet('templates/'.$this->template.'/css/custom.ess'); ?>
Ссылку на новый файл необходимо добавлять после ссылки на файл templat так как один из принципов каскадных таблиц стилей гласит: «то, что наход в коде далее, переопределяет то, что находится ранее» (это и есть каскад).
Мы выбрали изображение для заголовка сайта и с помощью сетевого инструмента Adobe Kuler проанализировали цвета этой фотографии. Основываясь на полученном результате, мы выбрали фоновый цвет (#5Е7339), представляющий собой оттенок зеленого, а также взяли два соседних оттенка зеленого, #A3BF72 и #95BF4C. Кроме того, нашли комплементарный цвет, #663973.
Мы начали с самого простого. Добавили стили для фонового цвета и основного цвета текста, а также определили ширину контейнера, которая будет использоваться всегда, вне зависимости от того, что мы добавляем на страницу:
body {
colon: black;
background-color: #5E7339;
}
.container {
background-color: white;
width: 980px;
}
После этого мы добавили заголовок изображения, а также цвета и шрифты для заголовков и ссылок:
.header {
background-color: #040404;
min-height: 180рх;
background-image: url('/../images/orange_leaves.jpg');
}
a, hi, h2 {
font-family: lucida sans;
color: #A3BF72;
}
h3 {
font-family: arial;
font-size: 1.5em;
}
На следующем этапе мы поменяли некоторые другие детали стилизации конкретных элементов, переопределив для этого стили из файла Bootstrap. Для этого мы воспользовались браузерным инструментом. Самые известные из таких инструментов — это Firebug, работающий в браузере Firefox, и Developer Tools для Chrome. Указанные инструменты позволяют в подробностях изучить структуру интересующих вас частей страницы, чтобы определить, какие стили управляют их отображением.
Верхнее меню контролируется классом nav, поэтому мы модифицировали его, добавив небольшое поле слева. Мы также добавили стиль для ссылок в меню (. nav > li > а). В результате на странице специально для ссылок меню используется собственный цвет:
.nav {
margin-left: 5рх
}
.nav > li > а {
color: #5Е7339;
}
•nav-pills > .active > a, .nav-pills > .active > a:hover {
color: white;
background-color: #663973;
}
Мы открыли Менеджер модулей (Module Manager) и отредактировали верхи меню: на вкладке Дополнительные параметры (Advanced Options) в поле Суффк класса меню (Menu Class Suffix) ввели значение, состоящее из пробела и кода па pills (пробел в данном случае очень важен — без него CSS будет работать п другому). Благодаря этому мы не только добавили фиолетовый фоновый цвет который можно увидеть, когда ссылка меню активна (соответствующая стран ца отображается на экране) или когда пользователь подводит к ней указате мыши, но также изменили расположение меню: теперь оно выводится в виде горизонгальной строки, а не в виде столбца.
В настоящий момент в правом столбце у нас три модуля, и все они занимают позицию position-7. Мы сняли с публикации модуль Вход в систему (Login) и поместили баннер в позицию position-8. Также мы отредактировали наш индексный файл: в разделе, где описывается position-8, мы добавили использование кла< Bootstrap well, который можно увидеть в шаблоне Protostar. Этот класс будет применяться независимо от того, какой модуль выводится в данной позиции:
<div class = "well">
<jdoc:include type="modules" name="position-8" />
</div>
Затем мы отредактировали настройки модуля Умный поиск (Smart Search), переключив параметр Заголовок поля поиска (Search Field Label) на вкладке Дополтельные параметры (Advanced Options) в положение Скрыть (Hide). Мы хотим, чтобы название нашего сайта отображалось белыми буквами поверх изображения заголовка. Для этого нам снова понадобилось добавить нескол] строк кода РНР и CSS. К блоку PHP-кода в файле index.php мы добавили следующие строки:
Jconfig = JFactory: :getConfigQ; $sitename = $config->get('sitename');
Здесь говорится, что название сайта необходимо извлечь из метаданных, которые мы создали в Общих настройках (Global Configuration) веб-сайта. После этого мы немного изменили блок <div> для заголовка, добавив еще один div, который отвечает за отображение названия сайта:
<div class="spanl2 header">
<div class="sitename">
<?php echo htmlspecialchars($config->get(' sitename')); ?>
</div>
<jdoc:include type="modules" name="position-ll" />
</div>
В таблице стилей CSS мы определили стили для данного класса:
.sitename {
color: white;
font-size: 80рх;
font-family: Georgia;
margin-top: 30px;
margin-left: 20px;
}
Наконец, нам осталось выполнить небольшую корректировку стилей CSS, чтобы сделать ширину модуля Навигатор сайта (Breadcrumb) равной ширине изображения в заголовке:
.breadcrumb {
width: 920рх;
margin-left: 20рх;
padding-right: 5рх;
}
ul.breadcrumb {
width: 880px;
}