Шаблоны Joomla. Часть 5.
(Модули - СТИЛЬНЫЙ дизайн НА таблицах)
Уровень: Пользователь - Веб-мастер
Здравствуйте, уважаемые подписчики. Сегодня обещанный разговор о стилевом оформлении модулей, если подзабыли, что к чему, просмотрите бегло прошлый выпуск №24. Дизайн модулей. Применение функции mosLoadModules.
У нас есть учебный шаблон, который мы будем дорабатывать. А конкретно сформируем css-стили для дизайна внешнего вида модулей, выводимых в шаблоне. Сss-стили будем задавать для классов и id, которые задает сама Джумла. Напоминаем, что сейчас речь пойдет о табличном дизайне. Чтобы Джумла выдала нам НУЖНУЮ разметку модулей, в шаблоне должен быть вызов функции загрузки модулей без второго параметра, например, для позиции left: mosLoadModules('left'); Так задано в учебном шаблоне (из выпуска №23).
Что оформлять стилями?!
Покажем оформление следующих элементов дизайна:
- обрамление модулей и установка шрифтов;
- формирование дизайна заголовков модулей;
- установка ширины модулей;
- и т.д.
Для тех, кто предполагает, что сейчас подобный дизайн не используется, приведем в пример рассылочный сервис MailList.ru, там дизайн и построен на подобных стилевых решениях... И таких сайтов - море :)
Как дорабатываем шаблон
То что было в рабочем шаблоне, не трогаем, если это нам мешать НЕ будет (шапка, например). Еще обратим внимание на пару моментов.
Если Вы юзали немного рабочий шаблон efft_table_karkas, то заметили, что вертикальное выравнивание контента и тех же модулей происходит по центру. А привычнее, когда это содержимое прижато кверху. Самое быстрое решение проблемы, задать стиль для тега <td>:
td {
vertical-align:top;
}
Еще момент, сейчас в шаблоне содержимое страницы отступает на какое-то расстояние от границ браузера. Почему? Такие настройки браузера по-умолчанию. По настоящему хреново от подобных настроек бывает, если они в разных браузерах разные. Хотя, к отступам от края это не относится, по крайней мере для Мозиллы и ИЕ. А чтобы не тестить это во всех браузерах, лучше устанавливать подобные настройки ЯВНО!
body {
margin:5px;
}
Задаем основные стили по теме :)
Стиль для таблицы, которую создает Джумла для модуей:
table.moduletable {
border: solid 1px #ff9966;/* Рамка. Придерживаемся в оформлении цветовой гаммы Maillist.ru*/
padding-bottom: 10px; /* Отступ содержания от нижней рамки модуля*/
x padding-left: 10px; /* Различно действует для Мозиллы и ИЕ*/
width:100%;
}
Комментарии:
- с первыми двумя стилями предельно ясно :)
- символ 'х' перед стилем padding-left: 10px; означает, что он закомментирован. Зачем он приводится, расскажем ниже
- width:100%; Это установит МАКСИМАЛЬНО возможную ширину таблицы относительно контейнера, которым являются ячейки таблицы, определенной в шаблоне, где вызываются функции загрузки модулей и контента. У них пропорции 15%-70%-15% и ширина этих контейнеров остается постоянной. Она может сломаться ТОЛЬКО, если в модуле, будет что-то, не помещающееся в эти пропорции: (а) изображение большой ширины, (б) форма какая-то, например "Выбор шаблона" или неразрываемый текст. Закомментируйте этот стиль -> рамкивсех модулей станут своей ширины :)
Стиль для заголовков модулей (подражаем Maillist):
table.moduletable th {
font-size:14px;
color: #ffffff;
x height:20px; /* Может задавать высоту заголовка. Если уверены, что заголовки будут однострочными!*/
x line-height:20px; /* Задает высоту заголовка*/
padding:0;
background-color:#FF9933; /* Цвет фона*/
font-family:Arial, Helvetica, sans-serif; /* Как в Maillist, А Verdana красивее выглядит!*/
x white-space: nowrap;
}
Комментарии:
- Установка высоты заголовка - нудное дело, если НЕ знать некоторых тонкостей. Если не устанавливать ни padding ни height ни line-height, то высота заголовков (судим по фону заголовка) в ИЕ и Мозилле будет разная. Утрясается это стилем padding:0; При наших настройках высота как в Maillist, если хотите высоту больше, задайте стиль line-height :)
- white-space: nowrap; Таким стилем устанавливается неразрываемый текст (будет в одну строку, и если длинный, будет ломать верстку :)
Стиль для ячеек таблицы с содержимым модулей:
table.moduletable td {
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
padding-left: 10px;
/* Если отступ слева задать для всей таблицы,
то в Мозилле этот стиль подействует на фон заголовка
(он тоже будет с отступом - получается кривовато :)
Раскомментируйте этот стиль в table.moduletable и посмотрите на результат!
(предварительно закомментировав это :)
*/
}
Дополнительные комментарии излишни...
Шаблон в работе и его дистрибутив
Посмотреть шаблон на демо-сайте (имя шаблона efft_table_karkas).
Скачать шаблон
Подобные методы мы использовали для дизайна сайта Каталог недвижимости Тверской области. На этом сайте есть еще интересная реализация обрамления модулей рамками с закругленными краями, о чем мы обязательно расскажем в будущем.
Резюме
В сегодняшнем выпуске мы рассказали, какие стили необходимы и достаточны для дизайна модулей. В ближайшем выпуске продолжим их изучение, на примере предельно точного воспроизведения дизайна Maillist.ru Для этого также не обойтись без задания стилей для меню сайта. Вот такие ближайшие планы.
А сегодня, в некотором смысле, юбилейный выпуск: №25. В нем мы не говорили ни о чем особенном, а в следующем выпуске подготовим краткий обзор, что в настоящее время происходит на рынке ЦМС.
Автор данной статьи: Леонид Мальков
