Главная Статьи Создание сайтов Joomla - Каждой странице отдельный фон в зависимости от времени суток
Joomla - Каждой странице отдельный фон в зависимости от времени суток
07.09.2011 13:51

Достаточно часто у владельцев сайтов под Joomla появляется потребность сделать для отдельно взятой страницы — уникальный фон. На многочисленных форумах предлагается много решений на эту тему, однако у каждого из них имеется один существенный недостаток. - администратор сайта должен вручную прописывать код на тех или иных страничках сайта. Мы предлагаем решение, которое позволят настраивать фон, не обладая познаниями в программировании. Речь идет о модуле «body слайдер фс+», который позволяет не только менять фон сайта, устанавливая свои изображения, но делать в качестве фона настоящие слайд шоу и выводить все это в заданное время. Таким образом на сайте можно создавать разные фоны на каждое время суток.

{mosloadposition debug}

Модуль «body слайдер фс+» - распространяется на коммерческой основе и купить его можно в по следующей ссылке:

http://sitogon.ru/index.php?page=shop.product_details&flypage=flypage.tpl&product_id=3&category_id=1&option=com_virtuemart&Itemid=61

Стоимость модуля — 300 рублей.

Прежде чем мы приступим к подробному описанию модуля и просмотру демо сайта, предлагаю вкратце ознакомиться со всеми возможностями данного расширения:

  • Изменение фона на отдельно взятой странице сайта

  • Создание слайд-шоу на отдельно взятой странице сайта и вывод его в фон сайта

  • Изменение фона у любого элемента сайта, которому прописан ID или класс в шаблоне

  • Создание слайд-шоу на отдельно взятой странице сайта в любом элементе которому прописан ID или класс в шаблоне

Чтобы разобраться с тем, как работает модуль, предлагаю поставить несколько локальных задач и первое, что мы  сделаем — изменим фон у одной единственной страницы.

 

Как изменить фон у отдельно взятой страницы в Joomla

 

У нас есть графический файл, который мы хотим сделать фоном страницы. Первое, что мы должны сделать после установки модудля — это зайти в административную панель Joomla: Расширения — Менеджер Модулей и открыть на редактирование модуль «Colors FSP».

Нас интересует текстовое поле «Фоновая картинка», куда мы должны прописать путь к файлу с изображением, которое послужит фоном.

Далее обратите внимание на выпадающий список «Вывод фоновой картинки». Здесь необходимо выбрать вариант отображения:

Repeat — повторять картинку до тех пор, пока не будет заполнена вся область

No-repeat — отобразить картинку всего один раз

Repeat-x — рисунок повторяется только по горизонтали

Repeat-y — рисунок повторяется только по вертикали

Fixed — картинка растягивается на всю область экрана

Теперь необходимо привязать наш фоновый рисунок к пункту меню. Для этого в настройках модуля указываем соответствующий пункт и сохраняем модуль.

 

Посмотрим, что же у нас вышло на сайте. Предлагаю открыть следующую ссылку:

http://sitogon.ru/demo/index.php?option=com_content&view=article&id=1&Itemid=4

Как мы видим, фон изменился. Хотя на главной странице сайта по прежнему отображается фон «по умолчанию»
 

С изменением фона страницы, привязанной к пункту меню мы справились. А что делать, если есть необходимость сменить фон у материала, который не привязан ни к одному из пунктов меню?

Для этого откроем наш модуль и в поле «Позиция» пропишем нечто свое,  уникальное. То есть, позицию, которая отсутствует в нашем шаблоне.

 

В моем случае указана позиция «fon1»

 


 

Сохраняем настройки модуля и отправляемся в менеджер материалов. Открываем на редактирование ту статью, где мы желаем сменить фон сайта.

В основную часть материала добавляем тег:

{ loadposition fon1}

Где loadposition — команда, которая заставляет загружаться модуль, а fon1 — позиция нашего модуля.

Сохраняем материал.

 

Как сделать несколько страниц с разным фоном?


 

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


 

Далее остается настроить копию модуля на свое усмотрение. То есть, на сайте может работать две и более копий модуля при полном отсутствии конфликтов.


 

Как сделать фон сайта в виде слайдшоу
 

Мы уже писали о том, что модуль позволяет превращать фон сайта в самое настоящее слайд шоу. Каким образом это осуществляется?

Откроем страницу настроек модуля

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


 

Обратите внимание, что текстовое поле «Фоновая картинка» должно быть пустым! Далее остается только привязать модуль к пункту меню или вывести его на конкретной странице, так как мы это делали ранее.

Просмотреть демо слайд шоу можно по этой ссылке:

http://sitogon.ru/demo/index.php?option=com_content&view=category&layout=blog&id=1&Itemid=3

 

Изменяем фон других элементов в Joomla по ID или имени класса


 

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

Первое, что нам необходимо сделать это узнать ID или класстого или иного элемента. Для этих целей воспользуемся браузером Google Chrome.

Выделим необходимую часть сайта и кликнем по ней правой кнопкой мышки. В контекстном меню выбираем пункт «Проверить элемент»


 

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

Открываем настройки нашего модуля и в выпадающем списке «Тип объекта» выбираем параметр «Имя класса»

В текстовое поле «Имя идентификатора или имя класса» вписываем «contentpaneopen», далее в поле «Фоновая картинка» указываем путь к нашему изображению


 

Сохраняем настройки модуля. И идем смотреть результат по следующей ссылке:

http://sitogon.ru/demo/index.php?option=com_content&view=article&id=3&Itemid=6

Как мы видим, область сайта, обозначенная классом «contentpaneopen» сменила фон.

Если бы мы меняли фон по идентификатору, то в настройках модуля в выпадающем списке «Тип объекта», необходимо было выбрать значение «Идентификатор (ID)»

Смена фона сайта в зависимости от времени суток

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

Создадим два модуля Colors FSP, один из которых назовем «день», другой, соответственно «ночь».

Откроем на редактирование модуль «День» и обратим внимание на параметр «Время действия».

Поставим его в значение 12:00 — 19:00 так, как показано на рисунке:


 

В текстовое поле «Фоновая картинка» прописываем путь к изображению, на котором отображен ясный летний день.

Повторяем действия с модулем «Ночь». С той разницей, что параметр «Время действия» будет равен 19:00 — 12:00, а в качестве фоновой картинки будет использовано фото ночного пейзажа.

Публикуем модули в одну позицию и привязываем к определенному пункту меню, если в этом есть необходимость. Если ваша задача сделать так, чтобы фон менялся на всем сайте, в настройках модуля, в разделе привязки к меню переключатель ставим в положение «Все»

На этом хочется завершить короткий рассказ про модуль. Сегодня мы узнали как сделать каждой странице сайта свой фон, слайдшоу, а также научились менять фон в зависимости от времени суток. Задавайте вопросы на форуме.

С уважением, Гоша Компьютерный

{mosloadposition debug}

Комментарии (9)Добавить комментарий
lenash
...
Автор: lenash, Октябрь 09, 2011
В слайд шоу меняется только фон страницы? Или ее содержание?
Гоша Компьютерный
...
Автор: Гоша Компьютерный, Октябрь 09, 2011
Только фон) А как вы представляете себе изменение содержания страницы?
RaMiRo
...
Автор: RaMiRo, Октябрь 26, 2011
Туплю полностью. Что именно нужно добавить в статью и в каком виде. Что-то у меня не выходит.((
Гоша Компьютерный
...
Автор: Гоша Компьютерный, Октябрь 26, 2011
Вы, я так понял, купили этот модуль?
RaMiRo
...
Автор: RaMiRo, Октябрь 26, 2011
Да. Приобрёл.
Гоша Компьютерный
...
Автор: Гоша Компьютерный, Октябрь 26, 2011
А на каком этапе настройки у вас возникают проблемы?
RaMiRo
...
Автор: RaMiRo, Октябрь 26, 2011
на моменте встраивания кода в тело статьи, в которой нужно изменить фон. Тот скрипт, что у Вас написан, атоматически встраивается в тег параграфа, даже если он вводился в хтмл.
Гоша Компьютерный
...
Автор: Гоша Компьютерный, Октябрь 26, 2011
Киньте мне в личку доступ к админке. И укажите статью, где нужно сменить фон. Я вам настрою
Шер-хан
...
Автор: Шер-хан, Декабрь 22, 2011
Подумаю на счет покупки... В принципе ни дорого.

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

busy

Новые материалы на эту тему:
Также рекомендуем к прочтению:

Обновлено 07.09.2011 14:11