Отправляет email-рассылки с помощью сервиса Sendsay

CMS. Системы управления сайтом для начинающих

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Левитас: Почему Ваш бизнес-сайт не работает?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Май 2008   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
Леонид

Статистика

816 подписчиков
-1 за неделю
←   Все выпуски   →

#25. Шаблоны Joomla. Часть 5.


Шаблоны 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. В нем мы не говорили ни о чем особенном, а в следующем выпуске подготовим краткий обзор, что в настоящее время происходит на рынке ЦМС.

 

Автор данной статьи: Леонид Мальков

 
В избранное