Каморка Геткурсовода 💻 | Канал Максима Елисеева
Поделюсь с вами лёгкой кастомизацией, которую вы сможете без проблем повторить и приукрасить стандартную форму Геткурса. А именно добавлением значков полям форм 😉 P.S. Телега немного перепутала порядок скриншотов, но я думаю вы поймете 😁 UPD: Поправил в…
This media is not supported in your browser
VIEW IN TELEGRAM
Немного пошаманил и показываю, как можно добавить некоторые возможности при стилизации и разнообразить некоторыми эффектами предыдущую лёгкую кастомизацию.
Сперва следует применить все наработки из этого поста, затем будем творить магию😮
Для начала отключим у Геткурсовских инпутов их выделение при фокусе (делается это на основе псевдокласса
Добавляем вот такой CSS:
😉
#лёгкая_кастомизация #полезная_фишка
Сперва следует применить все наработки из этого поста, затем будем творить магию
Для начала отключим у Геткурсовских инпутов их выделение при фокусе (делается это на основе псевдокласса
:focus-visible
) и допишем в имеющийся CSS такое правило:.field-content input:focus-visible {
border: none;
outline: none;
}
И теперь мы можем во всей красе использовать ещё один мало известный псевдокласс :focus-within
, который позволяет стилизовать элемент, если внутри него произошел фокус или же сам элемент был взят в фокус. Звучит сложно, да, но на деле отталкиваясь от этого мы можем присвоить стили всему, что лежит внутри этого родительского элемента, например нашему псевдоэлементу :after
, а так же стилизовать при этом input
.Добавляем вот такой CSS:
.field-content:focus-within input {
border: 1px solid red;
box-shadow: 0 0 5px red;
}
.field-content:focus-within::after {
color: red;
}
И получаем красивый, а так же стильный эффект на наших полях для ввода! #лёгкая_кастомизация #полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Предыдущая лёгкая кастомизация с полями формы вам определённо понравилась, поэтому я продолжу эту рубрику на канале ☺️
В этот раз я поделюсь с вами кастомизацией эффекта при наведении на мой любимый блок карточек (да-да, видели бы вы, сколько я издевался над ними в своих уроках в Магии Геткурса). Конкретно этот блок называется "Картинка - подзаголовок - заголовок - текст". При наведении на карточки получился интересный эффект преобразования формы картинки. В стили блока был прописан следующий CSS:
😉
P.S. для тех, кто в теме: обнаружил забавный факт, что если убрать галочку из Стилей "Гибкая вёрстка", то на😆
#лёгкая_кастомизация #полезная_фишка
В этот раз я поделюсь с вами кастомизацией эффекта при наведении на мой любимый блок карточек (да-да, видели бы вы, сколько я издевался над ними в своих уроках в Магии Геткурса). Конкретно этот блок называется "Картинка - подзаголовок - заголовок - текст". При наведении на карточки получился интересный эффект преобразования формы картинки. В стили блока был прописан следующий CSS:
.lt-tsr-content .image-wrapper {Благодаря этому мы получим вполне крутой эффект, который превосходно смотрится даже на стандартном блоке без всякой дополнительной кастомизации, который уже не стыдно показать
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.lt-tsr-content .image {
transition: 0.5s;
}
.lt-tsr-content:hover .image {
border-radius: 50%;
width: 200px;
height: 200px;
}
P.S. для тех, кто в теме: обнаружил забавный факт, что если убрать галочку из Стилей "Гибкая вёрстка", то на
image-wrapper
появятся флексы, а с image-card
уберутся ненужные абсолютные позиционирования с паддингом в размере 75%, что меня всегда сильно смущал. То есть flex ставится боксу с картинкой при отключении "Гибкой вёрстки". Л — логика #лёгкая_кастомизация #полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Без JS в современной web-разработке никуда 🙂
Поделюсь с вами очень простым, но безумно функциональным методом плавного открытия блока по кнопке. Буду использовать не нативный JS, а библиотеку JQuery, которую поддерживает Геткурс.
Для начала я создал блок, в котором разместил кнопку, и блок обычного текста. Самому тексту я присвоил класс
В появившемся окне ниже я вставляю следующий код, который взаимодействует с классом text-block и применяю метод
😎
#лёгкая_кастомизация #полезная_фишка
Поделюсь с вами очень простым, но безумно функциональным методом плавного открытия блока по кнопке. Буду использовать не нативный JS, а библиотеку JQuery, которую поддерживает Геткурс.
Для начала я создал блок, в котором разместил кнопку, и блок обычного текста. Самому тексту я присвоил класс
text-block
, а в кнопке поставил действие "Вызов JavaScript", которым, я уверен, мало кто пользуется.В появившемся окне ниже я вставляю следующий код, который взаимодействует с классом text-block и применяю метод
.slideToggle()
, который помогает плавно открывать и закрывать блок:$('.text-block').slideToggle();
А чтобы наш текстовый блок изначально не показывался на странице, зайдем в Стили блока и в "Подробных настройках" вставим следующий CSS:.text-block {
display: none;
}
Благодаря таким простым действиям мы получили плавную "раскрывашку" текста по клику на кнопку и достаточно быстро нестандартно и интересно кастомизировали страницу. А если добавить нужные по вашему дизайну стили, будет ещё круче #лёгкая_кастомизация #полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Делать разработку сложнее — не мой вариант. Если это утверждение подходит и для вас, то я думаю вам понравится то, что я нашел на просторах великого и могучего интернета.
Речь пойдет о сервисе enjoycss.com который может генерировать целые, уже застилизованные шаблоны. У сервиса есть встроенный мощный редактор, который тоже приятно радует своими возможностями. Сервис поможет застилизовать блоки, инпуты, кнопки, сгенерировать текст, бекграунд, тени и многое другое. После того, как всё сделали, можно запросить выдачу кода и по смыслу подставить в Геткурс к своим блокам к нужным классам.
Надеюсь, будет полезно тем, кто пока боится писать код самостоятельно, а красоту наводить хочется😎
P.S. Пригодится знание английского!
P.P.S. Или же воспользоваться автопереводом страницы😁
#полезная_фишка
Речь пойдет о сервисе enjoycss.com который может генерировать целые, уже застилизованные шаблоны. У сервиса есть встроенный мощный редактор, который тоже приятно радует своими возможностями. Сервис поможет застилизовать блоки, инпуты, кнопки, сгенерировать текст, бекграунд, тени и многое другое. После того, как всё сделали, можно запросить выдачу кода и по смыслу подставить в Геткурс к своим блокам к нужным классам.
Надеюсь, будет полезно тем, кто пока боится писать код самостоятельно, а красоту наводить хочется
P.S. Пригодится знание английского!
P.P.S. Или же воспользоваться автопереводом страницы
#полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Сделал интересную декоративную фишку для кнопки формы, и хочу поделиться ею с вами.
Бывает такая ситуация, что наш интернет барахлит, либо происходит слишком долгое ожидание от сервера самого ГК, и когда пользователь кликает на кнопку Оплатить/Записаться и т.д., то возможно длительное ожидание, в ходе которого пользователь не до конца понимает, формируется его заказ или нет. Да, Геткурс с недавних пор сделал значок загрузки на самой кнопке, но я предлагаю ещё больше разнообразить и показать пользователю, что его заказ формируется, и ему следует немного подождать, чтобы не было соблазна тыкнуть на кнопку формы ещё раз(и убить все процессы или задвоить заказ) .
Мой простенький скрипт позволяет добавить надпись на кнопке при нажатии что заказ формируется, а так же меняет цвет самой кнопки. Вы можете изменить этот цвет и текст под себя, как вам нравится.
Порядок установки:
1. Поставьте вашему блоку с формой любой класс. У меня этот класс
😎
Пользуйтесь😊
#полезная_фишка
Бывает такая ситуация, что наш интернет барахлит, либо происходит слишком долгое ожидание от сервера самого ГК, и когда пользователь кликает на кнопку Оплатить/Записаться и т.д., то возможно длительное ожидание, в ходе которого пользователь не до конца понимает, формируется его заказ или нет. Да, Геткурс с недавних пор сделал значок загрузки на самой кнопке, но я предлагаю ещё больше разнообразить и показать пользователю, что его заказ формируется, и ему следует немного подождать, чтобы не было соблазна тыкнуть на кнопку формы ещё раз
Мой простенький скрипт позволяет добавить надпись на кнопке при нажатии что заказ формируется, а так же меняет цвет самой кнопки. Вы можете изменить этот цвет и текст под себя, как вам нравится.
Порядок установки:
1. Поставьте вашему блоку с формой любой класс. У меня этот класс
my-form
2. Поставьте скрипт в блок JavaScript под вашу форму:$(function() {
let myForm = document.querySelector('.my-form'); // Здесь поменять класс на класс вашего блока
let formBtn = myForm.querySelector('.btn');
formBtn.addEventListener('click', function() {
this.innerHTML = ' Формируем заказ...';
this.style.backgroundColor = '#a0cfa0';
});
})
Обратите внимание, что если ваш класс у формы будет другим, то в вам в скрипте нужно поставить свой класс вместо .my-form
Пользуйтесь
#полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM
Проводите марафоны? Есть открытые уроки для всех зарегистрировавшихся? 😏
Тогда наверняка у вас есть красный значок уведомлений, который появляется каждый день, и там скапливается от 100 до 1000 а то и больше. И всё из-за открытых марафонов/уроков/вебинаров, где люди оставляют свою отметку, особенно если потом вам нужно всё это проверить и долго, нудно, утомительно протыкивать кнопку "Принять".
Поделюсь с вами небольшим лайфхаком, как сэкономить себе кучу времени, чтобы почистить ленту ответов. Всё благодаря кнопочке "Принять всё", которую я для вас подготовил. Она принимает все ответы, которые есть на текущей страницу ответов. Т.е. если у вас 8 страниц ответов, то по одному нажатию кнопки, вся текущая страница будет принята. Итого останется нажать её ещё 7 раз, т.к. ГК автоматически подтянет следующую страницу.
Устанавливать кнопку следует в Настройки аккаунта, в раздел "Счётчики и скрипты для BODY":
#лайфхак #полезная_фишка
Тогда наверняка у вас есть красный значок уведомлений, который появляется каждый день, и там скапливается от 100 до 1000 а то и больше. И всё из-за открытых марафонов/уроков/вебинаров, где люди оставляют свою отметку, особенно если потом вам нужно всё это проверить и долго, нудно, утомительно протыкивать кнопку "Принять".
Поделюсь с вами небольшим лайфхаком, как сэкономить себе кучу времени, чтобы почистить ленту ответов. Всё благодаря кнопочке "Принять всё", которую я для вас подготовил. Она принимает все ответы, которые есть на текущей страницу ответов. Т.е. если у вас 8 страниц ответов, то по одному нажатию кнопки, вся текущая страница будет принята. Итого останется нажать её ещё 7 раз, т.к. ГК автоматически подтянет следующую страницу.
Устанавливать кнопку следует в Настройки аккаунта, в раздел "Счётчики и скрипты для BODY":
<script>Кнопочка появится в вашей Ленте ответов справа сверху, примерно через 10 минут (зависит от загруженности сервера ГК, на котором располагается ваш проект) ✔️
$(function() {
if(window.location.href.indexOf('/teach/control/answers/unanswered') > -1) {
$('.container').append(`
<button class="btn btn-success accept-all" style="position: fixed; top: 20px; right: 20px;">Принять всё</button>
`);
$(function() {
var acceptBtns = document.querySelectorAll('.btn[value="accepted"]');
$('.accept-all').on('click', function() {
acceptBtns.forEach(e => e.click());
});
});
}
})
</script>
#лайфхак #полезная_фишка
Please open Telegram to view this post
VIEW IN TELEGRAM