Стандартное оформление Геткурс совсем не радует. Поэтому будем делать с вами вот такие компактные симпатишные плиточки. Да и относительно организации пространства, если у вас много тренингов/подтренингов, такой вариант приятнее.
А самое интересное в нем то, что за вас уже все сделано.
И превращение займет 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 код цвета вписать (импотант оставить)
Василий, спасибо за код, подскажи, пожалуйста, как изменить цвет надписи на плиточках?)