Многие начинающие верстальщики действуя в соответствии с задумками дизайнера или своими желаниями задаются вопросом: как изменить фон главной страницы? Ну мало-ли, не все же любят белый фон.
Да и потом, современные дизайны очень... красочны. В них много сока, цвета, динамики. То и дело приходится играться с фонами блоков, регионов или целых страниц.
Итак, в этом деле нам поможет вездесущий twig и немного css кода.
Заходим в папку темы. Если у вас тема на bootstrap, находим папку templates/page, или templates/layout или templates/system.
Теперь определимся на какой странице мы хотим изменить фон: на какой-то одной или на всех разом? К примеру на главной странице поставим один фон, а на всех остальных - другой (или вообще без изменения).
Как изменить фон главной (или любой другой) страницы?
1. Находим файл шаблона страниц page.html.twig и копируем его. Переименовываем в page--front.html.twig. Front - это машинное имя главной страницы по-умолчанию. Но, если страница будет не главной, а какой-нибудь с адресом /node/10, то шаблон следует переименовать в page--node--10.html.twig.
2. Заходим в созданный шаблон. Теперь нам следует создать класс css, с помощью которого будет задаваться фон именно на главной странице.
Создаем блок с классом page-wrapper__front и помещаем в него содержимое основной части шаблона. Это блок словно оборачивает все содержимое.
3. Затем следует загрузить файл для фона. Можете воспользоваться IMCE менеджером или сбросить файл по ftp. Запомните URL адрес изображения, он нам понадобиться позже.
4. Затем в основном файле css, например, в style.css или main.css вашей темы следует внести изменения. Обычно файлы css располагаются в папке css.
Мы добавляем class page-wrapper__front и указываем путь к изображению.
Примерный код:
.page-wrapper__front {
color: #fff;
background-image: url(/sites/default/files/asphalt.jpg);
}
У меня фон темный, поэтому я сделал текст белым. Чтобы было лучше видно.
5. Чистим КЭШ командой: drush cr или в админке:
Вот результат:
Как изменить фон всех страниц?
1. Находим файл шаблона страниц page.html.twig и копируем его.
2. Заходим в созданный шаблон. Теперь нам следует создать класс css, с помощью которого будет задаваться фон на всех страницах, кроме перезаписанных, как, например, с главной страницей, если для нее создан отдельный шаблон.
Создаем блок с классом page-wrapper__all и помещаем в него содержимое основной части шаблона. Делайте по аналогии с примером выше.
3. Класс css создается исходя из того, какой фон нужно задать в качестве ссылки на картинку. Код также надо поместить в основной файл темы.
4. После всех работ очистить КЭШ.
Фон можно всячески изменять. Например, позиционировать свойством background-position, изменять размер свойством background-size, настраивать повтор через background-repeat и много чего еще. Смотрите подробней тут.
P.S. По сути, мы рассмотрели способы перезаписи и смены дизайна для страниц сайта. Создавайте шаблоны, привязывайте к ним классы. Создавайте красивые сайты на Drupal 8.
Ставьте лайк этой статье, если было полезно. Делитесь мыслями в комментариях, если вам есть что сказать.
До встречи в других статьях и видео-уроках!