Уроки Joomla! 1.5

---

Урок 10. Применение шаблона к сайту. Настройка шаблона посредством редактирования CSS-файлов

Цели:

• Научить настраивать отображение модулей CMS Joomla! при помощи разметки CSS-файлов.

Задачи:

1. Сформировать умения по CSS-разметке.
2. Сформировать знания по настройке стандартных модулей при помощи разметки CSS-файлов.

В предыдущей теме был создан шаблон для сайта управляемого с помощью CMS Joomla! 1.5, но информация в нем отображается не совсем красиво. Чтобы этого избежать его необходимо отредактировать, делается это через файлы с каскадными таблицами стилей (CSS-файлы шаблона).

Прежде чем приступить к редактированию шаблона, необходимо создать и расположить дополнительные модули в Joomla!, а именно: модуль для поиска, модуль верхнего меню и модуль авторизации.

Создание дополнительных модулей

1) Запустите Денвер, нажав по значку Start Denwer на рабочем столе.

2) Зайдите в административный раздел сайта Яхт Клуба.

3) Перейдите в раздел Расширения – Менеджер модулей.

4) Найдите в списке модуль с названием Поиск, если его нет, то создайте его, нажав по соответствующей кнопке на панели управления в менеджере модулей.

5) Отройте модуль для редактирования, для этого выделите его галочкой и нажмите на кнопку Изменить, и настройте его как показано на рисунке 10.1. По окончании настройки нажмите кнопку Сохранить.

Рисунок 10.1. Настройка модуля для поиска

6) Проверьте, отобразился ли модуль поиска на сайте, нажав на кнопку Просмотр в меню Joomla.

7) Найдите в списке менеджера модулей модуль с названием Верхнее меню, если его нет, то создайте его, нажав по соответствующей кнопке на панели управления в менеджере модулей.

8) Отройте данный модуль для редактирования, для этого выделите его галочкой и нажмите на кнопку Изменить, и настройте его  как показано на рисунке 10.2. В разделе Расширенные параметры проверьте, что в поле Суффикс класса меню стоит значение «-nav». По окончании настройки нажмите кнопку Сохранить.

Рисунок 10.2. Настройка модуля для верхнего меню

9) Удалите лишние модули, оставив лишь: Главное меню, Авторизация, Мой Баннер, Поиск, Мое меню и Верхнее меню.

Для этого отметьте в списке удаляемые пункты галочкой и нажмите по кнопке Удалить.

10) Назначьте позицию модулю Авторизация - right.

11) Проверьте изменения на сайте.

Настройка модуля «Поиск»

12) Откройте сайт в браузере, набрав - http://yacht-club/

13) Откройте файл template.css, располагающегося в папке шаблона - Z:/home/yacht-club/www/templates/yacht-template/css.

14) Найдите часть css-кода посвященного идентификатору poisk.

15) Дополните его следующими строками:

padding:5px;
z-index:1;

Тем самым буден задан отступ со всех краев в 5px от содержимого блока и расположение блока поверх остальных (Рис. 10.3).

Рисунок 10.3. CSS-код, относящийся к идентификатору "poisk"

16) Обновите сайт в окне браузера, просмотрите сделанные изменения.

Настройка модуля «Верхнее меню»

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

17) Зайдите в административный раздел сайта Яхт Клуба.

18) Перейдите в раздел Все меню – Менеджер меню.

19) Удалите все меню-разделы кроме: Главное меню, Верхнее меню (Рис. 10.4).

Рисунок 10.4. Менеджер меню

20) Перейдите в раздел Все меню – Верхнее меню

21) Добавьте следующие пункты меню:

• Главная (скопировав данный пункт из раздела «Главное меню») - назначьте этот пункт меню по умолчанию.
• Галерея (тип: Стандартный шаблон материала; материал: Яхты и Фригаты (данный материал был создан в теме №)).

22) Проверьте отображение данных пунктов на сайте.

23) Откройте файл navigation.css, располагающегося в папке шаблона - Z:/home/yacht-club/www/templates/yacht-template/css.

24) Добавьте в конец файла следующий CSS-код и объясните его пункты:

/* Верхнее меню */
ul#mainlevel-nav li{display:inline-block}
a.mainlevel-nav {
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
color:#96BCE1;
font-size:16px;
font-weight:800;
padding:0 5px;
}

.mainlevel-nav:hover {
background:url(../images/top-menu-center.png) repeat-x 100%;
padding-top:15px;
padding-bottom:15px;
border:solid thin;
cursor: pointer;
}

25) Откройте файл index.php, располагающегося в папке шаблона - Z:/home/yacht-club/www/templates/yacht-template.

26) Отредактируйте строку - <table id="toptable" cellspacing="0" cellpadding="0" align="center" width="600">, удалив из нее размер таблицы, тем самым размер верхнего будет меняться от его наполняемости.

27) Сохраните все файлы, обновите сайт в окне браузера. Результат должен быть схожим с рисунком 10.5.

Рисунок 10.5. Результат настройки верхнего меню

Настройка модуля «Главное меню»

28) Скопируйте из папки дистрибутива (/lab_10/) файлы изображений для меню в папку с шаблоном Z:/home/yacht-club/www/templates/yacht-template/images.

29) Откройте navigation.css, располагающегося в папке шаблона - Z:/home/yacht-club/www/templates/yacht-template/css.

30) Для списка ul.menu задайте list-style изображением circle.gif (Рис. 10.6).

Рисунок 10.6. Настройка пунктов меню

31) Для ссылок меню задайте цвет и уберите подчеркивание, изменив значения для класса «.menu a», а при наведении на ссылку сделаем её текст подчеркнутым:

.menu a {
color: #96BCE1;
text-decoration: none;
}

.menu a:hover {
text-decoration: underline;
}

32) Далее необходимо задать параметры для подпунктов меню. Дополните файл следующим фрагментом кода:

.menu ul {
display: block;
list-style: url(../images/circle2.gif);
padding-left: 15px;
line-height: 16px;
font-size: 12px;
font-weight: 500;
}

33) Для отображения того, открыто меню с вложением или нет, используем изображения плюса и минуса.

Чтобы это осуществить необходимо:

• в настройках модуля Главное меню (Расширения – Менеджер модулей – Главное меню) изменить значение в параметре Всегда показывать вложенные подпункты установив его в положение Нет;
• в конце файла navigation.css измените значения для li.parent и li.parent.active:

li.parent {
    list-style: url(../images/plus.gif);
    }
li.parent.active {
    list-style: url(../images/minus.gif);
    }

34) Сохраните все файлы, обновите сайт в окне браузера. Результат должен быть схожим с рисунком 10.7.

Рисунок 10.7. Результат настройки главного меню

Настройка модуля «Авторизация»

35) Откройте файл forms.css, располагающегося в папке шаблона - Z:/home/yacht-club/www/templates/yacht-template/css.

36) Дополните в конец файла следующие строки:

/*Login*/
#form-login { padding-right:10px; }
#form-login ul { margin:0px; text-align:left; }
#form-login ul li a {
color: #666;
margin: 0px;
font-size: 11px;
text-decoration: none;
padding: 0px 5px;
}

#form-login ul li a:hover { text-decoration:underline; }
#form-login-username { font-size:11px; text-align:right; margin:1px; padding:1px; }
#form-login-password { font-size:11px; text-align:right; margin:1px; padding:1px; }
#form-login-remember { font-size:11px; text-align:right; margin:1px; padding:1px; }

.input { text-align:center; }
input.button { margin: 3px; padding: 2px 5px; }

Тем самым буден заданы настройки для модуля авторизации.

37) Обновите сайт в окне браузера, просмотрите сделанные изменения.

Можно заметить, что модуль авторизации находится не по центру.

38) Для исправления этого недочета необходимо:

• указать стиль table для отображения модулей в позиции right.

Делается это в файле index.php (располагающегося в папке шаблона - Z:/home/yacht-club/www/templates/yacht-template/). Откройте его для редактирования, найдите строку: <jdoc:include type="modules" name="right" style="none" /> и измените в ней значение для style с none на table.

• добавить строку, в файл forms.css, описывающую отображение модуля со стилем table:

.moduletable { color: #96BCE1; margin-left: auto; margin-right: auto; }

Для проверки набранного вами кода, сравните его с рисунком 10.8.

Рисунок 10.8. CSS-код для настройки модуля «Авторизация»

39) Сохраните все файлы, обновите сайт в окне браузера. Результат должен быть схожим с рисунком 10.9.

Рисунок 10.9. Результат настройки модуля «Авторизация»

Настройка модуля «Баннер»

40) Откройте файл modules.css, располагающегося в папке шаблона - Z:/home/yacht-club/www/templates/yacht-template/css.

41) Найдите часть css-кода для div.banneritem.

42) Дополните его стилем выравнивающим текст по центру:

div.banneritem { text-align:center; }

43) Сохраните все файлы, обновите сайт в окне браузера. Результат должен быть схожим с рисунком 10.10. 

Рисунок 10.10. Результат настройки модуля «Баннер»

Настройка отображения контента

Текст, отображаемый на сайте, практически не возможно прочесть, так как он сливается с фоном. Необходимо его откорректировать его, указав: цвет, стиль, выравнивание, красные строки, размеры шрифтов и т.п.

44) Откройте файл template.css, располагающегося в папке шаблона - Z:/home/yacht-club/www/templates/yacht-template/css.

45) Найдите часть css-кода посвященного форматированию заголовков (h1-h6).

46) Измените цвет текста для всех заголовков, сменив его с #000 на #96BCE1. Укажите выравнивание заголовков по центру, добавив в каждый из них код:

text-align:center;

47) Для корректного отображения заголовков статей необходимо добавить стили для: заголовка компонента, заголовка контента и панели контента в которой располагается заголовок. Добавьте в файл template.css следующий код:

/*Заголовок компонента*/
.componentheading {font-size:1.6em;line-height: 0.8em;font-weight: 900;color: #96BCE1; text-align:center;}

/*Заголовок контента*/
.contentheading {font-size:1.4em;line-height: 1.0em;font-weight: 900;color: #96BCE1;text-align:center; }

/*Панель контента*/
.contentpaneopen { width:100%;}

48) Измените стиля для абзацев (тег - <p></p>).

Для этого добавьте в файл template.css следующий код:

/*Абзац*/
p { font-family:Verdana, Geneva, sans-serif;
    font-size:13px;
    text-align:justify;
    text-indent:25px;
    margin:0 10px;
}

Единственное что осталось еще доработать в контенте - отображение ссылок.

49) Добавьте в файл template.css следующий код:

a {color:#4C98E0; text-decoration:underline;}
/* Clears Divs */
.clear{clear: both;}

Чтобы указать цвет для всех шрифтов, используемых на сайте, в определение стиля для тега <body> необходимо добавить значение цвета - color: #FFF;. Результат изменений кода представлен на рисунке 10.11.

Рисунок 10.11. CSS-код используемый для контента

50) Сохраните все файлы, обновите сайт в окне браузера. Результат должен быть схожим с рисунком 10.12.

Рисунок 10.12. Результат настройки отображения контента

Настройка модуля «Футер»

Прежде всего, данный модуль необходимо создать, для этого:

51) Зайдите в административный раздел сайта Яхт Клуба.

52) Перейдите в раздел Расширения – Менеджер модулей.

53) Нажмите по кнопке Создать.

54) Выберите тип модуля - Произвольный HTML-код.

55) В параметрах укажите:

• Заголовок: Футер
• Показывать заголовок: Нет
• Включен: Да
• Позиция: footer;
• Доступ: Все
• Меню: Все
• Произвольный текст: укажите свою фамилию, номер группы и текущий год

56) После ввода всех значений нажмите по кнопке Сохранить

57) Проверьте, что модуль отобразился на сайте в нижней его части.

58) Для того чтобы текст располагался по центру необходимо добавить в файл template.css следующий код:

#foot, #foot p { text-align: center; }

59) Сохраните все файлы, обновите сайт в окне браузера. Результат должен быть схожим с рисунком 10.13. 

Рисунок 10.13. Результат настройки модуля «Футер»

На этом данная тема закончена, в следующей будет рассмотрено наполнение сайта материалом.

Резюме

• Для изменений отображения модулей на сайте используют CSS-файлы.
• Чтобы облегчить поиск стилей в CSS-файле его разбивают на несколько файлов.
• Включить один CSS-файл в другой можно через команду «@import url(путь_к_css_файлу);».

Контрольное задание

1. Добавьте отображение недостающих модулей в Вашем проекте.
2. Настройте оформление проекта аналогичным образом, используя CSS-разметку.

Вопросы для самоконтроля

1. Каким образом осуществляется включение одного CSS-файла в другой?
2. Как указать позицию модуля на сайте?
3. Через что можно задавать параметры в CSS-файлах для конкретных объектов?
4. Что позволяет задавать параметр margin, а что padding?
5. Какие CSS-параметры наиболее часто используются для форматирования текста?
6. Можно ли задавать одни и те же параметры нескольким классам?