Joomla как изменить шаблон сайта

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

Как установить шаблон на сайт

Для начала нужно разобраться с инсталляцией темы оформления на ресурс. Это основное действие, которое вы должны уметь осуществлять даже с закрытыми глазами. Установка шаблона в Джумла — очень простой навык, которым грех не владеть.

Для начала вам нужно загрузить на диск компьютера файл шаблона. Обычно, в каталогах распространяют архивированные файлы макетов, и если вы нашли zip или tar.gz, то это хорошо. Движок Joomla тем и славится, что им очень легко управлять. Буквально за считанные минуты вы сможете изменить оболочку сайта, переодев его в другой шаблон.

Для изменения темы оформления ресурса вам необходимо пройти в «Менеджер расширений». Далее вам предстоит нажать «Загрузить файл пакета» и отыскать архив шаблона на компьютере. После загрузки нажмите на кнопку активации установки макета — тема постепенно начнет инсталлироваться. Либо если вы не скачивали файл на компьютер, то можете вписать URL в специальное поле и движок сам загрузит и установит шаблон на сайт.

Еще один вариант установки шаблона, который используют не так часто, как предыдущий — это загрузка распакованного шаблона сразу на хостинг при помощи FTP-менеджера. Главное в этом деле — это не ошибиться с папкой, куда вы отправляете дистрибутивы шаблона. Если поместите в неправильную директиву, то макет не появится в менеджере шаблонов, а может и нарушит работу некоторых составляющих сайта. Вам необходимо найти папку templates и внутри нее создать каталог для данного шаблона. Затем перейдите в админку в «Менеджер расширений» и нажмите на «Поиск» — движок отыщет загруженный вами шаблон на хостинге.

Как редактировать внешний вид шаблона в Joomla

После установки шаблона сайта можно перейти к самому интересному — вам предстоит его отредактировать под свои потребности.

Настройка макета — это интересное занятие, которое обязательно вас втянет в себя с головой, вот увидите!

Но для начала вам нужно разобраться, что к чему, и данное руководство в этом поможет.

Дело в том, что шаблоны Джумла состоят из блочной системы, впрочем, как и макеты многих других движков. Это удобно и легко для освоения, и в этом вам необходимо разобраться. Иногда настройка макета доступна прямо из админки. Такое бывает редко и в основном только в случае, если вы установили на сайт платный макет. В иных же случаях вам придется иметь дело напрямую с кодом шаблона. Не стоит этого боятся, как уже говорилось, — у современных макетов простая блочная система. Чтобы редактировать какой-то элемент, вам лишь нужно найти соответствующий блок в коде всего макета.

К счастью, поиск необходимых элементов в шаблоне не придется вести вручную. Настройка макета значительно облегчится, если вы будете использовать специальный браузер. Под словом «специальный» имеется ввиду такой браузер, при помощи которого можно просматривать код страницы в целом и отдельных элементов. Примером такого браузера является Гугл Хром. Чтобы увидеть, в каком месте кода находится конкретный элемент, вам нужно лишь навести мышкой на него, нажать правую кнопку и выбрать пункт «Просмотр кода элемента». После этого браузер откроет выбранную часть кода, и вы сможете увидеть нужный вам блок.

Далее, чтобы поменять настройки блока, вам необходимо отредактировать его при помощи специального редактора. Для этого можете установить популярный Notepad++, либо же использовать стандартные возможности своей операционной системы, к примеру, легендарный Блокнот. Вам необходимо будет загрузить весь код внешнего оформления шаблона в блокнот. Затем нажмите Ctrl+F — включится «Поиск». Найдите ту часть кода, какую высветил вам браузер при нажатии на код элемента. А затем откорректируйте нужные вам данные.

Если вы не понимаете, что нужно редактировать, тогда вам придется посвятить несколько вечеров чтению тематических статей по написанию CSS. Либо просмотрите в Интернете видео — их сейчас хватает. Главное, что вы должны понять — это какой тег, за что отвечает. Некоторые составляющие легко осмыслить, зная элементарный английский. К примеру, тот же цвет в CSS обозначается, как color. До этого не сложно дойти собственными умозаключениями.

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

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

Вам остается лишь определить, каким должен быть ваш сайт, а затем найти подходящие инструменты для реализации этой затеи!

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

Что такое шаблон?

Шаблон для системы управления контентом Joomla – это расширение, которое определяет оформление страниц пользовательской части CMS. Конечно, есть шаблоны, которые предназначены для панели администратора, но они используются значительно реже. При этом Вы должны понимать, что шаблон формирует основную структуру и задает позиции для отображения модулей. То есть, как формируется шапка сайта, как и сколько, будет создано боковых сайд-баров, как формируется футер, где будет отображаться основной контент и т.д. А содержимое сайта, то есть его контент (к примеру, материалы), формируется непосредственно в компонентах, вместе с дизайном. Таким образом, казалось бы, что некоторая часть не управляется шаблоном и может отображаться в несколько ином виде, нежели весь сайт. Но в шаблоне, для тех элементов, дизайн которых формируется отдельно, предусмотрены переопределения. То есть в шаблоне можно переопределить оформление и дизайн элементов, которые формируются в расширениях Joomla. Но, конечно же, если данные расширения поддерживают такую возможность.

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

Как изменить шаблон джумла?

Первым делом давайте установим новый шаблон в систему управления контентом Joomla, а затем разберемся с вопросом о замене. Итак, переходим в панель администратора, далее – менеджер расширений.

Выбираем архив с шаблоном, который необходимо установить и кликаем по ссылке “Загрузить и установить”.

После завершения установки, переходим в менеджер шаблонов (Расширения ->Менеджер шаблонов).

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

Теперь, непосредственно переходим к ответу на вопрос — как изменить шаблон джумла? Итак, в менеджере шаблонов, напротив заголовка каждого установленного шаблона, отображается кнопка, используя которую можно назначить, определенный шаблон, в качестве шаблона по умолчанию, для соответствующего раздела CMS. То есть – это обычный переключатель, используя который мы указываем новый шаблон, а соответственно предыдущий – деактивируем.

Таким образом, используя, выше указанные элементы управления, Вы сможете изменить шаблон в системе управления контентом Joomla.

В данное время создано огромное количество шаблонов, но очень часто не удается отыскать, шаблон, который идеально подходил, под разрабатываемый сайт. И в этом случае, наилучшее решение – это создание собственного шаблона. О чем собственно рассказывается в курсе Joomla – Мастер. С нуля до премиум шаблона.

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

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

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

Для шаблонов в Joomla отведена специальная папка «templates», в корне которой каждый шаблон имеет свою собственную одноименную папку. Все без исключения шаблоны состоят из файлов, причем количество этих файлов у разных шаблонов может отличаться. Но есть и стандартные файлы, без которых не будет работать ни один шаблон:

• index.php – индексный файл, он определяет структуру сайта
• templateDetails.xml – данный файл содержит всю информацию о шаблоне и служит для установки шаблона через панель управления
• Файлы стилей (.css) – с их помощью определяется оформление страниц

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

Какие бывают шаблоны

Разновидностей шаблонов достаточно большое количество, их можно классифицировать по фреймворкам, на которых они написаны или другим параметрам, но все разновидности шаблонов можно разделить на две большие категории:

• Шаблоны для сайта – меняют облик и дизайн сайта
• Шаблоны для панели управления – данный вид шаблонов предназначен именно для панели управления, на сайт они никак не влияют.

Работа с шаблонами Joomla 3

С разновидностями, местом хранения и файлами шаблонов разобрались, теперь поговорим о том, как работать с шаблонами при помощи панели управления. Для начала давайте перейдем в раздел «Шаблоны: Стили (Site)» («Расширения» -> «Шаблоны») и посмотрим, какие шаблоны уже присутствуют в базовой сборке CMS Joomla:

На странице «Шаблоны: Стили (Site)» видно, что в нашем распоряжении имеется два шаблона Beez3 и Protostar, последний установлен по умолчанию для всех страниц сайта, обратите на это внимание ведь в Joomla один и тот же сайт может состоять из нескольких шаблонов. И для различных разделов сайта можно назначить свой собственный шаблон, тем самым сделать сайт более привлекательным.

Давайте откроем один из шаблонов для редактирования и посмотрим, что и как можно отредактировать:

На первой вкладке с именем «Подробно» мы видим некую информацию касательную данного шаблона, тут же разработчики нам пишут, что шаблон использует фреймворк Bootstrap.

Следующая вкладка «Дополнительные параметры» содержит базовые настройки шаблона, тут мы можем поменять цвет текста и фона сайта, логотип, заголовок шрифты и прочие настройки:

И последняя вкладка — «Привязка к меню» именно с её помощью можно назначить шаблон для всего сайта или для определенных разделов. Просто отмечаем те пункты меню, для которых будет определен данный шаблон:

Позиции модулей в шаблоне Joomla 3

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

Как узнать или где посмотреть позиции модулей в Joomla 3? Для этого в Joomla предусмотрен специальный предварительный просмотр, но по умолчанию он недоступен (выключен) и его необходимо включить в настройках.

Для того чтобы включить отображение позиций модулей в Joomla 3 необходимо на странице «Шаблоны: Стили (Site)» нажать на кнопку «Настройки». После этого мы попадем на страницу «Настройки менеджера шаблонов», на которой выставляем переключатель «Просмотр позиций модулей» в положение «Включено»:

После этого снова переходим на страницу менеджера шаблонов – «Шаблоны: Стили (Site)» и жмем на иконку с изображением глаза расположенную чуть левее названия шаблона:

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

Создание собственных позиций модулей

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

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

Переходим от слов к делу, для начала открываем файл templateDetails.xml, который находится в корневом каталоге шаблона. Вникать в его суть сейчас нет смысла, нас интересуют только позиции для модулей, они объявлены между строчками <position>имя-позиции-модуля</position> (строки 28-47 шаблона Protostar). По умолчанию их 18 штук:

Для того чтобы объявить свою позицию модулей добавляем дополнительную строку (либо несколько строк) такого вида:

<position>my-module-position</position>

Сохраняем файл, его можно закрыть, главное запомнить имя позиции, под которой вы его объявили.

Теперь открываем файл index.php и добавляем в него новый блок DIV, который будет являться контейнером для новой позиции модулей. Я для примера решил создать новую позицию для модулей в футере сайта. Пишем в футер следующий код:

div>
 <jdoc:include type="modules" name="my-module-position" style="none" />
</div>

Вот и все, позиция создана, можно зайти в раздел «Менеджер шаблонов» и проверить её наличие. Код индексного файла у меня получился таким:

Давайте разберем код, который отвечает за вывод модуля, он начинается со строки:

jdoc:include

Далее надо указать тип подключаемого элемента, в нашем случае это модуль, так и пишем:

type="modules"

Теперь необходимо указать имя позиции модуля, которое мы указали в файле templateDetails.xml:

name="my-module-position"

За стиль кода модуля отвечает параметр style, который имеет несколько вариантов оформления, по умолчанию «none», в этом случае заголовок модуля не будет выводиться на страницах сайта.

Конечный результат кода, который отвечает за вывод модулей в определенной позиции, как вы уже поняли, выглядит следующим образом:

<jdoc:include type="modules" name="my-module-position" style="none" />

Вот таким образом можно создавать собственные позиции модулей абсолютно в любом шаблоне Joomla 3. Процесс как видите совершенно не сложный.

Расширенные параметры шаблона Joomla 3

Мы уже рассмотрели базовые настройки шаблона, узнали про позиции модулей и как их посмотреть в Joomla 3. Сейчас поговорим о расширенных параметрах шаблонов, посмотрим, где и как изменять файлы шаблона и создавать переопределение для модулей, компонентов и макетов.

Для доступа к дополнительным параметрам шаблона переходим в раздел «Расширения» -> «Шаблоны» -> «Шаблоны»:

Жмем на ссылку «Параметры имя_шаблона» и попадаем на страницу изменения параметров шаблона, которая состоит из трех вкладок — «Редактор», «Создать переопределение», «Описание шаблона»:

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

Следующая вкладка, которая нас интересует это вкладка «Создать переопределение». Тут мы можем переопределить модули, компоненты либо макеты сайта, а в дальнейшем изменять их по своему усмотрению не внося изменений в оригинальные файлы:

О том, как создавать переопределение, подробно написано в статье «Переопределение в Joomla 3», а на данном этапе нам просто необходимо понимать, где и что редактируется в шаблоне.

На последней вкладке «Описание шаблона» написана небольшая информация по данному шаблону, данная вкладка нам не интересна.

На этом урок подошел к концу, а в следующем мы поговорим о том, как обновить Joomla 3 и какие могут быть ошибки в процессе обновления.



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

Итак, нам осталось изменить шаблон сайта, чтобы он стал похож
на образец. Для того чтобы изменить шаблон, нам необходимо знать,
из каких элементов состоят наши страницы, т.е. их html-разметку и стили. Файлы нашего сайта, как вы помните,
находятся в C:Program FilesApache Software FoundationApache2.2htdocsoboi. Интересующие нас файлы находятся в папке
templates (шаблоны)siteground-j15-1 (наш шаблон). Т.е. полный путь —
C:Program FilesApache Software FoundationApache2.2htdocsoboitemplatessiteground-j15-1.

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

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

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

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

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

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

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

Теперь надо также заменить картинки слева и справа этого div-а, возвращаемся в FireFox, щелкаем по плюсику рядом с <div id=»whitebox_t»>
и видим его содержимое: <div id=»whitebox_tl»> — отвечает за левый угол и <div id=»whitebox_tr»> — отвечает за правый угол.
Ищем эти идентификаторы на странице template.css

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

Снова щелкаем по тегам на панели Firebug, ищем тег, отвечающий за шапку сайта, и находим его — <div id=»header»>

Щелкаем по плюсику рядом и смотрим, из чего состоит шапка сайта. Итак шапка сайта — это <div id=»header»>, содержащий
<div id=»header_r»>, который в свою очередь содержит <div id=»logo»>. Ищем первые два идентификатора на странице template.css

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

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

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

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

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

Это изображение мы и сохраняем, как header.jpg (правой кнопкой мыши — Сохранить изображение как). Теперь идем на страницу стилей и
меняем название изображения в теге <div id=»header_r»>:

Смотрим на результат и видим, что вставленное изображение шире нашей шапки. Действительно наше изображение имеет высоту 181 пиксел,
Значит наши теги <div id=»header»> и <div id=»header_r»> должны иметь высоту 181 пиксел (высота изображения) + 2 пиксела
(так как должна быть видна белая полоска внизу), т.е. 183 пиксела. К тому же сама картинка должна быть прижата к верху (top),
а не к низу (bottom), как сейчас указано в стилях. Давайте добавим эти изменения:

Теперь будем разбираться с <div id=»logo»>, именно он отвечает за внешний вид надписей в шапке. У нас это одна надпись
слева — Русобои (название фирмы), а нам необходимо сделать две надписи: одну слева — название и слоган, а другую справа —
с адресом и телефоном. Итак, ищем идентификатор logo на странице стилей:

На странице index.php видим, что в <div id=»logo»> выводится ссылка с названием фирмы посредством программного кода, который
мы договорились не трогать, да нам это и не нужно, ведь название у нас такое же (его, кстати, при желании можно изменить из
администраторской зоны, поменяв название сайта).

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

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

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

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

Только вот коричневая полоска наверху портит все дело. Давайте ее уберем, как вы помните за ее вывод отвечает
тег <div id=»whitebox»>. Идем на страницу index.php, находим этот div и удаляем его вместе со всем содержимым:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• Как внести незначительные изменения в css, html, js или php файлы шаблона сайта Joomla?
• Выбор файла шаблона Joomla в админке для изменения
• Встроенный редактор шаблона сайта в админке Joomla
• Кнопка «Сохранить» при редактировании шаблона Joomla
• Кнопка «Сохранить и закрыть» при редактировании шаблона Joomla
• Кнопка «Закрыть» при редактировании шаблона Joomla

Как внести незначительные изменения в css, html, js или php файлы шаблона сайта Joomla?

Иногда требуется внести незначительные изменения в css, html, js или php файлы шаблона сайта. Можно конечно вносить изменения локально на компьютере, а потом заливать их на сервер или воспользоваться средствами, предоставляемые хостингом, но в Joomla есть стандартные инструменты для этих задач. В этой статье рассмотрим, как можно изменять файлы шаблона сайта непосредственно из админки Joomla 3.

Мы уже знаем, как попасть в раздел админки «Изменить шаблон» менеджера шаблонов сайта, а также, как выйти из него. Для того, чтобы начать редактировать файлы шаблона нужно (оказавшись в Менеджере шаблонов сайта Joomla 3. «Изменить шаблон») в закладке «Редактор» воспользоваться навигацией по папке шаблона. Зайдя в нужную папку (открытие папок происходит по клику мышкой), выбрать файл, в который нужно внести правки.

Встроенный редактор шаблона сайта в админке Joomla.

Файл также открывается кликом по его имени в навигационном меню слева.

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

Внимание! После нажатия кнопки «Сохранить» и кнопки «Сохранить и закрыть» все изменения в файле становятся необратимыми. И откатить назад их уже не реально. Поэтому нужно быть предельно осторожными и осознавать, что за изменения вносятся. Ну и BackUp в помощь.

Кнопка «Сохранить» при редактировании шаблона Joomla.

Чем хороша кнопка «Сохранить», так это тем, что изменения в файл вносятся, но окно редактирования файла не закрывается. Это позволяет вносить изменения в файл на сервере, при этом постоянно контролировать то, что происходит с внешним видом сайта (кнопка «Обновить» или клавиша F5 в помощь).

Кнопка «Сохранить и закрыть» при редактировании шаблона Joomla.

После того, как все необходимые изменения внесены и проверены, можно нажать на кнопку «Сохранить и закрыть».

Кнопка «Сохранить и закрыть» сохраняет изменения в файле на сервере и закрывает окно его редактирования.

Кнопка «Закрыть» при редактировании шаблона Joomla.

Если хочется просто посмотреть код файла или не сохранять внесённые в окне редактора изменения, нужно воспользоваться кнопкой «Закрыть» или просто перейти в левой панели в другую папку и/или выбрать другой файл.

Внимание! Это самый надёжный способ не внести изменений в файл. Пока не нажата кнопка «Сохранить» или кнопка «Сохранить и закрыть», всё, что было написано или удалено, ещё не попало в файл на сервере, и можно безопасно выйти из режима редактирования или открыть другой файл.

Таким образом можно работать с модификацией шаблонов шаблона сайта Joomla в админке в Менеджере шаблонов сайта Joomla 3 «Изменить шаблон».

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Выберите, то, чем пользуетесь чаще всего:

Шаблоны Joomla

11812 Просмотров

Привет!

В данной статье мы рассмотрим, как редактировать внешний вид шаблона Joomla.

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

Сейчас почти все шаблоны для Joomla общедоступны, скачать и установить их на сайте может каждый.

Давайте на примере разберем видоизменение стандартного шаблона Beez5.

Изменение заднего фона шаблона (background)

Я использую браузер Chrome, нажимаем F12 или щелкаем правой клавишей мыши на нужном месте и нажимаем «Просмотр кода элемента».

Как видно на рисунке, за задний фон шаблона отвечает тег body со стилем background.

В стилях указан цвет фона #EEE и фоновая картинка (путь к ней). Именно эти параметры дают нам фон сайта.

Для их изменения нужно просто заменить эти параметры (указать новый цвет и путь к новой картинке).

Пример:

Все изменения производятся в файле, который указан в панели разработчика, здесь это beez5.css, после двоеточия указана строка в которой нужно изменять параметр, у нас это 19 строка.

Путь к файлу можно посмотреть, если навести на название курсором.

Изменение логотипа сайта

Изменять логотип очень легко и для этого есть несколько способов.

Способ 1:

Так же, как и в первом способе, наводим курсор на логотип, щелкаем правой клавишей мыши и нажимаем Просмотр кода элемента. Все, что нам надо узнать, это адрес (путь) к логотипу. Теперь делаем свой логотип, даем ему такое же имя (fruits.gif) и просто заменяем на него старый логотип.

Способ 2:

Этот способ самый легкий, но встречается не во всех шаблонах. Идем в: Менеджер шаблонов — Beez5 (стиль) — Указываем логотип.

Способ 3:

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

Менеджер шаблонов — Beez5 — Изменить шаблон главной страницы.

Ищем строчку с <h1 id=»logo»> и изменяем путь к логотипу на нужный. В данном шаблоне путь прописан на php, так как есть вариант №2. Поэтому лучше воспользоваться вариантом №1 или №2.

Изменить ширину шаблона и блоков

Находим главный блок — div. Как видно на картинке, это <div id=»all»> именно он отвечает за ширину сайта. Смотрим параметры css — стилей, находим widthи указываем нужную ширину. После этого заходим в файл position.css, в 33 строке пишем параметр и сохраняем файл.

Таким же образом редактируются отдельные блоки. Находим блок, смотрим и изменяем стиль.

Изменение цвета текста и ссылок

Все это делается так же. Щелкаем правой клавишей мыши на тексте и нажимаем Просмотр кода элемента. Нам покажет блок и стиль блока отвечающий за параметры текста. Цвет текста и ссылок задается параметром — color.

Все файлы могут редактироваться через редакторы типа notepad++ или через стандартный «редактор» Joomla.

Менеджер шаблонов — Нужный шаблон. Тут Вам выдается список файлов (index.php, шаблон страницы 404, шаблон страницы печати, стили.)

На этом все.

Ваше мнение важно для нас. Пишите Ваши комментарии.

Хотите комплексно решить Ваш вопрос? 

Перейдите в наш раздел видео-курсов