|
В последнее время мне часто задают вопросы, связанные с созданием шаблонов для Joomla. Большая часть вопросов связана с CSS - какие элементы за что отвечают, что где расположено и что куда выводится. Надеюсь, эта публикация даст ответы на многие вопросы, связанные с созданием(редактированием) CSS файлов Joomla и созданием шаблонов(joomplates) В начале мы познакомимся с расположением классов в Mambo 4.5.2.3, а затем перейдем к Joomla
Мамбо(mambo) 4.5.2.3
Джумла(Joomla) 
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) |
