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

Часто бывает что в шаблоне что-то не устраивает. Например цвет какого либо элемента, его величина, размер шрифта и.т.д. А в настройках шаблона как на зло, нельзя внести изменения. Расстраиваться не стоит, можно подредактировать код в файле CSS.

Сейчас я выберу определённый элемент на сайте, найду и отредактирую код файла CSS отвечающий за этот элемент, тем самым изменю его внешний вид.

Всё это очень просто сделать с помощью браузера Mozilla Firefox, и установленного в него дополнения F irebug.

Установка Firebug в Mozilla Firefox

Откройте браузер Mozilla не ниже 3 версии и пройдите на официальный сайт Firebug . Там увидите вот такой оранжевый значок "Установить Firebug", кликните по нему. Вас перебросит на " mozilla.org".

Перейдя на " mozilla.org", нажмите "Добавить в Firefox ".

В открывшемся окне нажать "установить", после установки перезапустите браузер. Firebug готов к работе!

Редактирование шаблона joomla 3 в

Теперь в браузере мазила необходимо открыть страницу вашего сайта, с элементом который хотите редактировать. Я покажу вам на примере тестового сайта под управлением joomla 3 установленного на денвер . А корректировать буду блок главного меню.

После того как открыта страница сайта, включите Firebug. Для этого надо нажать на картинку жука, находящуюся в правом верхнем углу браузера Mozilla. Цвет должен изменится с серого на желтый.

В низу откроется панель Firebug, выглядит она так. (Для того чтобы увеличить изображение, кликните по нему).


Чтобы найти код интересующего нас элемента, в верхнем левом углу панели, нажмите на иконку "выделения объекта".

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

После его выделения, в правой части панели выводится код отвечающий за этот блок.

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

1. background-color : #F5F5F5 ; эта строка отвечает за цвет фона. М еняем на бирюзовый background-color : #00FFFF ;

2. border : 1px solid #E3E3E3 ; эта строка отвечает за границы блока. Поставим вместо одного пять пикселей и изменим цвет на коричневый border : 5px solid #800000 ;

3. border-radius : 4px ; здесь указан радиус, закругление по углам. Ставим 24 вместо 4 border-radius : 24px ;

Таким вот образом можно редактировать шаблон joomla 3, настраивая его внешний вид. Меняется практически всё на сайте: цвета, шрифты, размеры и.т.д.

Как изменить CSS шаблона joomla 3
Потренировавшись в панели и добившись нужных результатов, необходимо внести изменения в файл CSS. Здесь всё тоже достаточно просто.

Наведите курсор мыши на заголовок с названием файла CSS, рядом в скобочках виден номер строки с кодом, в моём случае "строка 2116". Перед вами откроется путь к файлу CSS.

1. Пройти по пути "sajtnajoomla.ru/templates/protostar/css/template.css"

2. Открыть файл "template.css", блокнотом Notepad++.

3. Найти 2116 строку, и отредактировать CSS код шаблона joomla 3.

Не забудьте предварительно сделать копию CSS файла, который будете редактировать! На этом всё, возникнут вопросы, задавайте в комментариях.

В этом туториале представлено краткое руководство по работе с архивными статьями в Joomla 3.x.

Архивирование статей позволяет сохранить их на вашем сайте Joomla на будущее, но делает их менее заметными для посетителей вашего сайта, так как такие статьи больше не отображаются вместе с остальным содержимым сайта. После архивирования эти статьи доступны к просмотру только из раздела меню «Архивные статьи» в Joomla, модуля «Архивные статьи» (Archived Articles), или поиском по имени статьи с помощью встроенного фильтра содержимого сайта Joomla.

Архивные статьи (Archive Articles)

Статьи можно легко заархивировать в Менеджере статей (Article Manager). Для этого необходимо выполнить следующее:

Отображение списка архивных статей посредством модуля

Можно настроить модуль Архивных статей (Archived Articles) для отображения списка архивных статей, упорядоченных по месяцам. Выполните следующее:


Отображение списка архивных статей посредством кнопки меню

Также можно создать кнопку меню «Архивные статьи» (Archived Articles) для отображения списка архивированных статей сайта. Выполните следующее:

    В панели управления Joomla перейдите в раздел Меню (Menus) , выберите меню, к которому добавите новый пункт и нажмите кнопку Создать (New) вверху справа в панели инструментов:

    Возле параметра Тип пункта меню (Menu Item Type) нажмите кнопку Выбрать (Select) . В возникшем всплывающем окне откройте вкладку Статьи (Articles) и выберите тип Архивные статьи (Archived Articles) из выпадающего списка:

    Теперь можно задать главные настройки пункта меню:


На этом туториал заканчивается. Теперь вы знаете, как работать с архивными статьями в Joomla 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, ищем тег, отвечающий за шапку сайта, и находим его -

  • Сергей Савенков

    какой то “куцый” обзор… как будто спешили куда то