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

Поддержка
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