Здравствуйте! В данном уроке я хотел бы показать как в 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. Удачи!

Читайте также:

Смена цвета фона в Jooma 3

В Joomla 3 существует быстрая возможность поменять цвет фона на любой другой. Данный метод применим для стандартного шаблона Protosta и для множества сторонних шаблонов, которые используют идентичный метод смены (80%).

Изменение размера сайта на Joomla

Размера сайта это один из начальных параметров который стоит определить для своего сайта. От этого размера будет зависеть всё внутреннее одержимое сайта: блоки, меню и тд.

Обзор Colourlovers

Colourlovers - это незаменимый ресурс для всех дизайнеров. Данный ресурс обладает множеством инструментов по работе с цветом - его созданию и дальнейшему применению.

Смена цвета админки

В новой версии Joomla 3.x административная панель, также притерпела изменения: в частности получила новый шаблон. Новый шаблон получил ряд очень полезных настроек и возможность изменения цвета. Благодаря этим цветам можно сделать общее представление панели и приблизить дизайн к дизайну собственного сайта.

Шаблон коричневого цвета

Бесплатный шаблон коричневого цвета для Joomla 3. Доступны настройки по изменению логотипа, контактов, галереи и соц. кнопок.

Демо

Скачать

Основные стили шаблонов

У каждого шаблона присутствует полный набор стилей для элементов сайта. Стили - это строго прописанные способы оформления для определенного элемента HTML.