В джумле поменять фон. Редактируем footer (футер) Joomla


Как изменить фон сайта на Joomla 3

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

Меняем фон на сайте Джумла

Для начала Вам необходимо открыть Ваш сайт в любом браузере, для примера мы используем браузер Google Chrome .

1) Кликаем правой кнопкой мыши в том месте Вашего сайта, где Вы хотите изменить фон и выбираем пункт «Посмотреть код» (в других браузерах название может отличаться).

К примеру, мы решили изменить фон нашего сайта на красный. Поэтому кликаем мышью в правой или левой части сайта.

2) Перед нами появится окно, где будет указан исходный код страницы.


Здесь нас интересует значение background - color . Как видите, на сайте установлен сероватый оттенок. Давайте изменим его на ярко-красный. Для этого кликаем по квадратику с цветом и выбираем нужный нам оттенок. Запомните цифровое обозначение этого цвета (например у белого цвета оно f 000000 ).


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


Подберите нужный Вам оттенок и переходите к следующем пункту.

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

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


Запускаем вашу панель управления и находим этот файл.


Как поменять фон сайта в Joomla 2.5/3.x? Поменять фон сайта в Joomla можно очень простым и достаточно сложным способом. Вы должны понимать, что все шаблоны Joomla создаются разными разработчиками, которые делятся на два типа: такие, которые дают широкие возможности редактирования и настройки внешнего вида и такие, которые просто предоставляют простые и красивые шаблоны без админки, как раз в таких шаблонах поменять фон сайта на Joomla будет непростым делом.

Как поменять фон сайта в Joomla

Итак, если вы используете шаблон для сайта профессионального разработчика, такой студии, как например YooTheme, Shape5, RocketTheme, IceTheme и другие, то есть шанс поменять фон сайта самостоятельно.

Способы изменения фона в Joomla :

1) Редактирование и обновление картинки. Если фон шаблона представлен в виде изображения, то его можно скачать, изменить и заказать обратно на сервер. Картинки могут быть как заполняющими (паттерны) так и статическими с чётко определенными границами длины и ширины, например очень часто используются изображения формата 1920 на 1080 точек, что обеспечивает красивое и качественное визуальное оформление как на больших так и маленьких диагоналях экрана.

Чтобы поменять фон сайта (картинку) в Joomla – установите шаблон через «Менеджер расширений», сделайте его активным в панели управления. Перейдите на сайт. Правой кнопкой манипулятора (мыши) нажмите на картинке в верхнем левом углу (под адресной строкой браузера) и сохраните изображение у себя на компьютере. Теперь, можно либо редактировать текущее изображение-фон, либо скачать новый фон сайта и подогнать его под размеры исходного варианта, после этого закачайте обратно на хостинг. Чтобы поменять фон сайта в Joomla, который сделан в виде картинки, понадобится файловый менеджер. Определить путь файла можно кликнув по свойствам загруженной картинки.

2) Изменение фона в административной панели Joomla. Часто во вкладке «Layots» есть кнопки для быстрой заменой фона. Причем обычно можно поставить картинку или простую заливку любым цветом в формате RGB (#230909) . Если есть такая возможность, то просто нажимаете кнопку «Browse» выбираете новый фон и закачиваете.

3) СSS. Вот этот, как уже говорилось ранее «трудный» способ. Труден он для тех, кто не разбирается в таблицах стилей. Все данные про стили заголовов, цвет фона, цвет шрифта и его типы указаны в файле template.css или styles.css. Фон сайта может быть прописан строками здесь как картинкой, так и цветом.

Мы рекомендуем устанавливать шаблоны, поменять фон которых можно простой заменой изображения на сервере. Это простой и быстрый способ. Обратите внимание на шаблоны YooTheme. Поменять фон сайта в Joomla с шаблоном этого производителя можно самостоятельно, в 2.5 и 3.x версии.

Сразу оговорюсь, этот урок рассчитан на тех, кто знаком с photoshop< и css.

Итак, нам осталось изменить шаблон сайта. Для того чтобы изменить шаблон, нам необходимо знать, из каких элементов состоят наши страницы, т.е. их html-разметку и стили. Интересующие нас файлы находятся в папке templates (шаблоны)\siteground-j15-1 (наш шаблон). Т.е. полный путь - yoursite.ru/templates\siteground-j15-1.

В этой папке мы видим несколько файлов и папок: в папке images хранятся картинки для шаблона, в папке css - таблицы стилей, за вывод страниц отвечает файл index.php. Итак, открываем в блокноте или в Notepad файлы index.php и template.css (из папки css).

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

Изучив html-разметку, мы будем точно знать, из каких элементов состоят наши страницы, а соответственно можем изменить их внешний вид. Но наверно, вы уже обратили внимание, что представить по коду внешний вид страницы крайне сложно (хотя и возможно). Конечно, есть способ облегчить эту задачу, и имя ему - плагин Firebug для браузера FireFox. После перезагрузки браузера, в его нижнем правом углу появится значок плагина (жук):

Щелкаем по нему, внизу окна браузера откроется панель:


Нам нужна вкладка HTML этой панели. На ней отображается html-код страницы, открытой в браузере. При наведении курсора мыши на элемент кода, он подсвечивается на странице. Сейчас мы видим только два тега страницы - head и body. Если мы щелкнем по плюсику рядом с тегом body, то откроется его содержимое (вложенные теги). Так открываем до того момента, пока не начнут подсвечиваться интересующие нас теги. Первый такой тег -


Как видите, он отвечает за верхушку шапки сайта. Теперь ищем этот идентификатор на странице template.css

Видим, что этот div имеет фоном картинку header_top_middle.jpg (расположенную в папке images), которая повторяется по горизонтали. Идем в папку images, находим картинку header_top_middle.jpg, открываем ее в программе photoshop, увеличиваем в 3 раза (чтобы было лучше видно), выделяем синий цвет, заливаем его коричневым, как на сайте-образце (данный цвет в шестнадцатеричном коде - #671700) и сохраняем. Идем на наш сайт, обновляем страницу и видим, что коричневая полоска появилась:


Теперь надо также заменить картинки слева и справа этого div-а, возвращаемся в FireFox, щелкаем по плюсику рядом с

и видим его содержимое:
- отвечает за левый угол и
- отвечает за правый угол. Ищем эти идентификаторы на странице template.css


Итак, левый угол - картинка header_top_left.jpg, правый угол - картинка header_top_right.jpg. Открываем их в программе photoshop, увеличиваем в 3 раза (чтобы было лучше видно), выделяем синий цвет, заливаем его коричневым, как на сайте-образце и сохраняем. Идем на наш сайт, обновляем страницу и видим результат:


Снова щелкаем по тегам на панели Firebug, ищем тег, отвечающий за шапку сайта, и находим его -