Mambo (Joomla) CSS за 5 минут

Автор перевода: Лебедев Сергей

Оригинал статьи 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. Вопросы навигации по слоям и модулям вашего шаблона также важны. Подробнее о них будет рассказано в другом учебнике.