Как изменить фон сайта Joomla

Как изменить фон сайта Joomla

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии (1)