AEDStudio Joomla! Direction

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

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

Все изображения ниже представляют самые последние стили, реализованные в Mambo CMS 4.5.2.3 на примере шаблона по умолчанию - rhuk_solarflare_ii. Данный шаблон также есть по умолчанию в CMS Joomla!

2. Где находиться файл CSS-стилей сайта на Joomla!?

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

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

my_site/templates/
  |
  +- ваш_шаблон/
       |
       +- index.php
       |
       +- template_thumbnail.png 
       |
       +- templateDetails.xml
       |
       +- css/
       |    |
       |    +- template_css.css
       |
       +- images/

3. Идем дальше.

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

 
/* СТАНДАРТНЫЙ ФАЙЛ CSS ДЛЯ MAMBO 4.5.X ШАБЛОНОВ */
/* By Dinh Viet Hung (C)http://www.mambotheme.com: 
free templates and Professional Templates Club */ 
 
/* СТАНДАРТНЫЕ НАСТРОЙКИ */
/* Представленные ниже настройки, это настройки по умолчанию, используются, 
когда нет другого стиля. */
 
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 {} /* Этот стиль используется для редактирования контента во время 
использования редакторов во фронт-энде */
 
 

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

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

help.joom.ru

Вверх