Меняем вид тренингов и подтренингов

Будем делать с вами вот такие компактные симпатишные плиточки. А то от стандартных уже устали глаза. Да и относительно организации пространства, если у вас много тренингов/подтренингов, этот вариант приятнее.

А самое интересное в нем то, что за вас уже все сделано.

И превращение займет 2 минуты.

Меняем вид тренингов и подтренингов
Содержание
  1. Шаг 1.
  2. Шаг 2.
  3. Шаг 3.

Шаг 1.

Сначала разберем установку плиток в какой-то конкретный тренинг, либо просто на главной.

А в конце покажу вам как это применить сразу на все в аккаунте.

Заходим в режим редактирования через «настроить вид», в том месте, где мы хотим внести «новизну»:

Меняем вид тренингов и подтренингов

Шаг 2.

Если в тренинге у вас не используется шкала и правая колонка вцелом, то удаляем её, чтобы у наших плиточек было больше места. 

Меняем вид тренингов и подтренингов

Копируем вот такой код:

.stream-table

{
    --min-width: 250px;  /*ширина плитки в пикселях*/
    --height: 150px; /*высота плитки в пикселях*/
}

.stream-table {
    margin-left: 0 !important; 
}

.stream-table tbody {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.stream-table tbody tr {
    width:var(--min-width);
    height:var(--height);
    margin: 15px 30px 15px 0 !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;
    transition: .3s;
    border: 1px solid rgba(0,0,0,0.10);

}

.stream-table tr td {
    padding: 0 !important;
    height: 100% !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.stream-table tr a {
    overflow: hidden;
    margin-bottom: 20px;
    height: 100%;

    display: flex !important;
    flex-direction: column;
}

a:focus {
    outline: none;
    outline-offset: unset;
}

a:focus, a:hover {
    text-decoration: none;
}

.stream-table tr a p {
    overflow: hidden;
}

.stream-table tr a div:last-child {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    padding: 0 20px;
    overflow: hidden;
}

.xdget-block.xdget-container {
 
}

.stream-table tbody tr:hover {
    background-color: !important;
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.10) !important;
}

.stream-table tr td:hover {
    background-color: inherit !important;
}

.stream-title {

    font-weight: 300 !important;
    letter-spacing: normal;
    font-size: 1.0em;
    color: initial !important;
    margin-bottom: 4px;
    display: block;
    padding: 20px 20px 0;
    transition: .3s;
}

.stream-table tbody tr:hover .stream-title {
    color: #ff6600 !important;
}

.stream-table tr a div {
    font-family: 'Roboto', sans-serif !important; 
    font-weight: 300 !important;
    letter-spacing: normal;
}

.stream-table tr a div b{
    margin-bottom: 4px;
    opacity: 0.6;
}

@media screen and (max-width: 991px) {
    .stream-table tbody tr {
        margin: 15px auto !important;
    }
}

@media screen and (max-width: 480px) {
    .stream-table tbody tr {
        margin: 15px auto !important;
        width: 100%;
    }
}

Заходим в редактор кода:

Меняем вид тренингов и подтренингов

Вставляем наш код:

Меняем вид тренингов и подтренингов

Обратите внимание, я в коде подписал цифры — это если вы захотите поменять ширину или высоту плиток.

Меняем вид тренингов и подтренингов

Всё!

Шаг 3.

Если вы хотите поменять во всех тренингах сразу, то нет необходимости заходить в каждый и менять. Достаточно этот же код вставить в раздел счётчики только поместив его между тегами style:

<style>
код плиток
</style>
Меняем вид тренингов и подтренингов

Оцените статью
Добавить комментарий

  1. Данила

    Добрый день! Спасибо за вашу работу! Код сработал только через счетчик, но отображает ячейки в новом для меня виде только на тренингах, в уроках не применяется. Если код ставить в самом тренинге, изменений нет 🙁

    Ответить
    1. Василий Брежнев автор

      Добрый день, этот код на вид уроков не распространяется, только на вид тренингов.

      Ответить