Всем привет! В этой статье разберем как менять иконки боковой панели на геткурсе.
Я не кодировщик и данный способ подсмотрела тут. Однако как предложено в первоисточнике-у меня не сработало. Поэтому пришлось внести некоторые коррективы.
Для сравнения как предлагает изначально геткурс и как получилось в итоге смотрите скрин. Пользователи видят только вторую сверху и три нижних иконки.
И так, приступим. В решении данной задачи нам потребуется сервис https://fontawesome.com/
Это сервис шрифтов иконок.
Есть два способа поменять иконки: добавлять картинки в файловое хранилище геткурса или использовать шрифты. У шрифтов преимущество-их можно красить в любой момент.
Регистрируемся на сайте https://fontawesome.com/
Обратите внимание!!! Сайт англоязычный. При автоматическом переводе на русский слетает верстка и он становится непригодным для работы. Так что вырубаем переводчик и действуем на ощупь)
Жмем "Start for Free"
Указываем почту и жмем кнопку.
Дальше ловим письмо на почте и подтверждаем регистрацию
Попадаем на страницу со скриптом. Этот скрипт у каждого индивидуальный! Копируем его и идем в геткурс.
В геткурсе нам нужен раздел "Настройки". Переходим по цепочке как на скрине "Профиль"--"Настройки аккаунта"--"Настройки".
Если вам данный раздел недоступен-нужно чтоб владелец аккаунта дал права на настройку аккаунта.
Прокатываемся ниже до раздела "Счетчики и прочие скрипты для BODY". Вставляем наш скрипт.
Далее ставим целиком
<style>
.gc-account-leftbar {
background: linear-gradient(0deg, rgba(183,217,224,1) 0%, rgba(183,217,224,1) 100%) !important;
}
.gc-account-user-menu .menu-item-cms img {
display: none
}
.gc-account-user-menu .menu-item-teach img {
display: none
}
.gc-account-user-menu .menu-item-user img {
display: none
}
.gc-account-user-menu .menu-item-tasks img {
display: none
}
.gc-account-user-menu .menu-item-notifications img {
display: none
}
.gc-account-user-menu .menu-item-sales img {
display: none
}
.gc-account-user-menu .menu-item-chatium img {
display: none
}
.gc-account-user-menu .menu-item a:before {
font-family: "Font Awesome 5 Free", sans-serif;
font-weight: 900;
line-height: 1;
color: #fff;
font-size: 36px;
}
.gc-account-user-menu .menu-item-cms a:before {
content: "\f015"; /*Код иконки Сайт*/
}
.gc-account-user-menu .menu-item-teach a:before {
content: "\f5da"; /*Код иконки Обучение*/
}
.gc-account-user-menu .menu-item-user a:before {
content: "\f509"; /*Код иконки Пользователи*/
}
.gc-account-user-menu .menu-item-tasks a:before {
content: "\f14a"; /*Код иконки Задачи*/
}
.gc-account-user-menu .menu-item-notifications a:before {
content: "\f658"; /*Код иконки Сообщения*/
}
.gc-account-user-menu .menu-item-sales a:before {
content: "\f158"; /*Код иконки Продажи*/
}
.gc-account-user-menu .menu-item-chatium a:before {
content: "\f3cd"; /*Код иконки Чатиум*/
}
.gc-account-user-menu .menu-item.active a:before,
.gc-account-user-menu .menu-item.selected a:before {
color: #f83;
}
.gc-account-leftbar .gc-account-user-menu li a {
background:inherit;
}
.gc-account-leftbar .gc-account-user-menu li a:hover {
background:rgba(255,255,255,0.3)!important;
}
.menu-item-profile img {
border-radius:100px;
}
</style>
Чтоб установить свой цвет панели-переходите к материалу "Как изменить дизайн боковой панели на геткурс".
!!!Вам нужно будет ТОЛЬКО поменять срипт из сервиса градиент. Остальные переменные вводить НЕ нужно.
Все переменные none скрывают стандартные иконки.
В первоисточнике предлагалось скрыть все сразу, но в таком варианте у меня пропал чатиум и колокольчик оповещений. Поэтому пришлось импровизировать.
В этом коде ставим цвет иконок в неактивном состоянии. У меня это белый цвет.
Далее коды иконок с сервиса.
Тут определяем цвет иконок в активном состоянии
Это подсвечивание поля при открытой вкладке. По факту почти ни на сто не влияет.
Это делает иконку профиля круглой
Как выбрать цвет?
Я пользуюсь расширением EYE DROPPER для хрома. Можно использовать пипетку и взять свой цвет, но не факт что он корректно отобразиться в трехсимвольном обозначении. Поэтому лучше выбрать из предложенной палитры. Код который нужен на скрине.
Как поменять иконку?
В этом нам поможет уже знакомый сервис https://fontawesome.com/
Вводим в поиске запрос на английском и жмем "enter"
В бесплатной версии не так много вариантов, но выбрать можно. Жмем на понравившуюся иконку
Копируем код и ставим его в скрипт.
Дальше все сохраняем
Обратите внимание!!! При сохранении геткурс может начать сопротивляться и некорректно отображать настройки. Без паники! Просто обновите страницу еще несколько раз.
Очень внимательно с настройкой иконки чатиума. Я пробовала 3 разных и встал нормально только телефончик, как на примере.
Видео по теме "Технический специалист геткурс. Меняем иконки на боковой панели аккаунта школы" будет доступно с 16 декабря 2021.
На этом все. Предлагайте ваши задачи в комментарии, будем разбирать)
Было полезно? Поделись с другими)
ФЕЯриЧНЫЙ ИНТЕНСИВ: CSS. ВИЗУАЛЬНОЕ ПРЕОБРАЖЕНИЕ ОНЛАЙН-ШКОЛЫ. Подробности смотрите в видео.
Присоединиться к интенсиву можно по ссылке https://clck.ru/sPSgV
Вы начинающий технический специалист и нужна практика по настройкам? Или не хватает проектов для оформления кейсов? Приходите в ТЗшки. Наберетесь опыта и сформируете кейсы за короткий срок. Подробнее по ссылке clck.ru/ggGhM
Если вы запускаете онлайн проект и не знаете с чего начать, или вам нужна консультация по конкретным задачам, обращайтесь.
Сделать это можно любым удобным способом:
Кристина-технический специалист геткурс
ВК vk.me/krista_ap
Телеграм @krista_ap
89966906964
Ватсап Кристина