В этом уроке мы научимся управлять внешним видом вашего сайта.

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

1) Все объекты интернет-страницы: текст, рисунки, заголовки, ссылки помещены в теги, например тег <p></p> формирует абзац. В языке HTML изначально не было средств показать, как должен выглядеть объекты на экране браузера. Технология CSS призвана решить эту проблему.

2) В css-файле хранится стиль, т. е. набор свойств для выбранных тегов. Строится он следующим образом:

Использование таблиц стилей
Рис. 50. Использование таблиц стилей.

В этом фрагменте для тега <p> определены два свойства цвет и размер, каждому свойству назначено свое значение.

3) CSS-файл – это обычный текстовый документ, который вы создаете/правите в текстовом редакторе, например, Notepad++. Размер букв, порядок свойств, дополнительные пробелы и абзацы значение не имеют. Количество свойств, которыми вы можете управлять огромно, полный список смотрите в справочнике (ссылка в конце урока).

4) Задание стили для тегов, это здорово, но как быть, если ссылка в тексте и ссылка в главном меню задается одним и тем же тегом <a></a>, но выглядеть они должны по-разному. На выручку приходят «классы». Для любого фрагмента текста можно задать свой класс, например, так:

Использование классов
Рис. 51. Использование классов.

Если несколько различных классов имеют одинаковые стили, то они должны располагаться через запятую, вот так:
.class1,.class2,.class3 {свойство 1: значение; свойство 2: значение}

4) Для подключения файла с таблицами стилей вы должны добавить одну строку в свой html-файл

 Подключение css-файла
Рис. 52. Подключение css-файла.

Здесь файл находится в папке css, расположенной рядом с активным html-файлом.

2. Подключение css-файла в джумле.
В шаблоне «Joomla!» первым делом необходимо подключить файл с таблицами стилей. Для этого проверьте, что внутри шаблона существует папка css, а в ней находится файл с расширением css. Подключите его в xml-файле вашего шаблона (см. предыдущий урок), а также внесите изменения в файл index.php.

Подключение css-файла в «Joomla!»
Рис. 53. Подключение css-файла в «Joomla!».
комментарии к коду:

Здесь файл с таблицами стилей называется template_css.css, он расположен в папке css, которая в свою очередь находится внутри папки шаблона. Директива <?php echo $mosConfig_live_site;?> объяснит серверу, где искать сайт.
1. В шаблон добавлена еще одна директива <?php mosShowHead ();?> (строка 2). К таблицам стилей она не относится, но именно благодаря ней, в шаблон автоматически добавляется служебная информация, заголовок сайта, мета-теги, информация о кодировке. Обязательно используйте ее.

3. Создание нового стиля.
Предположим, вы используете шаблон, в котором еще не задан ни один стиль. Именно таким является шаблон master-class из прошлого урока. Для внесения изменений откройте css-файл в редакторе Notepad++ и добавьте в него следующие строки:
 

Создание стилей
Рис. 54. Создание стилей.

В приведенном фрагменте заданы стили:

  • основного текста (гарнитуру шрифта, его размер и левый отступ);
  • ссылки (цвет, подчеркивание);
  • активной ссылки (при наведении на нее курсора мыши изменяется цвет).

Сохранив файл и обновив экран браузера (клавиша F5) мы увидим, что внешний вид новостей изменился.
У вас также есть возможность изменить css-файл в административной части джумлы. Для этого в менеджере шаблонов выберите радио-кнопку слева от названия шаблона и нажмите кнопку «Правка CSS». Закончив редактирование, не забудьте нажать кнопку «Сохранить».

4. Изменение стиля у существующего класса.
Предположим теперь, что в шаблоне стилевой файл уже создан и его нужно изменить. В качестве примера будем использовать шаблон paranoia. Если вы откроете в редакторе Notepad++ его css-файл, то увидите пятьсот строчек кода! Какую из них нужно редактировать, чтобы изменить вид заголовка новости?

Изменяем заголовок
Рис. 55. Изменяем заголовок.

Для ответа на этот вопрос:

  • откройте html-код, который получает ваш браузер. Для этого в Internet Explorer вам нужно выбрать меню Вид – Просмотр html-кода. Откроется текстовый редактор, содержащий код вашей страницы.
  • В тексте нужно найти строку, соответствующую заголовку, для этого откройте окно поиска (Ctrl-F) и введите фрагмент текста, соответствующему заголовку. Проанализировав код, определяем, что за его внешний вид соответствует класс «contentheading».

Определение класса, соответствующего заголовку новости
Рис. 56. Определение класса, соответствующего заголовку новости.

  • Открыв в текстовом редакторе файл стиля, найдите строки, описывающие данный класс.
Поиск описания стиля для класса «contentheading»
Рис. 57. Поиск описания стиля для класса «contentheading».
  • Измените свойства и значения данного класса:
Новые свойства и значения класса «contentheading»
Рис. 58. Новые свойства и значения класса «contentheading».
  • Сохраните изменения и в браузере обновите окно с вашим сайтом (F5).

Измененный вид заголовка новости
Рис. 59. Измененный вид заголовка новости.

Изменив свойства класса, мы изменили оформление ВСЕХ заголовков на вашем сайте. Одновременно с этим «Joomla!» построена так, что схожие объекты (ссылки «Продолжение…», «Далее», «Назад») описываются разными классами в css-файле, и возможно вам придется проделывать описанный метод многократно.

5. Создание новых классов для модулей.
Если вы захотите изменить внешний вид ссылок главного меню, то обнаружите, что за их внешний вид отвечает класс «mainlevel», но этот класс отвечает за внешний вид ссылок любого меню. Как же изменять их внешний вид независимо друг для друга. Нам на помощь приходит следующий прием:

  • Откройте менеджер модулей вашего сайта и выберите модуль, внешний вид которого вы хотите изменить.
  • В поле параметры найдите поля «Суффикс класса…» введите в них какое-нибудь значение, например «_main». Сохраните изменение.
Измененный вид заголовка новости
Рис. 60. Измененный вид заголовка новости.

Если теперь посмотреть какой класс соответствует главному меню, то мы увидим «mainlevel_main». Иными словами мы создали имя для нового класса. Если теперь в css-файле мы опишем как он должен выглядеть, мы изменим внешний вид главного меню и не затронем при этом другие элементы интернет-страницы.

6. Несколько грустных слов в заключение.

  • Некоторые компоненты имеют собственные css-файлы. И изменять стили нужно в них.
  • Для изменения внешнего вида некоторых объектов на странице (например, заголовков модулей) требуется править программный код, а это совсем другая история.

Практическая работа:

  1. Теперь вы имеете знания для создания полноценного шаблона, содержащего таблицу стилей. Результатом работы в этом уроке станет zip-файл с шаблоном «мастер-класс» (простой вариант) или шаблон вашего сайта (бесконечное поле для творчества).
  2. Не забудьте продублировать ваш шаблон скриншотом страницы сайта.

Контрольные вопросы:

  1. Каким образом задается цвет в языке HTML?
  2. Как подключить таблицу стилей к шаблону?
  3. Ваш файл имеет имя style.css, в каких файлах нужно прописать это имя?
  4. Как в относительно большом текстовом файле найти нужный фрагмент?
  5. Какой класс описывает ссылки «Продолжение…»?
  6. Какие свойства шрифта использовались в уроке?
  7. Каким образом можно группировать сходные стили для разных классов?
  8. С помощью какого свойства в css у ячейки можно задать фоновый рисунок?
  9. В описании класса «contentheading» шаблона paranoia содержатся свойства, противоречащие друг другу. Что это за строки?