A- A A+
Замена фона сайта на другой в Joomla!

Обещанное видео по замене заднего фона на шаблоне Cerulean. На других шаблонах от рокетов фон меняется аналогично, в других шаблонных студиях тоже все похоже. Готовим сайты к новому году!

Что нужно сделать?

В этом уроке будет показано, как сделать из стандартного строгого дизайна, более зимний и новогодний вариант.

Вид шаблона по умолчанию

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

Вид измененного шаблон

Шаг 1. Находим папку с картинками бэкграунда

В папке с сайтом заходим в содержимое шаблона – templates/rt_cerulean. Далее в images/backgrounds, где находятся папки с бэкграундами для различных стилей.

Картинки шаблона Cerulean

Как найти изображения бэкграунда в других шаблонах

Многие современные шаблоны поддерживают различные цветовые гаммы и в них будет примерно такая же ситуация, как и в Cerulean.

Если в шаблоне не окажется папки background(s), тогда просто заходите внутрь папки image(s) и в ходе предпросмотра картинок, Вы догадаетесь какие изображения отвечают за бэкграунд.

Шаг 2. Выбираем картинки для редактирования

В приведенном примере в шаблоне используется стиль «lightblue». Однако, учитывая, что зима пройдет и нужно будет вернуть всё обратно, выбираем редко используемый стиль – violet.

Открываем папку и обнаруживаем картинки: bottom-img-bg.jpg, top-img-bg.jpg. Они в виде небольших полосок и изломов, которые повторяются и формируют бэкграунд.

Выбираем картинки для редактирования

Шаг 3. Используем Photoshop

Как управляться с Фотошопом здесь показываться не будет, так как данный урок посвящен исключительно работе с Joomla.

Вам нужно создать в графическом редакторе свои картинки с такими же названиями (bottom-img-bg.jpg, top-img-bg.jpg).

Шаг 4. Меняем верхнюю и нижнюю часть бэкграунда

Созданные картинки закачиваем в папку violet. Вот как они получились в нашем случае.

Новые картинки

После чего заходим в РАСШИРЕНИЯ => МЕНЕДЖЕР ШАБЛОНОВ => СТИЛИ. Здесь мы видим, что есть основной стиль Cerulean – Default * Master. Мы его трогать не будем, ставим возле него птичку и наживаем в правом верхнем углу кнопку Дублировать(1).

В результате получаем дубликат стиля с названием Cerulean – Default(2). Отмечаем данный стиль и назначаем его по умолчанию, нажав кнопку Использовать по умолчанию(2).

Кнопка Дублировать и По умолчанию

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

Заходим внутрь второго стиля. Можем поменять название, например «Новогодний стиль». Переходим на вкладку Style и активируем раздел Main Styles. Теперь справа стало возможным выбрать нужный бэкграунд. Открываем выпадающий список в Background и выбираем Violet.

Замена стиля бэкграунда

Справа вверху жмем кнопки Save и Clear Cache. Осталось убедиться в смене бэкграунда на сайте.

Шаг 5. Замена шапки сайта

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

Замена шапки сайта

Шаг 6. Замена логотипа сайта

Там же активируем раздел Custom Logo и вставляем новое изображение логотипа.

Замена логотипа сайта

Шаг 7. Отмена прокрутки верхней части бэкграунда

По следующему пути templates/rt_cerulean/less/ находим файл style.less.

В строке 307 данного файла расположена запись body {. Прямо за фигурной кнопкой добавляем – background-attachment:fixed;. Таким образом, мы дали команду зафиксировать верхнюю картинку бэкграунда - top-img-bg.jpg.

Отмена прокрутки бэкграунда

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

 

Комментарии  

#3 0 Борис 38 09.11.2016 18:17
Здравствуйте,пы таюсь отредактировать шаблон ничего не выходит джумла 2,5 бэкграунд -унылые серые доски, думал можно просто заменить картинку в паке где она лежит но не так просто её нигде нет !
Цитировать
#2 0 Луговской Александр 13.02.2015 12:50
Цитирую Nastassya:
А можно то же самое делать, только не на локальном сервере...

Конечно!
Цитировать
#1 0 Nastassya 18.01.2015 14:42
А можно то же самое делать, только не на локальном сервере, а, так сказать, наживую?
Цитировать

Добавить комментарий

Защитный код Обновить

Если заметили ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

МОЙ TELEGRAM-КАНАЛ

ПОДПИСАТЬСЯ!


Перенос на хостинг

Перенос на хостинг

Бесплатный видео-курс по переносу готового сайта на одну из лучших хостинг-площадок РУнета.

Смотреть (бесплатно)

Бессмертный сайт

Бессмертный сайт

2 урока, 16 минут, и Ваш сайт - БЕССМЕРТНЫЙ!

Узнать подробности!