Автор перевода: Лебедев Сергей
Оригинал статьи Understanding Mambo CSS in 5 minutes
В этом учебнике рассказывается, как стилизовать Mambo при помощи CSS. Основные элементы Mambo представлены на картинке. Эти элементы взяты из последней, на момент написания статьи, версии Mambo (4.5.2.3), и автор надеется, что они сохранятся в последующих версиях Mambo.
Mambo CSS
{mosimage}
Joomla CSS
{mosimage}
1. Элементы CSS.
На картинке показаны основные CSS последней версии Mambo при использовании шаблона по-умолчанию (rhuk_solarflare_ii).
2. Где найти файл CSS.
У каждого шаблона Mambo есть файл CSS называющийся “template_ css. css” и расположенный в папке installdir/templates/template_name/css. Структура расположения шаблона такова:
installdir/templates/
|
+- template_name/
|
+- index.php
|
+- template_thumbnail.png
|
+- templateDetails.xml
|
+- css/
| |
| +- template_css.css
|
+- images/
3. Описание Mambo (Joomla) CSS .
Теперь, когда вы получили представление о CSS Mambo, можно приступить к разбору листинга CSS элементов Mambo 4.5.2.2. В комментариях даны пояснения по каждому параметру. Этот файл CSS полностью соответствует шаблону Mambo, но стиль не задан. Вы можете скопировать его и подставить свои значения параметров. В большинстве шаблонов CSS файлы включают не все Mambo CSS элементы, так что этот стандартный файл – хороший пример для начинающих, т.к. в него включены ВСЕ элементы.
/* СТАНДАРТНЫЙ CSS ДЛЯ MAMBO 4.5. X ШАБЛОНОВ С ПОЛНЫМ ПЕРЕЧНЕМ ПАРАМЕТРОВ */
/* УСТАНОВКИ ПО-УМОЛЧАНИЮ */
/* Нижеследующие установки действуют когда другой стиль не был определен.*/
body {}/*Стиль для тэга body, отвечает за шрифты, фон страниц и т.д..*/
p {} /*Форматирует все <div> объекты. Это универсальное форматирование, появится только если другой стиль не был задан.*/
td {} /* Форматирует все <td> объекты. Это универсальное форматирование, появится только если другой стиль не был задан.*/
tr {} /* Форматирует все <tr> объекты. Это универсальное форматирование, появится только если другой стиль не был задан.*/
ul {} /* Форматирует все ненумерованные списки. Это универсальное форматирование, появится только если другой стиль не был задан.*/
a:link {} /* основной стиль ссылок*/
a:visited {}
a:hover {}
hr {} /* горизонтальные линии в вашем шаблоне*/
hr.separator {}
/* УСТАНОВКИ ФОРМЫ */
.button {}
.inputbox {}
.search {} /*форматирование <div> для соответствующих объектов: inputbox, search button...*/
/* УСТАНОВКИ НАВИГАЦИИ/МЕНЮ */
a.mainlevel{} /* это стиль для пункта меню MAIN */
a.mainlevel:link {}
a.mainlevel:visited {}
a.mainlevel:hover {}
#active_menu {} /* стиль активного пункта меню */
ul#mainlevel-nav {}
ul#mainlevel-nav li{}
#mainlevel-nav a:link {}
#mainlevel-nav a:visited{}
#mainlevel-nav a:hover {}
a.sublevel{} /* стиль подпункта меню */
a.sublevel:link {}
a.sublevel:visited {}
a.sublevel:hover {}
.pagenavbar {} /*Стиль постраничной навигации ("<< Start < Prev Next > End >>") если страницы НЕ связаны гиперсвязями.*/
.pagenavbar:link {} /* Стиль постраничной навигации ("<< Start < Prev Next > End >>") если страницы связаны гиперсвязями */
.pagenavbar:visited {}
.pagenav {} /* форматирование текста для "<< Start < Previous 1 Next > End >>" ссылок */
a.pagenav:visited {}
a.pagenav:hover {}
a.readon:link {} /*Стиль для ссылки "Read More". Эта ссылка используется для публикации больших статей*/
a.readon:hover {}
a.readon:visited {}
.back_button {} /*Стиль кнопки "BACK" */
.pagenav_prev {} /* Стиль кнопки "PRE" */
.pagenav_next {} /* Стиль кнопки "NEXT" */
.latestnews ul {} /*Стиль ненумерованного списка “Последние новости” (latest news) – по-умолчанию модуль user1*/
.latestnews li {}
.mostread ul{} /*Стиль элемента (строки) списка “Самый популярный” (most popular) - по-умолчанию модуль user2*/
.mostread li{}
/* УСТАНОВКИ СОДЕРЖИМОГО СТРАНИЦЫ */
a.category:link {}
a.category:hover {}
a.category:visited {}
.blogsection {} /* Форматирование ссылок в секции Blog */
.blog_more {} /*Текст "More" в секции blog*/
a.blogsection:link {} /* установка формата ссылки */
a.blogsection:visited {} /* то же для просмотренной ссылки */
a.blogsection:hover {} /* то же для подсвеченной ссылки*/
.componentheading {}/* Заголовок компонента, используемого для просмотра содержимого статьи. */
.contentheading {} /* Заголовок статьи, материала и т.д.*/
.contentpane {} /* Таблица, содержащая служебную информацию для статьи (компоненты, категории, контактные формы, и т.д.).*/
.contentpaneopen {} /* Таблица, содержащая текст статьи.*/
.contentpagetitle {} /*Подзаголовки*/
a.contentpagetitle:hover {} /*Подзаголовки, являющиеся ссылками */
a.contentpagetitle:link {}
a.contentpagetitle:visited {}
.contentdescription {} /* Форматирование секций Описания "DESCRIPTION" категорий (News/Weblinks/Latest news...) */
table.contenttoc {} Форматирование таблицы Содержание (Tables of Contents). Используется для многостраничных статей */
table.contenttoc td {} /* то же для <td> */
table.contenttoc th {} /* то же для <th> */
table.contenttoc td.toclink {} /* то же для текста ссылок*/
a.toclink:link {} /* то же для различных состояний ссылок (простой, посещенный, подсвеченный)*/
a.toclink:visited {}
a.toclink:hover {}
/*СЕКЦИИ MAMBO*/
.sectiontableheader {} /* Стиль для секций на странице.
Например: заголовки "Date", "Item Title", "Author" и "Hits" */
.sectiontableentry1 {}
.sectiontableentry2 {}
/* ФОРМАТИРОВАНИЕ МОДУЛЕЙ MAMBO */
table.moduletable {} /* Форматирование таблицы модулей */
table.moduletable th {} /* Форматирование заголовков модулей */
table.moduletable td {} /* Форматирование ячеек таблиц модулей*/
/* РАЗНОЕ */
/* Даты, Авторы*/
.createdate {} /* Стиль даты создания материала/статьи. */
.modifydate {} /* Форматирование текста "Last updated on" в конце статей */
.small {} /* Форматирование текста "Written by:...." */
.smalldark {}/*Форматирование текста " Number of Voters" */
/* Polls */
.poll {} /* формат td для таблицы голосования */
.pollstableborder {} /* стиль границы для таблицы голосования */
/* Weblinks */
.weblinks{} /* формат ссылок для секции "Weblinks"*/
a.weblinks:hover {} /*то же для подсвеченной ссылки */
/* Newsfeeds */
.newsfeedheading {} /* Заголовок newsfeed. Примечание: стиль не распространяется на заголовки самих новостей*/
.newsfeeddate {} /* дата для newsfeed */
.fase4rdf {} /* текст newsfeed */
/* Страница поиска */
table.searchintro {} /* Форматирование сообщения " Search Keyword : test returned 4 matches " появляющегося после ввода слова для поиска. */
/*ИНТЕРФЕЙС АДМИНИСТРАТОРА*/
/* CSS определяющий интерфейс администратора*/
.ontab {}/* Стилизует закладки " Tab " при редактировании материала.
Стилизует нажатую закладку */
.offtab {} /* то же для обычных закладок */
.tabpadding {} /* задает размер закладки */
.tabheading {}
.pagetext {} /* стилизация содержимого формы редактирования (сюда входит HTML -область и остальной материал) для интерфейса администратора */
4. Шаблон CSS: настройка.
Обычно требуется, чтобы шаблон соответствовал содержимому сайта или хотя бы отличался оригинальностью. Приведенный выше файл ничем не заполнен. Если вам лень его заполнять или вы не очень знакомы с CSS, можно открыть другой template_ css. css файл из любого шаблона, скопировать, разместить у себя в соответствующую директорию и поэкспериментировать с изменением различных переменных.
5. Это все ?
Настройка template_ css. css – лишь часть дизайнерской работы в Mambo. Вопросы навигации по слоям и модулям вашего шаблона также важны. Подробнее о них будет рассказано в другом учебнике.
