DigitalLearning

Изменение цвета буллетов в блоке

❤️
За гайд спасибо Олегу (@Oleg_Selezen) и Вове (@vmkazakoff).

Вариант №1. Замена цвета во всех цифровых буллетах.

  1. Опубликуй курс
  1. Распакуй скорм
  1. Открой index.html
  1. В конце стилей допиши
      2. div[data-ba="blocks.blockList"] .block-list__number {
    background-color: #DDD !important;
}
      Не забудь указать свой цвет.
  1. Пакуй обратно в скорм все :)
Плюс такого решения: поменяет фон буллетов с цифрами по всему курсу без указания на конкретный блок. При повторной публикации достаточно вставить код и все.

Вариант №2. С помощью ID блока в data атрибуте

  1. Выполни шаги с 1 по 3 в первоначальном варианте.
  1. Открой консоль (F12) и наведи на нужный блок буллетов. Нас интересует ID блока data-block-id="ckpsr78tc002w396gerbn8ti3"
  1. В стили внизу вставь код
      2. div[data-block-id="ckpfm4a5x002x3a6gtclo0yv8"] .block-list__number {
    background-color: #DDD !important;
}
      Не забудь изменить ID блока и его цвет.
  1. Пакуй обратно в скорм все :)
Плюс такого решения: ID у блока не меняется. Достаточно скопировать код себе один раз. При повторной публикации курса достаточно снова вставить сохраненный код.

Вариант №3. C помощью data индекса

  1. Выполни шаги с 1 по 3 в первоначальном варианте.
  1. Открой консоль (F12) и наведи на нужный блок буллетов. Нас интересует порядковый номер индекса (data-ba-index="1"). Он у каждого блока свой.
  1. Открой index.html в любом редакторе кода и дописываем в стилях внизу (блок <style>)
      2. .noOutline[data-ba-index="1"] .block-list__number.brand--background {
  background: green!important;
 }
      Не забудь изменить цифру индекса на нужный тебе блок и название/код цвета на нужный тебе в свойстве background .
  1. Пакуй обратно в скорм все :)
Минус такого решения: индекс может меняться в райзе. При повторной публикации лучше сверить индекс блока если его перемещали в курсе.

Вариант №4. С помощью child

  1. Сделай шаги 1-3 основного варианта
  1. В конце стилей допиши
      2. .noOutline:nth-child(4) .block-list__number.brand--background {
          background: yellow!important;
}
  1. Укажи нужный тебе блок Чтобы указать нужный блок отсчитай его положение сверху вниз и укажи номер в “:nth-child(4)”
  1. Пакуй обратно в скорм все :)
Решение похожее на №2. Можно скопировать код себе и при обновлении курса вставлять. Будет работать до тех пор пока положение блока не изменится в курсе (сместится вверх/вниз).
 
badge