Дорогие читатели, продолжаем для Вас публиковать материалы посвященные Joomla 3. Сегодня поговорим о том, как изменить фон Вашего сайта. На джумле сделать это довольно просто.
Меняем фон на сайте Джумла
Для начала Вам необходимо открыть Ваш сайт в любом браузере, для примера мы используем браузер Google Chrome .
1) Кликаем правой кнопкой мыши в том месте Вашего сайта, где Вы хотите изменить фон и выбираем пункт «Посмотреть код» (в других браузерах название может отличаться).
К примеру, мы решили изменить фон нашего сайта на красный. Поэтому кликаем мышью в правой или левой части сайта.
2) Перед нами появится окно, где будет указан исходный код страницы.
Здесь нас интересует значение background — color . Как видите, на сайте установлен сероватый оттенок. Давайте изменим его на ярко-красный. Для этого кликаем по квадратику с цветом и выбираем нужный нам оттенок. Запомните цифровое обозначение этого цвета (например у белого цвета оно f 000000).
Теперь закрыв окно исходного кода, мы увидим, что на сайте действительно изменился цвет фона.
Подберите нужный Вам оттенок и переходите к следующем пункту.
3) Подобрав нужный нам вариант, необходимо установить настройку этого цвета в административной панели Вашего сайта. Чтобы узнать, где именно расположен файл, отвечающий за цвет фона – вновь откроем окно «Посмотреть код».
Теперь наведите на название напротив тега body и Вы увидите в каком файле расположен код, отвечающий за смену цвета фона. Кстати, цифры после двоеточия, означают номер строки, где расположен этот код.
Запускаем вашу панель управления и находим этот файл.
Открываем файл и находим в нем строку номер 76. И меняем в ней значение background — color , именно сюда нам нужно вставить наш цифровой код цвета, который Вы выбрали.
Сохраняем изменения в файле, и после этого цвет фона Вашего сайта будет изменен.
Дата публикации: 2016-03-30
От автора: приветствую Вас уважаемые читатели. Внешний вид любого сайта, конечно же должен быть привлекательным и уникальным. Поэтому в данной статье я хотел бы показать Вам, как изменить фон сайта Joomla, так как такая маленькая деталь как цвет или изображение фона, могут существенно улучшить дизайн и восприятие пользователями Вашего проекта. Тем более что по данной теме очень часто задается множество вопросов.
Как Вы знаете все, что касается дизайна и оформления сайта на Joomla сосредоточено в шаблоне. Соответственно для изменения внешнего вида сайта, необходимо вносить правки в шаблон, а для этого нужны знания его принципа работы и структуры. Попросту говоря нужно уметь работать с шаблонами на уровне кода. Но, что же делать новичку, который только начинает изучать Joomla? Поэтому в данной статье я приведу Вам подробную инструкцию, для CMS joomla — как сменить фон пользовательской части сайта. При этом, ни каких специальных знаний не понадобится, только разве, что HTML и CSS на базовом уровне.
Итак, для начала хотел бы отметить, что шаблоны Joomla найдете в каталоге templates файловой структуры движка. Как правило, имя шаблона совпадает с именем папки в которой он располагается относительно вышеуказанного каталога. Поэтому Вы можете перейти в папку интересующего шаблона и посмотреть, как он устроен.
Для примера я использую стандартный шаблон Beez3.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Первое что бросается в глаза – это каталог css, где располагаются файлы с правилами CSS. То есть с правилами оформления отображаемых данных сайта. Соответственно изменяя правила – Вы измените внешний вид сайта. Теперь давайте перейдем в данный каталог.
Как Вы видите, для одного шаблона может быть предусмотрено несколько файлов со стилями. При этом каждый из них содержит правила для отдельного элемента сайта. Как же узнать, в каком файле описаны, необходимые правила – спросите Вы. Для ответа на данный вопрос, воспользуемся инспектором кода в браузере. Как для меня – наиболее удобный – это FireBug для браузера Mozilla Firefox.
То есть открыв данный инструмент для своего сайта Вы можете рассмотреть структуру необходимого элемента, к примеру нужного заголовка, абзаца или элемента . Помимо исходного кода того или иного элемента, в правом блоке, Вы видите стили которые к нему применяются. И что очень важно, вместе со стилями, приводится информация о файле, в котором они описаны, и более того – на какой строке файла, прописан конкретный стиль.
Внешний вид сайта очень важен, ведь, по сути, именно благодаря тому, что пользователи видят, они решают, остаться на веб-портале или же покинуть его.
Мы установили Joomla на хостинг https://s-host.com.ua/ и сейчас сайт выглядит стандартно, так же как сотни других веб-порталов. Именно поэтому стоит разобраться, как поменять шаблон и фон.
Установка шаблона
Для начала вам нужно скачать шаблон. К слову, вы можете воспользоваться одним из множества сайтов, предоставляющих доступ к каталогам с шаблонами Joomla (платными и бесплатными).
После того, как файл будет загружен на ваш компьютер, перейдите на страницу установки расширений — «Расширения»/»Менеджер расширений»/»Установить» и откройте вкладку «Загрузить файл пакета». Перетащите файл в поле Drag and drop file here to upload или же выберите его, нажав на кнопку Or browse for file.
После того, как шаблон будет установлен, вы увидите сообщение:
Теперь перейдите в раздел админки «Расширения»/»Менеджер шаблонов»/»Стили» и отметьте “звездочкой” шаблон по умолчанию:
На этом установка нового шаблона завершена. Кликните на него, чтобы перейти к более детальным настройкам (настройки зависят от установленного шаблона).
Проверьте, как новый шаблон отображается на вашем сайте:
Как видите, установка нового шаблона занимает от силы несколько минут. К слову, вы всегда можете вернуться к стандартному шаблону (protostar или Beez3), сделав его шаблоном по умолчанию.
Изменение фона
Для изменения фона нам подойдет модуль bgMax. Скачайте его на сайте разработчика или на странице расширений Joomla, а затем перейдите в админпанель сайта:
откройте раздел «Расширения»/»Менеджер расширений»/»Установить»;
перейдите на вкладку «Загрузить файл пакета»;
загрузите скачанный архив.
На этом установка расширения окончена и вам остается выполнить несколько настроек, прежде чем фон сайта изменится.
Настройка модуля
После успешной установки модуля в разделе «Расширения»/»Менеджер модулей» появится новый пункт — bgMax. Сейчас расширение выключено, однако это нужно исправить:
кликните на пункт bgMax;
выберите “Опубликовано” в поле “Состояние”;
присвойте модулю позицию (например, debug);
включите/отключите показ заголовка модуля:
выберите Only connected в поле Debug;
выберите изображение в медиа-менеджере (поле Background-image):
Обратите внимание на то, что вы можете установить несколько фоновых изображений, которые будут выводиться в случайном порядке. Для этого нужно заранее сделать следующее:
создайте в папке images/bgmax новый каталог (например, background) и загрузите в него несколько изображений;
выберите в поле Random in folder папку с изображениями:
выберите цвет фона под изображением (Color under image) или цветной изображение (or color-image (auto).
В следующем блоке настроек (IMAGE SIZE AND POSITION) нужно заполнить следующие поля:
Adjustment mode (выберите пункт MAX: screen wide (JS);
Position (выберите пункт fixed: dont move with content);
Horizontal Alignment и Vertical alignment (настройте выравнивание по вертикали и по горизонтали):
На этом основные настройки завершены. Перейдите на вкладку “Привязка к пунктам меню” и выберите страницы, на которых нужно поменять фон. Убедитесь в том, что модуль включен и ему присвоена позиция, прежде чем нажать кнопку “Сохранить”. Как вы помните, после установки движка на хостинг на сайте был стандартный фон, однако теперь он кардинально изменился:
