Как изменить background хедера и цвет ссылок в сабтеме Bootstrap?

Аватар пользователя nathan158 nathan158 21 июня 2020 в 23:02

Создал сабтему на основе темы Bootstrap.

В файле bootstrap_subtheme.libraries.yml прописан такой код:

framework:
  css:
    theme:
      css/style.css: {}

В файле bootstrap_subtheme.info.yml прописан такой код:

libraries-extend:
  bootstrap/framework:
    - bootstrap_subtheme/framework

И по пути my_project\themes\custom\bootstrap_subtheme\css я создал файл style.css. Но когда я захотел изменить background моего хедера и цвет текста ссылок - ничего не изменилось. Я думаю, что Drupal использует для хедера стили по умолчанию, которые не позволяют мне использовать мои собственные стили. Я даже посмотрел, какой файл стилей по умолчанию использует Drupal для моего хедера - navbar.less

Каким образом я могу изменить background моего header-а и цвет текста ссылок? И вообще это возможно? Или мне нужно удалить регион с хедером и создать свой собственный хедер в twig шаблоне чтобы иметь возможность стилизовать хедер?

Лучший ответ

Аватар пользователя OldWarrior OldWarrior 22 июня 2020 в 6:30

nathan158 wrote:... Каким образом я могу изменить background моего header-а и цвет текста ссылок? И вообще это возможно? ...

Возможно. Копайте CSS. Возможно где-то нужно поставить !important, хотя под бутстрепом обычно всё и так хорошо наруливается.

nathan158 wrote:... Или мне нужно удалить регион с хедером и создать свой собственный хедер в twig шаблоне чтобы иметь возможность стилизовать хедер?

Ничего не нужно удалять.

Комментарии

Аватар пользователя nathan158 nathan158 21 июня 2020 в 23:28

Не уверен что понимаю. Я только начал изучать Drupal. Кстати отредактировал мой вопрос.
Посмотрел в инструменты разработчика в моем браузере и там пишет что стили берутся из файла navbar.less. Тоесть получается что какие-то дефолтные стили блокируют мои стили. Как обойти эту проблему?

Аватар пользователя OldWarrior OldWarrior 22 июня 2020 в 6:30

nathan158 wrote:... Каким образом я могу изменить background моего header-а и цвет текста ссылок? И вообще это возможно? ...

Возможно. Копайте CSS. Возможно где-то нужно поставить !important, хотя под бутстрепом обычно всё и так хорошо наруливается.

nathan158 wrote:... Или мне нужно удалить регион с хедером и создать свой собственный хедер в twig шаблоне чтобы иметь возможность стилизовать хедер?

Ничего не нужно удалять.

Аватар пользователя vladtulku vladtulku 22 июня 2020 в 9:43

Ваши изменения появились в инструментах разработчика? Если нет, то значит неправильно прописали классы. Если да и они зачеркнуты, то смотрите что их перебивает. Если там же навести мышку на адрес строки типа navbar.less:935, то в всплывающей подсказке увидите адрес файла который перебивает. Возможно это cdn....

Аватар пользователя nathan158 nathan158 22 июня 2020 в 10:37

Да, мои измениния появились в инструментах разработчика. Навел мышку на адрес строки и показало вот такой адрес файла:
themes\custom\bootstrap_subtheme\includes\bootstrap\css\less\navbar.less

Но когда я перешел по этому адресу то никакой папки less где должен быть файл navbar.less не увидел.
Вот скриншот:

Думал может это скрытая папка но я проверил в настройках виндовс - у меня отмечено показывать скрытые файлы и папки

Как думаете в чем причина что нет этой папки?

Аватар пользователя OldWarrior OldWarrior 22 июня 2020 в 11:31
1

nathan158 wrote:... когда я перешел по этому адресу то никакой папки less где должен быть файл navbar.less не увидел ... может это скрытая папка ... в чем причина что нет этой папки?

Причина в том, что у вас скомпилированные стили, а не .less-исходники. Инспектор свойств CSS в браузере просто понимает, "откуда есть пошло". Работайте с CSS-файлами, всё можно нарулить как обычно. И less вам не нужен.

PS. Front-end, говорите? )

Аватар пользователя nathan158 nathan158 22 июня 2020 в 12:08

Если я вас правильно понял лучшим способом будет в моем созданном и подключенном файле style.css возле всех css свойств которые блокируются дефолтными стилями прописать !important. Правильно?

Аватар пользователя OldWarrior OldWarrior 22 июня 2020 в 12:20

Это сложно назвать лучшим способом - скорее от безысходности. Я повторюсь, что в бутстрепе в большинстве случаев не возникает проблем с переопределением правил/стилей. И модификатор приоритета !important обычно не требуется. Но пробуйте. Хотя у меня подозрение, что причина где-то в другом месте. Неизвестно, что и каким образом вы там пытаетесь переопределить.

Аватар пользователя nathan158 nathan158 22 июня 2020 в 12:46

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

Кажется у меня есть предположения в чем может проблема.

Я ж сначала скачал bootstrap тему потом сделал на ее основе свою сабтему. Кроме того у меня подключен режим дебагина. И например чтобы изменить цвет линков в хедере я могу проделать такие операции:

1) В браузере посмотреть в инструментах разработчика как нужно переопределить twig шаблон:

Там пишет что нужно: menu--main.html.twig переопределить в menu.html.twig

2) Cкопировать с контрибной темы Bootstrap в свою кастомную сабтему в папку templates menu--main.html.twig и переопределить на menu.html.twig

3) Поменять цвет линков на нужный в файле styles.css

Таким образом нужно было делать?

Аватар пользователя runner12 runner12 22 июня 2020 в 10:43

В любом подключенном файле стилей - перепишите стили хедера. Рекомендую использовать приоритет тэга и !important.