- Подробности
- Категория: Разное
Здравствуйте! В данном уроке я хотел бы показать как в Joomla легко можно изменять цвета заголовков используя CSS. Данный пример разобран на собственном сайте на Joomla версии 1.5, но для других версий все примерно тоже самое, отличаться будет только оформление админки.
Что имеем
Как видим у нас есть заголовки разных уровней h1,h2 и h3. h1 это самый крупный заголовок в HTML. Все заголовки имеют черный цвет, который мы и хотим заменить. Заменять будем заголовки h1 и h2.
Определимся с цветами заголовков: h1 у нас будет оранжевый, h2 - голубой.
Просмотр кода элемента
Чтобы заменить цвет нам потребуется исправить файл CSS. Но для начала узнаем какой же файл необходимо исправить и в каком месте. Для этого посмотрим код элемента в браузере, я использую Google Chrome. Чтобы посмотреть код элемента нужно навести курсор мыши на наш заголовок и нажать правую кнопку миши, в списке выбрать: Проверить элемент. После чего у нас появиться вот такое окно:
Оранжевым цветом я выделил элементы которые нам необходимы: в левом нижнем углу отображается HTML содержимое которое говорит нам, что это тег <h1>. В правом нижнем углу выводится используемый стиль CSS к нашему элементу(заголовку).
Разберем стиль:
h1, h2, h3, h4, h5, h6{
color : black;
}
Стиль содержит в себе только значение цвета - черный. Заголовок стиля - это то к чему применятся этот цвет, т.е. ко всем заголовкам от h1, h2, h3, h4, h5, h6. Так же я подчеркнул, то что нам сейчас потребуется в первую очередь - это файл где находится данный стиль, чтобы его можно было замеить. Как видим данный CSS прописан в файле joomla.css
Изменение цвета заголовков
В админке >заходим в менеджер шаблонов:
Выбираем используемый нами шаблон(помеченный звездочкой):
Заходим в наш CSS файл который мы уже определили для замены:
Далее в открытом файле находим тот самый заголовок стиля:
h1, h2, h3, h4, h5, h6
И видим, что ко всем заголокам сайта используется черный цвет, но сдесь он представлен в кодировке: #000000
Далее заменяем эту строку. Помнмим, что мы уже определились с цветами.
Для этого выносим заголовок h1 в отдельную строку и прописываем то же свойство color, только заменяем на кодировку оранжевого цвета: #FF6600
В перой строке мы оставляем стиль
h2, h3, h4, h5, h6 {color: #000000}
>но заменяем черный(#000000) цвет на голубой(#3366CC);
В итоге у нас получается следующие стили:
Результат
В итоге на нашем сайте мы видим как изменились заголовки. Тем самым мы можем подбирать любое количество вариаций цвета использовать его для сочетания c общим дизайном и пр. Конечно у вас другой шаблон и поэтому другой набор стилей. Но принцип всегда один - вы проверяете какой используется стиль для элемента(заголовка) с помощью браузера(Google Chrome) и изменяете этот стиль в вашем шаблоне используя синтаксис CSS. Удачи!
Комментарии
В вашем случае нужно открыть файл templates/rhuk_ milkyway/css/te mplate.css и изменить строку - 225.
Более наглядно, как это сделать читайте в статье - Ознакомьтесь со статьей - joomla-create.ru/.../...
Здравствуйте!
Файлы удалено редактировать можно и нужно. Единственное, что уже не получится открыть сразу группу файлов, только по одному. Либо открывать через админку Joomla или менеджер хостинга.
Но к этому со временем привыкаешь и становится просто.
Как это настроить упоминалось в этом видео: joomla-create.ru/.../...
Но у меня сложилось впечатление, что редактировать CSS можно только когда Джумла на локальном сервере. Или ошибаюсь к? Если да то нужен совет как вывести файлы CSS на редактор с внешнего хостинга. боаголдарю В.Зубков