В первой части статьи о создании шаблонна для Joomla мы уже установили каркас и определили позиции модулей. В этой части мы будем придавать красоту нашему шаблону то-есть поработаем с CSS файлом, стилизуем меню навигации.
1-Header
Начнем с того что вставим фоновое изображение в блок header (960 х 250px) и удалим рамку которая уже не нужна(фоновое изображение подберите сами какое нравиться ).
#header{ width: 960px; height: 250px; margin-bottom: 5px; background-image: url(../images/header_bg.png); background-repeat: no-repeat; }
Теперь если вы хотите чтобы имя вашего сайта которое устанавливается администраторской Joomla, выводилось в “шапке” вашего шаблона, надо в файле index.php в блок header вставить следующее.
GetCfg метод относится к классу JApplication и может вставлять значения параметров конфигурации Joomla (глобальной конфигурации). Полный список параметров которые можно передавать в этот метод вы можете найти в документации Joomla. Ну и для примера если мы захотим вывести информацию к какой базе данных сейчас подключена Joomla пишем так:
echo $mainframe->getCfg('db');
Теперь придаём стили div блоку title где у нас выводиться имя сайта.
#title h1{ padding-left: 30px; padding-top: 50px; font-size: 25px; float: left; }
Добавляем позицию для вывода модуля поиска по сайту, он будет находиться в шапке нашего шаблона. Если помните у нас была неиспользованная позиция user1, теперь эта позиция буде использоваться для вывода формы поиска, хотя это и необязательно что только для поиска можно баннер повесить.
Теперь если хотите можете проверить, вставить модуль поискав позицию user1 как это сделать думаю знаете.
Позиционируем с помощью таблицы стилей форму поиска в право ниже заголовка.
#input_search{ float: right; width:200px; margin-right: 10px; margin-top: 220px; }
Зададим немного красоты для самой формы.
#input_search input{ width: 200px; border: 1px solid navy; color: gray; background-color: #F2FFFF; }
На данный момент результат такой.
2. Навигация
И так сейчас мы приступим к стилизации меню, но прежде надо посмотреть как Joomla структурирует меню навигации. В исходном коде страницы смотрим.
- HOME
- Page 1
- Page 2
- Page 3
Как вы видите это ненумерованный список и к активному элементу меню добавляется класс «active item11″
Улучшение эстетического аспекта нашей навигации
Для начала уберём точечные маркеры у списка и зададим небольшую отбивку от левого поля.
#navigation ul{ list-style-type: none; padding-left: 5px; }
Теперь изменим пункты меню, зальем серым цветом и разделим их пунктирной линией, ну и другие аспекты стиля зададим.
#navigation li a:link, #navigation li a:visited{ padding: 10px; display: block; color: #523F36; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: bold; width:150px; background-color: #E2DEE0; border-bottom: 1px dashed gray; text-decoration: none; }
Теперь ссылка при наведении на неё курсора, будет изменяться светло серый цвет
#navigation li a:hover{ background-color: #E6E6E6; }
Далее стиль для активной ссылки
#navigation li.active a{ background-color: #E6E6E6; }
И наконец пунктирная линия разделяющая пункты меню, для этого используем класс item1.
#navigation li.item11 a{ border-top: 1px dashed gray; }
Вот результат
Блок контента
Теперь давайте перейдём к блоку content, мы начнём с того что установим отступы, стиль шрифта текста и цвет.
#content{ width: 746px; margin-left: 10px; font:14px "Trebuchet MS", Arial, Helvetica, sans-serif; color: gray; float: right; margin-bottom: 5px; }
Уберите в администраторской части иконки печати,PDF и отправки на email, оставив только название.
Придадим стили названию статьи, для этого опять в браузере открываем исходный код страницы для просмотра как joomal сгенерировала код для названия:
Начнем с того что вставим фоновое изображение в блок header (960 х 250
| Content 1 |
Как вы видите это таблица с классом «contentpaneopen«, теперь можно задать ему стиль в файле css.
#content td.contentheading{ font-size: 20px; font-weight: bold; }
И вот результат:
Переходим к Footer
Немного поработаем с нижнем колонтитулом, информация которая будет размещаться здесь может быть выведена разными способами: с помощью модуля который выводит произвольный HTML код или просто прописать что либо в самом файле шаблона(index.php). В этом примере используем второй вариант, но для начала пропишем стили для блока footer.
#footer{ width: 960px; background-color: #4682B4; clear: both; text-align: center; color: White; font-size: 10px; padding: 10px; }
Результат
На этом можно закончить, поэкспериментируйте сами со стилями, подбавляйте ещё позиции для модулей, главное что-бы вам был понятен механизм создания шаблона для CMS Joomla.