Как сделать задний фон joomla
Уроки по созданию сайтов
Как в joomla сделать картинку фоном
Изображения в материалы Joomla добавляются достаточно просто, используя стандартные инструменты встроенного визуального редактора, но вот что касается создания фона, здесь у начинающих веб-мастеров возникают вопросы, а значит в данной статье я постараюсь привести ответы на них.
Итак, в стандартном функционале Joomla не предусмотрены инструменты для управления фоном сайта, а так же фоном создаваемых материалов. Поэтому мы будем использовать правила CSS для реализации вышеуказанного функционала. А значит, хотел бы сделать краткий экскурс, в правила языка CSS, которые используются для определения фона.
Свойство background
Фон выбранного элемента в языке CSS определяется универсальным свойством background, при этом в качестве фона можно использовать как определенный цвет, так и изображение. Заметьте, что данное свойство позволяет определить до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Синтаксис свойства следующий:
То есть в качестве фона мы используем изображение, путь к которому прописан в параметре url, в качестве цвета фона — #fc0, при этом изображение будет повторяться по вертикали.
Но, если в данном уроке мы с Вами говорим о изображении как фоне некоторого блока, значит универсальное свойство background нам ни к чему. Поэтому мы остановимся более подробно на дочернем свойстве background-image, благодаря которому можно присвоить конкретное изображение в качестве фона.
Вышеуказанное свойство работает в паре с параметром url, в котором определяется путь к изображению используемого в качестве фона. Заметьте, что путь необходимо указывать относительнотого элемента, в котором используется свойство. То есть, если свойство указывается в файле CSS, то относительно расположения данного файла, необходимо определять путь к изображению.
Теперь возникает вопрос, как использовать свойство background-image? Для начала рассмотрим случай, когда необходимо добавить изображение в качестве фона для некоторого материала. Как Вы знаете материалы – это динамический контент, который формируется в менеджере материалов, используя встроенный визуальный редактор.
Поэтому форматируя материал, Вы можете определить фон для будущих абзацев или участков текста. Для этого необходимо открыть исходный код в редакторе, используя специальный инструмент.
А затем заключить интересующий участок текста в произвольный блок, к примеру
При этом правило CSS, указано непосредственно в материале, а значит путь к изображению указывается относительно корневого каталога CMS Joomla, так как все запросы пользователя обрабатываются единой точкой входа – файлом index.php. Закончив правки, кликаем по кнопке “ОК” для возвращения в редактор.
Соответственно, если все указано верно, в визуальном редакторе мы увидим интересующий нас фон. Далее необходимо просто сохранить создаваемый материал. Обратите внимание, что я использовал пару дополнительных свойств для более красивого расположения изображения:
background-position: center – позицияфона;
background-repeat: no-repeat – запрет повторения изображения фона.
Таким образом, для материала в джумла 3, картинка как фон статьи устанавливается достаточно легко. Но как быть, если необходимо добавить фон в произвольный блок сайта, отличный от материала? В этом случае потребуется прописать вышеуказанные правила, в файл со стилями CSS. Напомню, что дизайн сайта Joomla, формируется в шаблоне, то есть шаблон задает основную структуру сайта, которая определяется как HTMLэлементами, так и правилами CSS. Конечно, все что касается правок шаблона, требует дополнительных знаний, а именно хотя бы основ структуры шаблонов Joomla, но это необязательно, так как современные инструменты, помогут узнать, в какой файл шаблона, нужно добавить необходимый код.
Итак, хотел бы порекомендовать Вам очень полезный плагин для браузера Mozilla FireFox, под названием FireBug, который не только отображает исходный код страниц, а и показывает стили CSS привязанные к определенным HTML элементам, и что главное — предоставляет информацию о файле, в котором они описаны.
А значит, определяемся с элементом, для которого будет назначен фон, далее открываем вышеуказанный плагин, выбираем данный элемент и немного правее – в окне плагина Вы увидите свойства CSS, привязанные к данному блоку.
Здесь же располагается имя файла, в котором описаны данные свойства.
Соответственно далее, Вам достаточно в найти данный файл и указать необходимые правила CSS. После этого интересующее изображение будет назначено в качестве фона.
Как изменить фон сайта Joomla
Дата публикации: 2016-03-30
От автора: приветствую Вас уважаемые читатели. Внешний вид любого сайта, конечно же должен быть привлекательным и уникальным. Поэтому в данной статье я хотел бы показать Вам, как изменить фон сайта Joomla, так как такая маленькая деталь как цвет или изображение фона, могут существенно улучшить дизайн и восприятие пользователями Вашего проекта. Тем более что по данной теме очень часто задается множество вопросов.
Как Вы знаете все, что касается дизайна и оформления сайта на Joomla сосредоточено в шаблоне. Соответственно для изменения внешнего вида сайта, необходимо вносить правки в шаблон, а для этого нужны знания его принципа работы и структуры. Попросту говоря нужно уметь работать с шаблонами на уровне кода. Но, что же делать новичку, который только начинает изучать Joomla? Поэтому в данной статье я приведу Вам подробную инструкцию, для CMS joomla — как сменить фон пользовательской части сайта. При этом, ни каких специальных знаний не понадобится, только разве, что HTML и CSS на базовом уровне.
Итак, для начала хотел бы отметить, что шаблоны Joomla найдете в каталоге templates файловой структуры движка. Как правило, имя шаблона совпадает с именем папки в которой он располагается относительно вышеуказанного каталога. Поэтому Вы можете перейти в папку интересующего шаблона и посмотреть, как он устроен.
Для примера я использую стандартный шаблон Beez3.
Хотите узнать, что необходимо для создания сайта?
Посмотрите видео и узнайте пошаговый план по созданию сайта с нуля!
Первое что бросается в глаза – это каталог css, где располагаются файлы с правилами CSS. То есть с правилами оформления отображаемых данных сайта. Соответственно изменяя правила – Вы измените внешний вид сайта. Теперь давайте перейдем в данный каталог.
Как Вы видите, для одного шаблона может быть предусмотрено несколько файлов со стилями. При этом каждый из них содержит правила для отдельного элемента сайта. Как же узнать, в каком файле описаны, необходимые правила – спросите Вы. Для ответа на данный вопрос, воспользуемся инспектором кода в браузере. Как для меня – наиболее удобный – это FireBug для браузера Mozilla Firefox.
Как поменять шаблон и фон в Joomla
Внешний вид сайта очень важен, ведь, по сути, именно благодаря тому, что пользователи видят, они решают, остаться на веб-портале или же покинуть его.
Мы установили 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 (настройте выравнивание по вертикали и по горизонтали):
На этом основные настройки завершены. Перейдите на вкладку “Привязка к пунктам меню” и выберите страницы, на которых нужно поменять фон. Убедитесь в том, что модуль включен и ему присвоена позиция, прежде чем нажать кнопку “Сохранить”. Как вы помните, после установки движка на хостинг на сайте был стандартный фон, однако теперь он кардинально изменился:
Как сделать картинку фоном
Как сделать картинку фоном в HTML
Так как многие начинающие вебмастера или малознакомы или совершенно незнакомы с HTML и CSS, я на примере статьи покажу, как можно изменить фон материала. Стиль фона мы будем прописывать непосредственно в материале (в HTML-редакторе). Однако замечу, не смотря на то, что встроенные стили будут работать, старайтесь всё-таки работать по правилам, т.е. стили прописывать в соответствующих файлах CSS. Для начала разберём свойства, которые мы будем использовать для создания стиля фона.
Фон (background)
В CSS фон сайта определяет такое универсальное свойство, как background. Оно позволяет установить одновременно до пяти характеристик фона:
background-image – устанавливает фоновое изображение, в качестве значения используется путь к файлу (url(путь к файлу));
background-position – задаёт начальное положение изображения (left, center, right, top, bottom);
background-attachment – устанавливает, будет ли изображение прокручиваться вместе с документом или займёт фиксированное положение (fixed, scroll, local);
background-repeat – устанавливает, как будет повторяться изображение (repeat-x, repeat-y, space, round, no-repeat);
background-color – определяет цвет фона (цвет, transparent, inherit).
Теперь, когда у вас есть набор инструментов, и вы знаете возможности каждого из них, можно приступать к работе.
Пример. Допустим, нам необходимо создать равномерный узорный фон для статьи.
1. Найдём в Интернете небольшую картинку (см. рис) и закачаем её на сервер, к примеру, в папку images. Таким образом, относительный адрес картинки у нас будет images/uzor.png:
2. Если не задано начальное положение картинки, по умолчанию картинка будет находиться в левом верхнем углу. Так как это нас вполне устраивает, мы не будем указывать с помощью background-position начальное положение картинки, но чтобы замостить узором весь фон, нам нужно указать, чтобы наша картинка повторялась (repeat):
3. Дополнительно укажем, чтобы картинка прокучивалась вместе с документом (scroll):
и прописываем для него стиль (style):
Сокращённая запись кода выглядит так:
В сокращённой записи мы указываем свойства background через пробел. Вы можете воспользоваться любой из этих двух записей.
Далее, открываем нашу статью в HTML редакторе и копируем код в нужное место статьи.
В Joomla входим в Менеджере материалов открываем статью для редактирования, в редакторе кликаем по значку HTML. Копируем код в нужное место статьи.
И вот что получилось
Мы создали фон для страницы, но, почитайте вторую часть статьи, и вы убедитесь, что в CSS все это делается гораздо проще.
Как сделать картинку фоном в CSS
В первой части статьи мы встроили стиль прямо в статью. А ведь сделать картинку фоном в CSS не только правильнее, но и гораздо проще. Во-первых, уменьшится количество тегов в документе, по сравнению с вышеописанным методом. Во-вторых, мы присвоим нашему стилю класс, а это значит, что данный стиль мы сможем применять и для других страниц сайта.
Давайте тот стиль, который мы создавали в первой части статьи и напрямую встроили в HTML документ, перенесем в CSS, а затем добавим класс стиля к нашему тексту (или фрагменту текста).
.blokbg1 <
background-image: url(‘/images/uzor.jpg’);
background-repeat: repeat;
background-attachment: scroll;
>
div.blokbg1 <
background-image: url(‘/images/uzor.jpg’);
background-repeat: repeat;
background-attachment: scroll;
>
В первом варианте наш стиль может быть применен к любому элементу, во втором – только к блокам div.
2. Теперь применим созданный класс «blokbg1» к элементу
Фон для сайта (свойство CSS background)
Если вы заметили, слегка приукрасил Дизайн Манию, добавил текстуры в фон. Сразу же появилась идея рассказать вам как именно мне удалось это сделать. Открываю данным постом рубрику «Верстка» раздела «Веб-дизайн». В данной категории планирую публиковать статьи, заметки, рекомендации и уроки по HTML, CSS, а также, возможно, JavaScript. Материал постараюсь размещать простой и с пояснениями, чтобы понятно было всем читателям. Думаю, подобная информация пригодится многим блоггерам, которые хотят, но не могут подправить собственные дизайны из-за отсутствия навыков верстки.
Итак, с помощью свойства background можно установить цвет, положение, изображение, привязку и повторяемость бекграунда как для отдельного элемента, так и для всего сайта. Последнее, по сути, является заданиям настроек для тэга body. Рассмотрим все свойства, связанные с фоном (background). Если вы только учитесь, то самым лучшим вариантом усвоения урока будет практическое применение свойства в таком же порядке, как я рассматриваю ниже:
Background-color
Задает цвет фона. Можно применять к отдельным элементам
или ко всему сайту через через тэг :
/* черный фон сайта */ body < background-color: #000; >/* черный фон заголовка, белый цвет шрифта */ h1
Background-image
Используется для вставки фонового изображения, при этом в css указываем ссылку на картинку:
Обратите внимание как указан путь к изображению — это означает, что оно должно находится в той же самой папке, что и css файл стилей. В противном случае следует указывать полный путь к изображению. Опция пригодится если вы захотите, например, добавить кликабельный фон на сайте.
Background-size
Определяет размер фонового изображения.
Для свойства есть несколько интересных особенностей. Кроме числовых значений размеров (px,pt) можно использовать процентные или автоматическое вычисление (auto — например для одной из стороны картинки — 500px auto). Данное свойство применяется для создания фона для сайта с картинкой на весь экран.
Если указать значение cover, то фон будет масштабироваться дабы ширина и высота картинки = ширине и высоте блока. Если использовать значение contain, то масштабирование будет с сохранением пропорций чтобы изображение полностью поместилось в блок.
Background-repeat
Используемое в предыдущем примере изображение будет «растиражировано» (повторяется) по всему экрану. Данное свойство призвано управлять этим процессом. Имеется несколько допустимых значений:
background-attachment — данное свойство определяет будет ли фоновое изображение фиксироваться при прокрутке страницы:
Background-position
Задает расположения рисунка относительно экрана, по умолчанию оно выводится в левом верхнем углу. Значение этого свойства представляет собой набор координат Х (по горизонтали) и Y (по вертикали), которые начинаються с левого верхнего угла. Может задаваться:
Все эти настройки могут быть записаны в одном свойстве background, порядок следования свойств:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
background: #000 url(«my-image.jpg») no-repeat fixed left bottom;
Если какое-то свойство пропускается, то его значение установлено по умолчанию.
Надеюсь, данный урок вам пригодился, подписываемся на обновления блоге через RSS, дальше вас ожидает еще много интересных секретов!