YouTube замедляют, а ваши автовебинары там? Перенести их на GetCourse, чтобы не просесть в продажах
ИНСТРУКЦИЯ
ИИ-бот GetCourse
ИИ-бот
Добрый день!
Я - бот-помощник по документации платформы Getcourse, помогу вам найти ответ на справочный вопрос по работе системы. Пожалуйста, сформулируйте свой вопрос одним сообщением.
Статья была полезной?
Важно
Статья предназначена для продвинутых пользователей, имеющих базовые знания верстки (HTML, CSS и JavaScript). Предоставленная информация носит ознакомительный характер и не является руководством по написанию кода.
Сотрудники технической поддержки не оказывают консультаций по написанию кода или по внесению изменений в написанный вами код. Если информации из данной статьи недостаточно для решения вашего вопроса, рекомендуем воспользоваться услугой платной верстки от специалистов GetCourse.
Чекбокс на сайте — элемент интерфейса в виде небольшого квадрата, в котором пользователь может поставить или снять галочку (флажок), чтобы, например, согласиться с вашими условиями или отказаться от них.
В статье разберем, где на GetCourse используются чекбоксы, а также как с помощью стороннего кода изменить их стандартное оформление, чтобы оно соответствовало стилистике вашего сайта и визуально подчеркивало важность заполнения этого поля.
![Чекбокс на сайте Чекбокс на сайте](https://fs17.getcourse.ru/fileservice/file/download/a/116/sc/335/h/a08ca717b5fba7dd7c70d7f10d17d78b.gif)
Где на GetCourse используются чекбоксы
На GetCourse чекбоксы используются в следующих случаях:
Когда необходимо, чтобы при регистрации или создании заказа пользователь согласился с политикой конфиденциальности или условиями оферты.
Подробнее в статье → «Как добавить во все формы подтверждение согласия с офертой или с условиями обработки персональных данных».
![<p>
Чекбокс согласия на обработку персональных данных</p> <p>
Чекбокс согласия на обработку персональных данных</p>](http://fs-thb01.getcourse.ru/fileservice/file/thumbnail/h/51450d47f59c440ffa96062cfa33c1d3.png/s/s1200x/a/116/sc/140)
Чекбокс согласия на обработку персональных данных
Когда необходимо, чтобы при регистрации или создании заказа пользователь дал согласие на получение рассылок.
Подробнее в статье → «Как добавить чекбокс для согласия на получение рекламных рассылок».
![<p>Чекбокс согласия на получение рассылок</p> <p>Чекбокс согласия на получение рассылок</p>](http://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/ff31efbe433fbc83911740bf97ab3e86.png/s/s1200x/a/116/sc/297)
Чекбокс согласия на получение рассылок
- Когда на форму добавлено собственное дополнительное поле с типом «Да/Нет», например, чтобы пользователь мог согласиться с вашими внутренними правилами или условиями.
Подробнее в статье → «Как использовать дополнительные поля на GetCourse».
![<p>
Чекбокс подтверждения в виде дополнительного поля</p> <p>
Чекбокс подтверждения в виде дополнительного поля</p>](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/552f8b0bd47b3b2c1eff372c98c03a04.png/s/s1200x/a/116/sc/230)
Чекбокс подтверждения в виде дополнительного поля
- Когда какое-либо согласие/подтверждение нужно получить в анкете.
Подробнее в статье → «Как работать с анкетами на GetCourse».
![<p>
Чекбокс в анкете</p> <p>
Чекбокс в анкете</p>](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/d65ee5ef3d59c371d7c8b8d129aa6cb1.png/s/s1200x/a/116/sc/346)
Чекбокс в анкете
- Когда поле согласия нужно разместить в уроке, чтобы ученик мог согласиться с какими-то условиями при прохождении задания.
Подробнее в статье → «Задания в уроках».
![<p>
Чекбокс в задании</p> <p>
Чекбокс в задании</p>](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/43dcc2de5b10a66eb9487a4989e1eeb8.png/s/s1200x/a/116/sc/301)
Чекбокс в задании
От чего зависит стандартное оформление чекбокса
Чаще всего чекбокс выглядит как небольшой квадрат, при клике на который появляется галочка, а сам он закрашивается голубым цветом. Однако в разных браузерах оформление чекбокса может отличаться, если в них используются собственные стили.
![Чекбокс в браузере Google Chrome Чекбокс в браузере Google Chrome](http://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/06eaaf98b99e95bf706dfc99087788d2.png/s/s1200x/a/116/sc/235)
![Чекбокс в браузере Opera Чекбокс в браузере Opera](http://fs-thb01.getcourse.ru/fileservice/file/thumbnail/h/4758d8d900e71d34647b9c983f7ad90f.png/s/s1200x/a/116/sc/125)
Как изменить стандартное оформление чекбокса
Если вам не подходит стандартное оформление чекбокса или вы хотите, чтобы он сочетался с общим стилем страницы, используйте CSS-код.
Рассмотрим несколько примеров кода, который вы можете адаптировать под себя и свои задачи. О том, как добавить подготовленный код в аккаунт на GetCourse, рассказываем в разделе ниже [перейти ↓].
Примеры кода:
Изменение основного цвета чекбокса
Чтобы изменить основной цвет чекбокса с проставленной галочкой, используйте следующий код ниже, где #3a9f21
— hex-код цвета, который вы можете заменить на свой. Узнать hex-код нужного цвета можно на сторонних сервисах, например, → get-color.ru.
input[type="checkbox"] { accent-color: #3a9f21; }
![<p>Стандартное оформление</p>
<p>Стандартное оформление</p>](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/3d772bda2edbf5fb08749c9943bc0404.png/s/s1200x/a/116/sc/243)
Стандартное оформление
![<p>Оформление с CSS-кодом</p>
<p>Оформление с CSS-кодом</p>](http://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/b90223e69bf28c39b4e2f0afc38a766e.png/s/s1200x/a/116/sc/248)
Оформление с CSS-кодом
Обратите внимание
Изменение цвета может не срабатывать в некоторых версиях браузеров.
В качестве альтернативного способа вы можете полностью изменить оформление чекбокса, как показано в разделе «Установка собственной иконки чекбокса» [перейти к разделу ↓].
Изменение размера чекбокса
Чтобы изменить размер чекбокса, используйте следующий код, где width — ширина, height — высота.
input[type="checkbox"] { width: 20px; height: 20px; }
![<p>Стандартное оформление</p> <p>Стандартное оформление</p>](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/3d772bda2edbf5fb08749c9943bc0404.png/s/s1200x/a/116/sc/243)
Стандартное оформление
![<p>Оформление с CSS-кодом</p> <p>Оформление с CSS-кодом</p>](http://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/230bdbacd936f23b0c28ca60bb2e83d9.png/s/s1200x/a/116/sc/318)
Оформление с CSS-кодом
Установка собственной иконки чекбокса
Если вы хотите полностью изменить оформление чекбокса:
- Найдите или создайте подходящую иконку галочки без рамки в формате SVG или PNG. Желательно, чтобы она была такого же размера, как и сам чекбокс, например, 20×20px. Бесплатные иконки в формате png можно скачать на → flaticon.com.
- Загрузите ваше изображение в файловое хранилище аккаунта.
![<p>
Как загрузить файл в файловое хранилище</p> <p>
Как загрузить файл в файловое хранилище</p>](http://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/bd42b94a4e97ca04798d13c4e6018e16.png/s/s1200x/a/116/sc/148)
Как загрузить файл в файловое хранилище
- Скопируйте ссылку на загруженное изображение.
![<p>
Как скопировать ссылку на изображение</p> <p>
Как скопировать ссылку на изображение</p>](http://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/f538595d397b8acbdc9d5c9e58a106ff.png/s/s1200x/a/116/sc/315)
Как скопировать ссылку на изображение
- Используйте код ниже, чтобы отменить стандартное оформление чекбокса:
input[type="checkbox"] { appearance: none; margin-top: 0; } input[type="checkbox"]:focus { outline: none; }
- Добавьте к нему следующий код, чтобы настроить оформление чекбокса в неактивном состоянии. Рядом со свойствами, которые можно менять по своему усмотрению, добавлены комментарии, выделенные знаками
/*...*/
input[type="checkbox"]:before { content: ""; display: inline-block; width: 20px; /* ширина */ height: 20px; /* высота */ background-color: #eaeaea; /* цвет фона */ border: 1px solid #525b6e; /* ширина и цвет рамки */ border-radius: 6px; /* скругление углов */ }
- Добавьте к имеющемуся коду последнюю часть, чтобы изменить оформление чекбокса в активном состоянии. Рядом со свойствами, которые можно менять по своему усмотрению, добавлены комментарии, выделенные знаками
/*...*/
input[type="checkbox"]:checked:before { border-color: #038C8C; /* изменённый цвет рамки */ background-color: #fff; /* изменённый цвет фона */ background-image: url("ссылка-на-изображение"); /* ссылка из файлового хранилища с иконкой галочки */ background-size: 80%; /* размер иконки */ background-repeat: no-repeat; background-position: center; }
В итоге у вас получится следующий код, который можно добавить к определенному блоку, на страницу или в урок:
input[type="checkbox"] { appearance: none; margin-top: 0; } input[type="checkbox"]:focus { outline: none; } input[type="checkbox"]:before { content: ""; display: inline-block; width: 20px; height: 20px; background-color: #eaeaea; border: 1px solid #525b6e; border-radius: 6px; } input[type="checkbox"]:checked:before { border-color: #44944A; background-color: #fff; background-image: url("https://fs17.getcourse.ru/fileservice/file/download/a/198593/sc/117/h/0efc8821947572c435d4597d7c90cac8.png"); background-size: 80%; background-repeat: no-repeat; background-position: center; }
С указанными в коде значениями чекбокс выглядит следующим образом:
![<p>Пример чекбокса с собственным оформлением</p> <p>Пример чекбокса с собственным оформлением</p>](https://fs02.getcourse.ru/fileservice/file/download/a/116/sc/290/h/bad8c1db2a4a64b94157e2780eecd497.gif)
Пример чекбокса с собственным оформлением
Куда добавлять CSS-код в аккаунте GetCourse
В зависимости от задачи вы можете применять код как к отдельным блокам, так и к урокам, страницам или всему аккаунту.
Изменение чекбокса в отдельном блоке
Если вы хотите изменить чекбокс в отдельной форме, анкете или задании, то добавьте код в подробные настройки стиля нужного блока.
![<p>Подробные настройки стиля блока на странице</p>
<p>Подробные настройки стиля блока на странице</p>](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/da1f58d2ca666d8b0abac7023849e58c.png/s/s1200x/a/116/sc/288)
Подробные настройки стиля блока на странице
![<p>Подробные настройки стиля блока в уроке</p> <p>Подробные настройки стиля блока в уроке</p>](http://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/1b0838806ad05e16050cc1d1c316001a.png/s/s1200x/a/116/sc/10)
Подробные настройки стиля блока в уроке
Изменение всех чекбоксов в уроке/на странице
Если на странице или в уроке несколько блоков с чекбоксами, то используйте блок «CSS-код» из раздела «Вставка». В этом случае код применится сразу ко всем блокам.
![<p>Блок CSS-код</p> <p>Блок CSS-код</p>](http://fs-thb01.getcourse.ru/fileservice/file/thumbnail/h/353a53a35603bf9451d82fdece6c09fd.png/s/s1200x/a/116/sc/242)
Блок CSS-код
Изменение чекбокса на странице со старым конструктором
Старый конструктор используется в настройках вида тренинга и на системных страницах, например, на странице входа.
Чтобы добавить CSS в стили такой страницы, нажмите на </>
.
![<p>
Как вставить CSS-код в стили страницы</p> <p>
Как вставить CSS-код в стили страницы</p>](http://fs-thb01.getcourse.ru/fileservice/file/thumbnail/h/02b4ef6c018c1f61b6aedc964c11a779.png/s/s1200x/a/116/sc/235)
Как вставить CSS-код в стили страницы
Изменение чекбокса на всех страницах аккаунта
Чтобы применить код ко всем страницам аккаунта, его необходимо обернуть в теги <style>...</style>
и добавить в настройки аккаунта.
Доступ к данному разделу имеют:
- владелец аккаунта,
- ответственный администратор.
Для добавления кода:
- Перейдите в раздел «Профиль» — «Настройки аккаунта» — «Настройки».
![<p>
Как перейти в настройки аккуанта</p> <p>
Как перейти в настройки аккуанта</p>](http://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/8d7f735237b2c5c14678c649ab64fde3.png/s/s1200x/a/116/sc/162)
Как перейти в настройки аккуанта
- Вставьте код, обернутый в теги
<style>...</style>
, в блок «Дополнительные теги для HEAD»:
![Код, обернутый тегами в настройках аккаунта Код, обернутый тегами в настройках аккаунта](http://fs-thb03.getcourse.ru/fileservice/file/thumbnail/h/d24164463287400dc004097695d6882a.png/s/s1200x/a/116/sc/371)
- Сохраните настройки в конце страницы. Код применится в течение 10 минут.
![<p>
Сохранение настроек</p> <p>
Сохранение настроек</p>](http://fs-thb02.getcourse.ru/fileservice/file/thumbnail/h/38d5af152bbbdb40b64f3da6c7ffac6e.png/s/s1200x/a/116/sc/472)
Сохранение настроек
Важно
- В целях безопасности сторонний код не применяется к некоторым системным страницам. Со списком страниц-исключений можно ознакомиться в статье → «Общие настройки аккаунта».
- Если вы вставили код в настройках аккаунта, не добавляйте дополнительный код на отдельные страницы. Это может привести к ошибкам и некорректному отображению страницы.
Еще больше информации о верстке вы сможете найти в следующих статьях:
авторизуйтесь