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

Как Вы знаете все, что касается дизайна и оформления сайта на Joomla сосредоточено в шаблоне. Соответственно для изменения внешнего вида сайта, необходимо вносить правки в шаблон, а для этого нужны знания его принципа работы и структуры. Попросту говоря нужно уметь работать с шаблонами на уровне кода. Но, что же делать новичку, который только начинает изучать Joomla? Поэтому в данной статье я приведу Вам подробную инструкцию, для CMS joomla — как сменить фон пользовательской части сайта. При этом, ни каких специальных знаний не понадобится, только разве, что HTML и CSS на базовом уровне.

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

Для примера я использую стандартный шаблон Beez3.

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

Как Вы видите, для одного шаблона может быть предусмотрено несколько файлов со стилями. При этом каждый из них содержит правила для отдельного элемента сайта. Как же узнать, в каком файле описаны, необходимые правила – спросите Вы. Для ответа на данный вопрос, воспользуемся инспектором кода в браузере. Как для меня – наиболее удобный – это FireBug для браузера Mozilla Firefox.

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

К примеру, фон сайта, в стандартном шаблоне прописан в правилах для элемента, а именно в файле personal.css, в первой строке:

body { background:#eee; }

Теперь собственно ответ на вопрос, как поменять фон на сайте joomla – очевиден. Достаточно добавить необходимые правила в файл стилей (применительно к стандартному шаблону – в файл personal.css).

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Поэтому, немного изменим правила для элемента body.

body { background:#eee; background:url("../images/index_img_par.jpg"); }

Если в качестве фона сайта используется изображение – его необходимо предварительно поместить в каталог хранения изображений шаблона (для шаблона Beez3 – это папка images).

Теперь как изменить фон в joomla 3, несколько иным способом. Смотрите в панели управления CMS, в менеджере шаблонов, есть вкладка “Шаблоны”.

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

Где на вкладке “Редактор” приведена полная файловая структура шаблона. При этом файлы и папки отображаются в виде ссылок. Соответственно кликнув, по которой, Вы увидите содержимое для файлов и вложенные элементы для папок. К примеру, мы можем перейти в каталог css, а затем выбрать для редактирования уже знакомый нам файл personal.css.

То есть файлы с текстовым содержимым Вы можете редактировать непосредственно на данной странице. Закончив все правки, необходимо кликнуть по кнопке “Сохранить”.

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

На этом у меня все! Всего Вам доброго и удачного кодирования!!!

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

В этом уроке мы редактируем footer (футер) Joomla и убираем «Работает на Joomla» .

После установки Joomla в footer (футер) имеется надпись Работает на Joomla!® (Powered by Joomla!®) . Рассмотрим как это все дело убрать. Воспользуемся дополнением Firebug для Firefox и проанализируем эту надпись.

Открываем Total Commander вводим ссылку для поиска и видим, что она находится в шаблоне в файле index.php.

С помощью программы Notepad++ открываем данный файл, жмем Ctrl + F и в форму поиска вводим скопированную ссылку.

тогда footer (футер) будет у нас чистый, ну или редактируем надпись под себя.

ВАЖНО! Если вы отредактировали надпись на русском языке, то прежде чем сохранится поставьте кодировку «Кодировать в UTF-8 (без BOM).

Теперь давайте рассмотрим как убрать или отредактировать надпись в footer (футер) 2013 joomla. Все права защищены. Joomla! - бесплатное программное обеспечение, распространяемое по лицензии GNU General Public License .

Но если вы хотите отредактировать его под себя, то это можно сделать отредактировав файл en-GB.mod_ footer.ini, а если у вас русифицированная Joomla то ru-RU.mod_footer.ini находящиеся в корне сайта (language > en-GB или ru-RU соответственно). Не забывайте про кодировку «Кодировать в UTF-8 (без BOM)».

При установке клубных шаблонов Joomla или установке шаблона Joomla 2.5 из быстрого старта «QuickStart» зачастую необходимо убрать ссылки на сайт разработчика. В большинстве случаев в настройках шаблона имеется возможность скрытия логотипа производителя, но а если нет, то работаем по принципу убирания из footer (футер) надписи Работает на Joomla!® (Powered by Joomla!®) и убираем ссылки на сайты разработчика, если это необходимо.

Вспомнился один случай, когда нужно было убрать ссылку на разработчика из шаблона. Бился час наверно. В настройках шаблона нет. Поиск по ссылке, id, классу ничего не давал. Ну нет ссылки и все. И только когда плюнул на все, отошел от компа, занялся другим делом и вот тут меня осенило. Ларчик открывался просто. В менеджере модулей произвольный Html код. Там все и написано, а позиция footer. Может пригодится кому.

И так мы с вами рассмотрели урок из раздела настройка Joomla Редактируем footer (футер) Joomla | Убираем «Работает на Joomla!».

Если урок был вам полезен буду благодарен если лайкните по кнопкам.

Как поменять фон сайта в 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, ищем тег, отвечающий за шапку сайта, и находим его -

Щелкаем по плюсику рядом и смотрим, из чего состоит шапка сайта. Итак шапка сайта - это

, содержащий

, который в свою очередь содержит

. Ищем первые два идентификатора на странице template.css

Видим, что по сути наша шапка залита синим цветом (#06569d), вдоль нижнего края шапки (bottom) по горизонтали (repeat-x) повторяется картинка header_top_middle_shadow_bg.jpg, которая представляет собой синий квадратик с затемненным низом (эффект тени). Если мы посмотрим на сайт-образец, то увидим, что у нас по низу шапки идет белая полоса, а сам фон шапки имеет цвет #671700.

Итак, переделаем в photoshop картинку (синий квадратик с затемнением внизу поменяем на коричневый квадратик с белой полосой внизу):

А в таблице стилей поменяем синий цвет фона на коричневый:

Сохраняем и обновляем наш сайт в браузере:

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

Это изображение мы и сохраняем, как header.jpg (правой кнопкой мыши - Сохранить изображение как). Теперь идем на страницу стилей и меняем название изображения в теге

:

Смотрим на результат и видим, что вставленное изображение шире нашей шапки. Действительно наше изображение имеет высоту 181 пиксел, Значит наши теги

и

должны иметь высоту 181 пиксел (высота изображения) + 2 пиксела (так как должна быть видна белая полоска внизу), т.е. 183 пиксела. К тому же сама картинка должна быть прижата к верху (top), а не к низу (bottom), как сейчас указано в стилях. Давайте добавим эти изменения:

Теперь будем разбираться с

, именно он отвечает за внешний вид надписей в шапке. У нас это одна надпись слева - Русобои (название фирмы), а нам необходимо сделать две надписи: одну слева - название и слоган, а другую справа - с адресом и телефоном. Итак, ищем идентификатор logo на странице стилей:

На странице index.php видим, что в

выводится ссылка с названием фирмы посредством программного кода, который мы договорились не трогать, да нам это и не нужно, ведь название у нас такое же (его, кстати, при желании можно изменить из администраторской зоны, поменяв название сайта).

Чтобы дописать то, что нам нужно необходимо добавить в разметку страницы index.php пару дополнительных div-ов: один будет отвечать за левую сторону, а другой - за правую, обзовем их соответственно logo_left и logo_right, а в них добавим еще по div-у logo_left_text и logo_right_text, в которых и напишем необходимый текст:

Посмотрим на результат:

Все появилось, нам осталось только добавить стили для наших div-ов на странице template.css, чтобы они отображались, как на сайте-образце:

Обратите внимание, мы немного поменяли стили для ссылок в div-e logo (уменьшили размер и добавили другой шрифт). Получилось вполне похоже на сайт-образец:

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

. Идем на страницу index.php, находим этот div и удаляем его вместе со всем содержимым:

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

За главное меню отвечает тег

, в таблице стилей видим, что фоновой картинкой для этого тега является top_menu_bg.jpg, открываем ее в photoshop и меняем синие цвета на коричневые. Далее видим, что в меню есть разделитель (тонкая синяя полоска), за него отвечает class="pill_l", у которого есть фоновая картинка top_menu_separator.jpg, можно поменять ее цвет, но на сайте-образце разделителей нет, поэтому в таблице стилей этого класса просто удаляем свойство background.

Теперь то же самое с меню каталога товаров, за него отвечает тег

. Синяя верхняя полоса - это фон для тега

(menu_t.jpg), находящегося внутри тега

. Открываем эту картинку в photoshop и меняем цвет на коричневый. Вообще-то на сайте-образце цвет фона у меню белый, но мне кажется, что с коричневой полосой как-то симпатичнее. А вот внутри серый фон можно убрать, для этого надо поудалять свойства backgroud и border в стилях, отвечающих за пункты меню, а цвет самих пунктов сделать коричневым, а при наведении курсора мыши - подчеркнутым. Вот стили с изменениями:

И такие же изменения чуть ниже для пунктов меню, по которым мы щелкнули:

С меню все. Теперь нам надо убрать текст, который находится ниже меню каталога товаров. Эта надпись находится на странице index.php:

Как видите, это php-код, сделаем единственное исключение для этого случая и удалим его:

Теперь такая же ситуация у нас в

, хорошо бы убрать надпись "Русобои, Powered by Joomla! and designed by SiteGround web hosting", но она также подставляется программным кодом:

Мы также уберем этот код, но в теге с id="sgf" напишем название фирмы и значок копирайта:

Ну и, конечно, поменяем цвет на коричневый в стилях:

Наш сайт сейчас выглядит вот так:

Очень похож на оригинал. Нам осталось только пройтись по таблице стилей и изменить стили заголовков (h1, h2, h3...) и ссылок. Надеюсь, что вы уже поняли принципы корректировки шаблона, и сделаете это самостоятельно.

Как вы понимаете, если хорошо знать html и css, то шаблон можно изменить до неузнаваемости, все зависит лишь от вашей фантазии. Тренируйтесь и у вас все получится.