Как использовать CSS для versatile-banner

Поддержка
1

Я хотел бы изменить цвет элементов «Развернуть» и «Свернуть» в баннере. Предполагаю, что это можно сделать с помощью CSS. Но как именно это сделать для компонента баннера?

2

Вот как это сделать:

  1. Откройте инструмент «Инспектор»:
    Перейдите на веб-страницу, где включён универсальный баннер. Щёлкните правой кнопкой мыши в любом месте страницы и выберите «Инспектор» (или нажмите Ctrl + Shift + I в Windows, или Cmd + Option + I на Mac). Это откроет инструменты разработчика браузера.

  2. Найдите баннер:
    Во вкладке Elements инструментов разработчика наведите курсор на различные части кода, чтобы увидеть соответствующие элементы веб-страницы, выделенные подсветкой. Когда найдёте баннер, щёлкните по внешнему тегу <div>, содержащему баннер. Это гарантирует, что вы выберете весь баннер и все его элементы.

  3. Изучите элементы:
    После выбора баннера вы сможете увидеть все вложенные HTML-элементы внутри структуры баннера во вкладке Elements. Это показывает иерархию HTML, использованную для создания баннера.

  4. Проверьте стили:
    Справа в инструментах разработчика вы найдёте вкладку Styles. Она отображает CSS-стили, применённые к выбранному элементу. Вы можете просмотреть наследуемые стили, встроенные стили и стили из внешних таблиц стилей.

  5. Экспериментируйте с изменениями:
    Выберите элемент внутри баннера и измените его стили непосредственно во вкладке Styles. Например, вы можете настроить цвета, размер шрифта, отступы, поля или любые другие CSS-свойства. Эти изменения временны и сразу отображаются на веб-странице, что позволяет вам свободно экспериментировать.

  6. Завершите дизайн:
    Как только вы останетесь довольны изменениями в дизайне, скопируйте изменённый CSS-код. Это может включать изменения, внесённые в отдельные элементы или во весь баннер.

  7. Примените изменения:
    Перейдите на https://yoursite.com/admin/customize/components, создайте компонент, затем откройте секцию редактирования HTML/CSS и вставьте изменённый CSS-код. Убедитесь, что вы указываете правильный класс или идентификатор баннера, чтобы стили применялись корректно, а затем примените этот компонент к вашей теме.

  8. Сохраните и проверьте:
    Сохраните обновлённый CSS, обновите веб-сайт и убедитесь, что баннер отображает изменения так, как задумано.

Также вы можете ознакомиться с: Как настроить CSS в Discourse

3

@MihirR отличные общие инструкции, большое спасибо.

Немного почитав, я понял, что в инструментах для веб-разработчиков Firefox имеет лучший редактор стилей, чем Chrome.

Но в моём конкретном случае у меня возникли серьёзные трудности: кнопки «Развернуть» и «Закрыть» меняют цвет при наведении, и я не могу найти, как установить базовый цвет. Похоже, что этот элемент имеет класс span.d-button-label.

4

Привет :wave:

Вот пример того, как изменить цвет этих кнопок.

.banner-box {
  .button-container {
    .btn {
      .d-icon,
      .d-button-label {
        color: var(--tertiary); // измените это на нужный цвет
      }
      // цвет при наведении и фокусе
      .discourse-no-touch & {
        &:hover,
        &:focus {
          .d-icon,
          .d-button-label {
            color: var(--tertiary-hover); // измените это на нужный цвет
          }
        }
      }
    }
  }
}
5

@Dan, это SCSS или LESS? Я немного отстал от современных CSS-технологий. Использует ли Discourse это без необходимости компиляции?

6

@Andro это SCSS :))

7

Так что Discourse понимает SCCS нативно?

8

Да, он нативно поддерживает SCSS.