Разбираемся с CSS шаблонов Joomla

В последнее время мне часто задают вопросы, связанные с созданием шаблонов для Joomla. Большая часть вопросов связана с CSS — какие элементы за что отвечают, что где расположено и что куда выводится.

Надеюсь, эта публикация даст ответы на многие вопросы, связанные с созданием(редактированием) CSS файлов Joomla и созданием шаблонов(joomplates)

В начале мы познакомимся с расположением классов в Mambo 4.5.2.3, а затем перейдем к Joomla

Мамбо(mambo) 4.5.2.3

Image

Джумла(Joomla) 

Image 

1. Элементы CSS

 а картинке показаны основные CSS последней версии Mambo при использовании шаблона по-умолчанию (rhuk_solarflare_ii).

2. Где найти файл CSS?

У каждого шаблона Mambo есть файл CSS называющийся “template_css.css” и расположенный в папке ../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.3. В комментариях даны пояснения по каждому параметру. Этот файл 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. Вопросы навигации по слоям и модулям вашего шаблона также важны. Подробнее о них будет рассказано в другой раз.

(использованы материалы сайта myjoomla.ru)