Дорогие читатели, продолжаем для Вас публиковать материалы посвященные
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, ищем тег, отвечающий за шапку сайта, и находим его -
Щелкаем по плюсику рядом и смотрим, из чего состоит шапка сайта. Итак шапка сайта - это
, содержащий
, который в свою очередь содержит
. Ищем первые два идентификатора на странице 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, то шаблон можно изменить до неузнаваемости, все зависит лишь от вашей фантазии. Тренируйтесь и у вас все получится.
В этом уроке мы редактируем 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 на сайт мы сразу же обнаруживаем в футере копирайт – ссылку на разработчика, а также информацию на каком фреймворке работает данный шаблон.
В этом уроке мы рассмотрим как убрать ненужную нам информацию из футера, а также займемся оформлением футера (footer) .
Информацию об авторских правах используемом программном обеспечении можно отключить в "Менеджере модулей". Откройте меню "Расширения"→ "Менеджер модулей"
В Менеджере модулей через фильтр "Выбор позиции" находим модуль "footer".
Информацию, помещенную в модуле "Произвольного HTML-кода" в позиции "footer", вы можете заменить на свою.
Сохраним внесенные изменения и обновим страницу сайта. Итак, наш Copyright появился, а установленный по умолчанию исчез.
Но у нас остаётся без изменений нижняя строчка в футере: – ссылка на базе какого фреймворка сделан данный шаблон.
Посмотрим как его убрать. Воспользуемся расширением для Firefox Mozilla и проанализируем эту надпись.
Открываем вводим ссылку: "href="http://www.yootheme.com">Warp Theme Framework"
для поиска и видим, что она находится в шаблоне в файле config.php.
Переходим к файлу по директории: Z:\home\localhost\www\ваш_сайт\templates\ваш_шаблон\warp\config.php
С помощью текстового редактора Notepad++ открываем файл config.php
, и в форму поиска вводим скопированную ссылку: href="http://www.yootheme.com">Warp Theme Framework
Закомментируйте строку: // "branding" => "Powered by Warp Theme Framework"
и сохраните изменения. После обновления страницы сайта нижняя строчка в футере: "Powered by Warp Theme Framework"
исчезнет. Если вы решите после слова "branding" =>
написать свой бренд на русском языке, то не забудьте поменять кодировку на "Кодировать в UTF-8 (без BOM)."
В футере можно добавить коротенькое меню , вдруг ваш пользователь дочитав страницу сайта до конца заинтересуется какой-нибудь темой. И напоследок, давайте сделаем легкий бэкграунд для футера. Для этого снова воспользуемся расширением и проанализируем сам футер.
В случае с бесплатным шаблоном от студии YooTheme никакого цветового оформления для футера не предусмотрено. В нашем случае за оформление CSS-стилей отвечает файл theme.css
, а путь к нему можно увидеть после наведения курсора на название файла в правом верхнем углу (смотрите скриншот выше). Для оформления светло-серого фона для футера можно добавить в файл theme.css внутри класса, отвечающего за оформление футера следующую строку: background: none repeat scroll 0 0 #EEEEEE;
Итак, сегодня мы с вами научились убирать копирайты из футера, оформлять футер по своему усмотрению, а также задавать футеру свой фон.
Если стать оказалась вам полезной буду благодарен за лайк.