Как в joomla изменить шапку сайта

Joomla 3.x шаблоне нужно поменять шапку сайта

Site Joomla-Support.ru is not affiliated with or endorsed by the Joomla Project or Open Source Matters.
The Joomla logo is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.

Внимание! Проект Joomla-Support.ru официально никак не связан с Open Source Matters и не представляет Open Source Matters или Joomla! Project
Информация, опубликованная на форуме, не может считаться одобренной или рекомендованной Open Source Matters или Joomla! Project.
Название и логотип Joomla!® используются по ограниченной лицензии, предоставляемой Open Source Matters, владельцем торговой марки в Соединенных Штатах и других странах.

Как поменять шапку сайта на Joomla

Прошу не плевать в меня гуру, ведь для многих из них это задача когда-то казалось тоже верхом технической сложности и только опыт сегодня позволяет им сделать эту работу с закрытыми глазами. Замена стандартной пабликовой шапки – это хороший шаг к уникализации шаблона сайта, что позволит с минимальными трудозатратами создать привлекательный вид ресурса в соответствии со своими взглядами на гармонию и требованиями ПС. Перед началом работы неплохо сделать резервную копию сайта, если Ваш хостинг не делает это автоматом. Итак, для того чтобы поменять шапку сайта на Joomla нам не понадобится, как в прошлом уроке редактировать таблицу стилей CSS, а вполне достаточно иметь доступ к хостингу и строго следовать приведённым ниже этапам. Также в работе понадобится фоторедактор, в качестве которого отлично подойдёт Фотошоп, но можно ограничиться и встроенным в Windows редактором Paint (меню – программы – стандартные – Paint).

Ищем шапку и правим в редакторе

поменять шапку сайта на Joomla

Устанавливаем ftp-соединение с хостингом и движемся по адресу public_html/templates/ваш шаблон/images, где надо найти картинку шапки (рис 1). Задача это не сложная, так как можно просто банально открывать все подряд картинки, пока не попадётся нужная картинка, после чего её надо скопировать на компьютер и можно приступать к редактированию или созданию новой. В первую очередь, если решили шапку полностью поменять, надо запомнить её размер в пикселях, затем открыть редактор Paint и создать форму необходимого или близкого к этому размера. Тут вступают в работу скрытые в каждом из нас задатки художника (Остапа Бендера и Кису Воробьянинова в расчёт не берём). Первым этапом создаём необходимый фон элемента, украшаем его фото или картинками и делаем надписи, выбрав для этого место их расположения, шрифт, цвет и размер текста (рис 2). На многих сайтах в шапке из файла index.php прописывается заголовок h1, но это не правильно с точки зрения Seo, так как в этом случае у нас на всех страницах будет одинаковый заголовок. Санкций только за это не получить, но при совокупности факторов можно и попасть под фильтр, тем более, что такая неправильная структура ухудшает ранжирование страниц. Исходя из этого, лучше всего прописать главный девиз (высокопарно?) или слоган сайта в шапке (он не будет читаться роботами), а h1 выводить вручную или плагином на каждой странице в отдельности.

Сохраняем и заменяем шапку

После того, как элемент в редакторе готов, сохраняем его в формате 24-разрядного рисунка BMP. При этом слегка теряется его качество (незначительно), зато он имеет малый вес, что важно, ведь шапка будет загружаться на каждой странице и её значительный вес, например, в формате PHG замедлит загрузку. Не забываем сохранить созданную картинку под тем же именем для простоты её вставки, после чего копируем её на хостинг по тому же адресу public_html/templates/ваш шаблон/images и соглашаемся с предложением заменить файл. Как видим, поменять шапку сайта на Joomla не так и сложно, главное научиться правильно работать с редактором фотографий и не забывать делать бекап сайта, который позволит восстановить старую шапку в случае ошибки.

�� Советы оптимизатору
Joomla и Virtuemart

Как сменить шапку сайта в шаблоне? — Joomla 3.x: Общие вопросы

Сегодня важный день для проекта Joomla! Мы отмечаем два года напряженной работы наших добровольцев, решивших выпускать новую основную версию каждые два года. После большого количества обсуждений, спринтов по написанию кода и устранения ошибок этот день наконец настал и мы с гордостью объявляем о выпуске новой мажорной ( major ) версии Joomla 5.0, наряду с Joomla 4.4.

В Joomla Extensions Directory появился тег совместимости с Joomla 5.

Joomla-разработчики, проверившие совместимость своих расширений с Joomla 5 могут поставить галочку ��

JoomlaDay Spain, Madrid.

В Мадриде, Испания 5-6 октября 2023 года проходит Joomla Day — конференция, посвящённая как новичкам, так и профессионалам, работающим с Joomla.

Как изменить (отредактировать) шаблон Joomla?

Сразу оговорюсь, этот урок рассчитан на тех, кто знаком с 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 и меняем синие цвета на коричневые. Далее видим, что в меню есть разделитель (тонкая синяя полоска), за него отвечает , у которого есть фоновая картинка top_menu_separator.jpg, можно поменять ее цвет, но на сайте-образце разделителей нет, поэтому в таблице стилей этого класса просто удаляем свойство background.

Далее ссылки в меню надо сделать покрупнее и серыми, а при наведении курсора мыши — белыми. За ссылки в главном меню отвечает тег с , поменяем немного стили:

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

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

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

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

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

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

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

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

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

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

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