Эта обучающая статья поможет Вам понять и научиться применять на практике css-стили Mambo/Joomla! за самое короткое время. Все CSS-стили, применяемые в Mambo/Joomla! CMS, проиллюстрированы рисунками. Все стили подходят для самых последних на текущий момент версий Mambo CMS и Joomla! CMS - 4.5.2.3 и, соответственно, 1.0.8.

Сегодня, css-стили, реализованные в Mambo и Joomla! совсем не различаются, что является результатом разработки обоих движков одной командой разработчиков.

Возможно, в будущем, стили будут разниться друг друга в этих системах управления содержимым, но сегодня, благодаря этой статье, можно успешно создать хороший css-стиль для вашего сайта используя и Mambo CMS и Joomla! CMS

Изображение ниже раскрывает практически все стили, реализованные в Mambo/Joomla! CMS на примере шаблона по умолчанию - rhuk_solarflare_ii.

Каждый шаблон имеет в своей папке файл, названный template_css.css. Этот файл должен находиться в папке ваш_сайт/templates/ваш_шаблон/css/ и он отвечает за css-стили вашего шаблона.

Структура же шаблона должна быть такой:

site/templates/
  |
  +- template/
       | 
       +- index.php 
       |
       +- template_thumbnail.png 
       |
       +- templateDetails.xml
       |
   +- css/
       |   
       +- template_css.css
       |
   +- images/

Прочитав первые две части этой статьи, Вы лишь кратко познакомились со стилями Mambo/Joomla! CMS. Здесь же я представляю все стили с описанием, чтобы Вам было понятно, что к чему. Вы даже можете использовать этот материал со стилями для своего сайта, просто скопировав нужный Вам стиль. Потому что многие шаблоны не включает в себя некоторые стили, даже которые представлены в Mambo/Joomla! CMS по умолчанию.

элементы (список). Используется, когда нет своего класса. */



a:link {} /* Главный стиль ссылок */



a:visited {}

a:hover {}



hr {} /* горизонтальная линия в вашем шаблоне (разделитель) */



hr.separator {}





/* НАСТРОЙКИ ФОРМ */



.button {}



.inputbox {}



.search {} /* форматирует
, которые отвечают за элементы поиска: inputbox, search button... */





/* НАСТРОЙКИ НАВИГАЦИИ/МЕНЮ */



a.mainlevel{} /* стили для ГЛАВНЫХ элементов меню */



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 {} /* Стиль для кнопки "Подробнее" в статье/новости */



a.readon:hover {}



a.readon:visited {}

.back_button {} /* Стиль для кнопки "Вернуться" */



.pagenav_prev {} /* Стиль для кнопки "Предыдущий" */



.pagenav_next {} /* Стиль для кнопки "Следующий" */



.latestnews ul {} /* Стиль для списка последних новостей - по умолчанию, "Последние новости" стоят в позиции user1 */



.latestnews li {}

.mostread ul{} /* SСтиль для списка популярных новостей - по умолчанию, "Популярные новости" стоят в позиции user2 */



.mostread li{}





/* НАСТРОЙКИ СТРАНИЦЫ КОНТЕНТА */







a.category:link {}



a.category:hover {}



a.category:visited {}

.blogsection {} /* Форматирование ссылок в блоге */



.blog_more {} /* "Подробнее" в секции блога */

a.blogsection:link {} /* формат ссылок блога */



a.blogsection:visited {}



a.blogsection:hover {}

.componentheading {}/* Название компонента .*/



.contentheading {} /* Название стаьи, новости и т.д. */



.contentpane {} /* Таблица, в которой находяться компоненты, контакты, но не элементы контента. */



.contentpaneopen {} /* Таблица для контента. */



.contentpagetitle {} /* Название статьи */



a.contentpagetitle:hover {} /* Название статей, новостей и т.д. */



a.contentpagetitle:link {}



a.contentpagetitle:visited {}

.contentdescription {} /* Форматирование "ОПИСАНИЯ" секций, категорий (Новости/Ссылки/Последние новости...) */



table.contenttoc {} /* Форматирование таблицы для статей или контента, которые содержат не одну страницу */



table.contenttoc td {} /* тоже самое, что и выше, только форматирует ячейки

Обычно, Вы настраиваете template_css.css для того, чтобы полностью доделать свой шаблон ( задать ему соответствующие настройки и дополнить цветовую гамму ), или же просто для того, чтобы Ваш шаблон отличался от других шаблонов. Поэтому, всевозможное редактирование css-стилей шаблона Мамbo/Joomla!, наиболее популярно среди пользователей этих систем. Если же Вы не хотите писать свой css-стиль заново, то Вы можете открыть любой другой стиль и править его под себя.