Геткурс. Оформление блока «Достижение пользователя»

Мини-инструкция о том, как можно стилизовать блок "Достижение пользователя в тренинге"

Прежде чем оформлять данный блок, он должен быть на странице

Шаг 1. Вставляем CSS код

CSS-код:

/* Шрифт Montserrat 400, 500, 700 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&display=swap');


:root {
  --fontM: "Montserrat", "proxima-nova", sans-serif;
}


/* ШКАЛА ДОСТИЖЕНИЙ */

.xdget-trainingAchievements {
  padding: 20px 20px 10px 20px;
  margin: 0 auto;
  border-radius: 12px;
  max-width: 440px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

/* Заголовок блока */
.xdget-trainingAchievements .table>thead>tr>th {
  border: 0;
  padding: 0 0 15px 0;
  font-size: 0;
  font-family: var(--fontM);
  font-weight: 700;
  text-align: center;
  vertical-align: middle;
  text-transform: uppercase;
  color: #333333;
}

/* Меняем строку заголовка */
.xdget-trainingAchievements .table>thead>tr>th::before {
  content: 'Мои достижения';
  font-size: 20px;
}


.xdget-trainingAchievements .table>tbody>tr>td {
  padding: 10px 0 10px 0;
  font-family: var(--fontM);
  vertical-align: middle;
}

.xdget-trainingAchievements .table>tbody>tr>td a {
  font-size: 16px;
  color: #242240;
}

/* Элемент с отображением баллов */
.xdget-trainingAchievements .badge {
  margin: 0 !important;
  padding: 4px 12px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 20px;

  /* Цвет плашки с баллами */
  background-color: #00aa8d;
}


@media (max-width:400px) {
  .xdget-trainingAchievements {
    padding: 15px 15px 10px 15px;
  }

  .xdget-trainingAchievements .table>thead>tr>th {
    padding: 0 0 10px 0;
  }


  .xdget-trainingAchievements .table>thead>tr>th::before {
    font-size: 18px;
  }

  .xdget-trainingAchievements .table>tbody>tr>td a {
    font-size: 14px;
  }

  .xdget-trainingAchievements .badge {
    font-size: 12px;
    padding: 3px 8px;
  }
}

/* </ ШКАЛА ДОСТИЖЕНИЙ */

После вставки CSS-кода и сохранения изменений блок принимает такой вид:

Шаг 2. Меняем видимое пользователю название шкалы

Это название можно изменить с помощью стандартных настроек шкалы в геткурсе

Шаг 3. Заменяем слово «балл» с помощью JS-кода

Настоить вид → Добавить блок →Javascript

JS-код:

$(document).ready(function () {
  $('.xdget-trainingAchievements .badge').text($('.xdget-trainingAchievements .badge').text()
    .replace('баллов', 'кристаллов')
    .replace('балла', 'кристалла')    
    .replace('балл', 'кристалл'));
});

* Вместо слов "кристалл" можно написать свои слова в необходимых склонениях

Наш результат: