Как изменить фон шаблона в CMS Joomla

Joomla Модули


Здравствуйте дорогие друзья и любители Joomla. Многие из вас хотели бы выделить свои сайты из общей серой массы других сайтов и сегодня я расскажу как изменить фон шаблона в CMS Joomla при каждой новой при перезагрузке страницы вашего сайта. То есть, вы будете иметь новый фона шаблона при каждом новом заходе пользователя и посещения им новой странички вашего сайта и в этом нам поможет бесплатный модуль bgMAX.

Как изменить фон шаблона в Joomla

Как изменить фон шаблона в Joomla

Из этого пошагового руководства вы узнаете, как достичь необходимого эффекта на примере реального сайта.

Как изменить фон шаблона сайта на Joomla

Прежде чем я перейду к объяснению техники изменения фона, давайте взглянем на вещи, которые нам для этого потребуются.

Вот что вам нужно для достижения результата:

  • Шаблон с позициями для модулей или шаблон со структурой, которая будет хорошо выглядеть при изменении фона после каждой перезагрузки страницы
  • Изображения, которые будут служить фонами

Специально для данного руководства я установил Joomla 3.1 и буду использовать шаблон под названием Nebula от JoomlaBamboo. Я выбрал этот шаблон, поскольку в его шапке используется полноформатное фоновое изображение.

По умолчанию, шаблон поставляется c несколькими стилями, каждый из которых имеет свою фоновую картинку. Чтобы не усложнять, я использую в примере именно эти изображения. Для собственного проекта, вы, конечно, подготовите картинки, которые будут хорошо смотреться на вашем сайте.

Шаг №1: Установка

  1. Установите ваш шаблон.
  2. Скачайте модуль bgMAX для Joomla по этой ссылке.
  3. Установите модуль bgMAX.

bgmax

  • bgMAX требует, чтобы вы создали папку для своих изображений. Это папка должна находится в каталоге /images и называться bgmax. Вы можете создать папку вручную, либо ничего не делать. В случае отсутствия папки, bgMAX автоматически создаст ее, когда вы первый раз откроете настройки модуля.
  • Важно: хотя в документации утверждается, что фоновые изображения нужно загружать в папку /images/bgmax/, это видимо ошибка. Поскольку, изменяя настройки модуля, вы не сможете выбрать картинки находящиеся там. Я рекомендую создать папку /background/ внутри /images/bgmax/, получится так /images/bgmax/background . Изображения, находящиеся в этой папке, будут доступны при изменении параметров.

Шаг №2: Проверка кода

Данный шаг потребует от вас проверить исходный код сайта, чтобы определить, какому элементу будет «назначаться» новый фон. Нам так же нужно найти какое правило CSS нужно переопределить, чтобы убрать стандартный фон.

Для этой цели я обычно использую Инструменты разработчика Chrome или Firebug для Mozilla Firefox. Воспользовавшись этими инструментами, я обнаружил, что фоновое изображение назначается элементу с id «#topcolour».

Мне нужно создать переопределение CSS, которое позволит убрать фоновую картинку. В результате bgMAX сможет вставить на её место новое изображение. Я настрою bgMAX так, чтобы он вставлял фон прямо в тег body нашего шаблона.

bgmax-work

Шаг №3. BGMax

Теперь, когда все изображения находятся в папке /images/bgmax/background, мы может начинать настройку самого модуля.

Я не буду подробно останавливаться на всех параметрах, доступных в настройках bgMAX. Вместо этого, я дам список только тех опций, которые использовались для достижения нужного нам результата и только, если их нужно изменять.

  • Случайный выбор из папки: background
  • Правило CSS для контента: body
  • Ширина контента: 100%
  • Дополнительное правило CSS:  #topcolour { background: transparent !important; }

Последнее правило CSS служит для того, чтобы убрать оригинальный фон шаблона.

Вот и всё! Остальные параметры модуля можно не трогать.

Нам осталось сделать совсем немного:

  •  Прикрепить модуль ко ВСЕМ страницам сайта (или тем, на которых должен меняться фон)
  • Опубликовать модуль bgMax на позиции для модулей, которая не видна на сайте и находится ниже структуры шаблона. В шаблонах обычно есть позиция для модулей отладки, которая нам идеально подойдёт.
  •  Сохраните настройки модуля и обновите свой сайт. Если вы следовали руководству и всё сделали правильно, фоновое изображение должно изменяться при каждой перезагрузке страницы.

 Результаты

Вот несколько примеров того как будет выглядеть смена стандартных изображений для фона шаблона Nebula. При работе над собственным сайтом, вы, конечно, используете фоновые картинки, сочетающиеся с его стилем и контентом.

nabulla1

nabulla2

Как видите, при помощи небольшого бесплатного модуля вы можете украсить свой сайт приятным эффектом смены фона шаблона при каждом новом посещении страницы. На этом пост Как изменить фон шаблона в CMS Joomla завершен. Желаю вам делать отличные сайты. Увидимся.

Joomla Блог Nauca – научись работать с Joomla

Хочешь получать на e-mail свежие статьи о компонентах, модулях, плагинах и других полезных вещах связанных с Joomla? Не пропусти ничего полезного, подпишись на новости блога Nauca: