Joomla: как добавить отдельный CSS для статьи? |
Добавил(а) microsin |
Есть несколько способов, как добавить стили CSS на сайт Joomla. В зависимости от выбранного способа, можно изменить внешний вид как всего сайта, так и отдельных статей, добавить туда особые элементы оформления. Иногда бывает необходимо править/добавлять стили при размещении рекламного кода на сайте. [Способ 1: прямая правка стилей шаблона сайта] Можно добавить стили напрямую в файл стиля шаблона. Это самый простой, но не самый лучший способ, поскольку разрастание общего файла стилей снижает быстродействие сайта. Кроме того, стилями пользоваться не очень удобно, и их неудобно редактировать, а также нужно следить за тем, чтобы не повторялись/не конфликтовали имена стилей. Имейте в виду, этот способ может повлиять на внешний вид всего сайта! В Joomla 1.0.12 файл стиля шаблона обычно называется template_css.css, и находится он в папке public_html\templates\название_шаблона\css\ (каждый шаблон имеет такой индивидуальный файл template_css.css). Это файл можно отредактировать текстовым редактором, и просто скопипастить туда нужные стили. Файл CSS шаблона можно также редактировать в админке (Сайт -> Шаблоны -> Шаблоны сайта -> поставьте радиокнопку на нужный шаблон, и нажмите кнопку Правка CSS), или перезаписать его по ftp. Кроме того, можно отредактировать код шаблона в админке сайта (Сайт -> Шаблоны -> Шаблоны сайта -> поставьте радиокнопку на нужный шаблон, и нажмите кнопку Правка HTML. Подключение CSS настраивается в начале кода шаблона, внутри тега head) и подключить в коде шаблона нужные файлы CSS. В Joomla 1.5 код CSS шаблона и его код можно поправить похожим образом. Через админку войдите в меню Расширения -> Шаблоны -> Сайт -> поставьте радиокнопку на нужный шаблон, нажмите кнопку Изменить. Чтобы отредактировать CSS, нажмите кнопку Изменить CSS, а чтобы отредактировать код шаблона нажмите Изменить HTML. [Способ 2: вставка стилей с помощью расширения Jumi] Добавление в статью кода с помощью расширения Jumi [1], оно доступно для Joomla 1.0.12 и Joomla 1.5. Это очень гибкий метод, таким способом можно вставлять стили не только в шаблон, но и в любой модуль, и даже в отдельную статью. С помощью расширения Jumi код CSS можно вставить в статью через тег jumi. Процесс по шагам (на примере добавления стиля в статью). 1. Установите Jumi. Установка для Joomla 1.0.12 и Joomla 1.5 описана в [1]. 2. Создайте файл стиля для статьи, например mystyle.css, и сохраните его в какой-нибудь папке сайта (запомните в какой, так как путь понадобится для загрузки стиля). Можно взять целиком файл уже готовый css, только добавьте в начало и конец файла маркеры тега style. Пример такого специально подготовленного файла стилей: <style> body { background: #f2f1f0; font-family: verdana,sans-serif; } h1 { margin-top: 1.5em; } h2, h3 { margin-top: 2em; } h1, h2, h3 { font-family: georgia,serif; font-weight: normal; margin-bottom: 0.5em; } ... pre.screen { background-image: url(images/stories/shell.png); } pre.programlisting { background-image: url(figs/source.png); } pre.programlisting, pre.screen, p.remark { border-style: solid; border-width: 1px; font-size: medium; padding: 1em; background-repeat: no-repeat; background-position: 10px 10px; padding-left: 70px; } ... </style> 3. Вставьте в начало статьи текст типа такого: Joomla 1.0.12: Joomla 1.5: Как Вы уже заметили, для Joomla 1.5 в начале пути нужно добавить почему-то слеш, соответствующий корневой директории. Теперь к контенту статьи будет подключаться стиль из файла mystyle.css, и код статьи может использовать стили оттуда. [Способ 3: плагин Unique Css Article] Установите плагин Unique Css Article [2]. Он доступен для версии Joomla 1.5. Чтобы использовать этот плагин, Вам нужно создать и сохранить индивидуальный файл CSS для статьи под именем типа article_1.css в директории /css активного шаблона. Для того, чтобы определить, какая статья будет использована для этого файла CSS, подсмотрите ID статьи в Менеджере Статей (Article Manager) и подставьте номер ID в названии файла CSS. [Ссылки] 1. Joomla: вставка произвольного кода на сайт с помощью Jumi. |