Стандартное оформление Геткурс совсем не радует. Поэтому будем делать с вами вот такие компактные симпатишные плиточки. Да и относительно организации пространства, если у вас много тренингов/подтренингов, такой вариант приятнее.
А самое интересное в нем то, что за вас уже все сделано.
И превращение займет 2 минуты.
Шаг 1.
Сначала разберем установку плиток в какой-то конкретный тренинг, либо просто на главной.
А в конце покажу вам как это применить сразу на все в аккаунте.
Заходим в режим редактирования через «настроить вид», в том месте, где мы хотим внести «новизну»:
Шаг 2.
Если в тренинге у вас не используется шкала и правая колонка вцелом, то удаляем её, чтобы у наших плиточек было больше места.
Копируем вот такой код:
.stream-table { --min-width: 250px; /*ширина плитки в пикселях*/ --height: 150px; /*высота плитки в пикселях*/ --color: #fff; /*цвет*/ } .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); background-color: var(--color); } .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: all 0.5s ease-out; } .stream-table tbody tr:hover .stream-title { font-size: 1.5em; } .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%; } }
Или копируем такой вместо верхнего — этот код для плиток, в которых название тренинга расположено по центру:
body { background-color: #f0f0f0; /*цвет фона*/ } .stream-table { --min-width: 250px; /*ширина плитки в пикселях*/ --height: 150px; /*высота плитки в пикселях*/ } /*скрываем отображение количества уроков*/ /* .stream-table td > a > div {display:none;} */ .stream-table { margin-left:0!important; } .stream-table tbody { display:flex; flex-wrap: wrap; } tr[data-training-id] { display: flex; position: relative; height: var(--height); width: var(--min-width); border-radius: 5px; margin: 0 20px 20px 0; overflow: hidden; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.16); transition: 0.5s ease; } @media (max-width:850px) { .stream-table tbody tr { flex:0 0 calc(49%); } .stream-table tbody tr { height: var(--height); } } @media (max-width:510px) { .stream-table tbody tr { flex:0 0 100%; } } .stream-table tr a { height: 100%; width:100%; z-index: 2; position: relative; } .stream-table tbody tr:hover { box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.10) !important; } .stream-table tbody tr td { position:relative; display:flex; height:100%; width:100%; padding:0!important; background-color: #fff; } .stream-table tr td a { display: flex; flex-direction: column; justify-content: center; align-items: center; height: inherit; width: 100%; } .stream-table .stream-title { padding: 0 20px; text-align: center; font-weight: 300 !important; letter-spacing: normal; font-size: 1.0em; color: initial !important; display: block; transition: .3s; }
Заходим в редактор кода:
Вставляем наш код:
Обратите внимание, я в коде подписал цифры — это если вы захотите поменять ширину или высоту плиток.
Всё!
Шаг 3.
Если вы хотите поменять во всех тренингах сразу, то нет необходимости заходить в каждый и менять. Достаточно этот же код вставить в раздел счётчики только поместив его между тегами style:
<style> код плиток </style>
Добрый день! Спасибо за вашу работу! Код сработал только через счетчик, но отображает ячейки в новом для меня виде только на тренингах, в уроках не применяется. Если код ставить в самом тренинге, изменений нет 🙁
Добрый день, этот код на вид уроков не распространяется, только на вид тренингов.
Спасибо автору. Обновил. Красота. Если кто-то поможет за деньги сделать нам дизайн уроков также, то напишите в телеграм @semyonorlov
Спасибо большое за код, у меня получилось изменить вид уроков! Может можете подсказать еще как дописать код, чтобы была возможность вставить картинку в блок урока? Ну вот чтобы картинка была над названием урока, вот с этим не разберусь никак :(.
Буду очень благодарна за такую помощь!
Ольга, а подскажите пожалуйста, как у вас получилось поменять вид уроков? вы меняли код?
Добрый день! Все красиво работает на декстопе, но в мобильной версии плашки не кликабельны, то есть в уроки перейти нельзя… в чем может быть проблема?
Добрый день, напишите мне, пожалуйста, в телеграм @gcsetup, здесь подробности нужны
Здравствуйте! А как поменять цвет фона у плашек?
Добрый день, обновил код, добавил в него также выбор цвета вверху
А можно ли вас попросить обозначить в коде, где меняются цвета у всех шрифтов, или как сделать заголовок одним цветом, а остальной текст другим и так далее, а также как в цвет фона возможно вставить градиент?
Это просто базовый вариант плиток, который можно скопировать и поставить. Может быть отдельно распишу модификацию другую как-нибудь. У градиентов цвет также обозначается, поэтому переходите из поиска на любой генератор градиентов и вместо цвета вставляете код градиента.
Благодарю за код, очень полезно. вот только не смогла поменять белый цвет. Подскажите пожалуйста как это сделать?
6 строчка в коде — тут код нужного вам цвета подставляется — —color: #fff; /*цвет*/
Добрый Вечер!) Мне очень хочется,чтобы при открытии Тренинга были Модули,а у же в Модулях уроки))) Как это сделать? Подскажите,пожалуйста))
Здравствуйте, если я правильно понял ваш вопрос, то вам внутри тренинга нужно просто создать необходимое количество «подтренингов», а уже внутри них создавать уроки (а текущие можно переместить)
Благодарю, Вас за труд доступный нам в применении. Подскажите пожалуйста, есть ли решение без анимаций?
За анимацию тут отвечают два блока — удалите просто их из кода — строка 72-75 и 92-95
Добрый день! Большое спасибо, за полезную статью, все получилось.
Было бы здорово добавить информацию как менять цвет шрифта, может запишете урок или дополните код в данном уроке.
Пожалуйста 🙂
В строке 85 замените «color: initial !important;» на «color: #код_цвета !important;»
Добрый день,
Произвел все манипуляции, но вид тренинга без изменений.
Может ли быть проблема в том, что один из уроков у меня скрыт?
Или проблема может быть в стоп-уроках или уроки с пометкой важности задания?
Спасибо за обратную связь, заренее!
Или на плитки можно разбивать только подтренинги?
Если у меня в тренинге только уроки?
добрый день, у вас не изменилось отображение уроков или тренингов\подтренингов? На уроки этот код не действует.
Я добавил этот код в подтренинг, в котором только уроки.
Имеется ли возможность видоизменить уроки?
Данный код не меняет вид уроков, но вообще можно изменить, есть готовые решения по урокам в клубе магии — https://hellogc.blog/learn/klub-magii-getkurs/
Подскажите, можно ли изменить количество уроков или убрать вовсе эту надпись?
Добавьте код
.stream-table td a > div {
display: none;
}
Василий, спасибо за код.
Плиточки все получились. Но когда решила добавить код для скрытия количества уроков, то ничего не получилось.
Подскажите, куда его вставлять. И нет ли лишней скобки в коде после а?
.stream-table td a > div {
display: none;
}
лишней нет. Этот код можно просто после основного для плиток вставить.
Скажите а реально изменить цвет стоп уроков с красного на другой? помогите пожалуйста
цвет ярлычков у стоп-уроков можно задать таким кодом — просто свой код цвета подставьте
.lesson-list li.user-state-need_accomplish .user-state-bg {
background: #fff !important;
}
Спасибо, все получилось.
Благодарю за статью. А можно как-то поменять и внешний вид уроков?
Можно, но только другой код нужен, этот не подойдет 🙁
А на эти плитки подставить картинки можно?
Можно, но также только через написание кода. Вот здесь я разбирал пример с картинками https://hellogc.blog/style/oformlenie-treningov-s-kartinkoj/
Вася, приветик!
Подскажи как изменить цвет шрифта в плитках?
Привет, если брать верхний длинный код из статьи, то это 85 строчка
color: initial !important;
вместо initial код цвета вписать (импотант оставить)
Василий, спасибо за код, подскажи, пожалуйста, как изменить цвет надписи на плиточках?)