Главная arrow РАССЫЛКА arrow №25. Шаблоны Joomla. Часть 5
17.12.2017 г.

Joomla для начинающих

Опрос (НОВЫЙ!)

Интересна ли Вам тема интернет-магазина для Джумлы?

Авторизация






Забыли пароль?

Последние 3 записи в Гостевой

Елена Васильева
Перед покупкой прилегающей одежды важно знать вашу форму тела. Некоторые женщины имеют неправильное представление о том, что ношение прилегающей одежд
Slimera Garcinia Cam
. You can select any trustworthy hospital when you purchase slimming tablets online.So searching for a sliming treatment? Wish to loose weight as earl
Фактор 4
Этот тип упражнений делается на коленях или лежа на животе. Это упражнение также устраняет напряжение в спине и шее, которое можно получить, делая скр

Сайты как небоскрёбы

Ускорение процессов строительства обязано своим развитием новым материалам и машинам. Так почему бы не ускорить механизмы создания онлайн площадей? Давайте попробуем придумать сходу способы ускорения сайтостроения.

 

 

Последние новости
  • Компания Microsoft в июле 2015 года объявила о сокращении более 7 тысяч рабочих мест.
  • Facebook проектирует строительство дата-центра, электричество для которого будет полностью вырабатываться от энергии ветра.
Реклама:
накрутка youtube
 

№25. Шаблоны Joomla. Часть 5 Печать E-mail
Автор Леонид Мальков   
31.05.2008 г.

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

 

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

 


Просмотров: 15541

Коментарии (3)
 
Здравствуйте! 
Подскажите пожалуйста, проблема следующая. 
Нижняя часть сайта(шаблона) "слетает" вниз. При просмотре через ?tp=1 блоки следующие: 
bottom[none outline] 
bottomblock[none outline] 
bottomblock 
footer[none outline] 
footer 
debug[none outline] 
debug 
 
На других шаблонах все отлично, но работал с этим, а под конец понял редактирования понял что поправить не получается. 
Как в этом случае изменить высоту страницы, чтобы она была по размеру содержания или задать в пикселях. Помогите плз.
 
Дмитрий, 18:33 20 сентября 2011 г.
 
http://www.efft.ru/joom/index.php?option=com_content&task=view&id=53&Itemid=41& mosmsg=%CA%EE%EC%E5%ED%F2%E0%F0%E8%E9+%F3%F1%EF%E5%F8%ED%EE+ %E4%EE%E1%E0%E2%EB%E5%ED.
 
cc, 15:57 05 февраля 2013 г.
 
все получилось, сайт работает http://www.urist-prudent.ru/
 
cc, 15:57 05 февраля 2013 г.

Добавить коментарий
Имя:
Коментарий:



Код:* Code

Последнее обновление ( 08.12.2011 г. )
 
Далее...

 
   

2007+ © "efft" Lab

Яндекс цитирования