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

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

Изображения со стилями CSS.

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

Где находится файл CSS-стилей сайта на Mambo/Joomla! CMS?

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

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

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

Идем дальше.

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

/* СТАНДАРТНЫЙ ФАЙЛ CSS ДЛЯ MAMBO/JOOMLA! ШАБЛОНОВ */

/* Написан Dinh Viet Hung (C) http://www.joomlart.com */

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

/* Представленные ниже настройки, это настройки по умолчанию, используются, когда нет другого стиля. */

body {} /* Стиль для тэга body вашего сайта, задает фон, шрифты и т.д. */

p {} /* Форматирует все <div>, для которых нет своего класса. */

td {} /* Форматирует все <td> элементы. Используется, когда для определенной <td> нет своего класса. */

tr {} /* Форматирует все <tr> элементы. Используется, когда для определенной <tr> нет своего класса. */

ul {} /* Форматирует все <ul> элементы (список). Используется, когда нет своего класса. */

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

a:visited {}

a:hover {}

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

hr.separator {}

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

.button {}

.inputbox {}
.search {} /* форматирует <div>, которые отвечают за элементы поиска: 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 {} /* тоже самое, что и выше, только форматирует ячейки <td> */

table.contenttoc th {} /* тоже самое, что и выше, только форматирует название каждой страницы* /

table.contenttoc td.toclink {} /* тоже самое, что и выше,

только форматирует таблицу, в которой находяться другие страницы */

a.toclink:link {} /* тоже самое, что и выше, только форматирует в этой таблицы ссылки */

a.toclink:visited {}

a.toclink:hover {}

/* ПОКАЗ СЕКЦИЙ MAMBO */

.sectiontableheader {} /* Это стиль для отображения заголовка секции

Например: заголовок таблицr "Дата", "Название", "Автор" и "Просмотров" */

.sectiontableentry1 {}

.sectiontableentry2 {}

/* ФОРМАТИРОВАНИЕ МОДУЛЕЙ MAMBO */

table.moduletable {} /* Форматирование таблицы модуля */

table.moduletable th {} /* Форматирование заголовка модуля и названия модуля */

table.moduletable td {} /* Форматирование таблицы самого модуля с содержимым */

/* ДРУГОЕ */

/* Даты , Авторы */

.createdate {} /* Стиль для отображения даты создания статьи/новости */

.modifydate {} /* Стиль для отображения даты последнего обновления статьи/новости */

.small {} /* Форматирование "Автор:...." текста */

.smalldark {}/* Стиль для результатов опроса, строка "Число голосовавших".. */

/* ОПРОСЫ */

.poll {} /* Формат таблицы опроса */

.pollstableborder {} /* Задает рамку для опроса */

/* ССЫЛКИ */

.weblinks{} /* ну.. форматирует названия объектов */

a.weblinks:hover {} /* тоже самое, что и выше, только форматирует ссылки на эти названия */

/* Лента новостей */

.newsfeedheading {} /* Заголовок ленты новостей. ВНИМАНИЕ: это не будет затрагивать сами новости */

.newsfeeddate {} /* да.. дата ленты новостей */

.fase4rdf {} /* Это - основной текст ленты новостей */

/* ПОИСК */

table.searchintro {} /* Форматирование поля "Ключевок слово для поиска", а также форматирование результатов поиска */

/* ТАБЛИЦЫ АДМИНИСТРИРОВАНИЯ MAMBO В ВИДИМОЙ ЧАСТИ САЙТА ( FrontEnd) */

/* Эти CSS стили работают только тогда, когда администратор авторизируется */

.ontab {}/* Форматирование кнопок "Tab" при редактировании содержания в фронт-энде. Когда это активно или нажато */

.offtab {} /* Тоже самое, что и выше. Только когда, это неактивно или не нажато */

.tabpadding {} /* Стиль устанавливает позиции для вышеупомянутых стилей */

.tabheading {} /* Не уверен для чего это используется. Немогу пока найти ничего, что с этим связано */

.pagetext {} /* Этот стиль используется для редактирования контента во время использования редакторов во фронт-энде */

Mambo/Joomla! шаблон CSS: Настройка

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

Все ли это?

template_css.css - это только часть создания шаблона под Mambo/Joomla! CMS. CSS довольно сильно может изменить Ваш сайт. Но расположение модулей также очень важно. И в скором на нашем сайте Вы сможете прочитать новый урок по поводу расположения модулей, он также будет с картинками.

Источник: http://help.joom.ru/