Готовое решение для изменения стиля боковой панели GetCourse с помощью CSS-кода
Здравствуйте, друзья! Я хочу поделиться с вами готовым CSS-кодом для оформления боковой панели GetCourse. Этот код поможет вам сделать вашу панель более уникальной и привлекательной.
Для использования кода вам необходимо скопировать его и вставить в поле «Счетчики и прочие скрипты для BODY» в настройках вашего аккаунта GetCourse. Чтобы это сделать, просто войдите в свой аккаунт, перейдите в раздел «Настройки» -> «Настройки аккаунта»
<style>
/* Стили для боковой панели Getcourse */
/* Скрыть значки марафона и уведомлений */
.menu-item-marathon, .topNotitication-notice, .gc-account-leftbar .menu-item-label {
display: none;
}
/* Установить цвет фона для меню */
.gc-account-leftbar, .gc-account-leftbar .gc-account-user-menu, .gc-account-leftbar .toggle-link, .gc-page-nav-items-menu a {
background: #F0F1F3;
width: 50px;
}
/* Стили для меню кнопок */
.gc-account-leftbar .gc-account-user-menu li a {
width: 50px;
height: 50px;
background-color: #fff;
border-bottom: 3px solid #AAB9C1;
border-radius: 10px;
transition: background-color 0.3s, border 0.3s;
display: flex;
justify-content: center;
align-items: center;
}
/* Стили для наведения курсора на кнопки */
.gc-account-leftbar .gc-account-user-menu li:not(.active):not(.selected) a:hover {
background-color: #fff;
border: 1px solid #74C0FC;
border-width: 1px 1px 5px 1px;
border-radius: 10px;
}
/* Скрыть все иконки */
.menu-item-notifications_button_small img.menu-item-icon,
.menu-item-cms img.menu-item-icon,
.menu-item-user img.menu-item-icon,
.menu-item-tasks img.menu-item-icon,
.menu-item-teach img.menu-item-icon,
.menu-item-notifications img.menu-item-icon,
.menu-item-sales img.menu-item-icon,
.menu-item-chatium img.menu-item-icon {
display: none;
}
/* Удалить разделители между кнопками */
.gc-account-leftbar .gc-account-user-menu li {
border-bottom: 0;
}
/* Стили для виджета в мобильной версии */
.talks-widget-button {
background: #74C0FC;
transition: background-color 0.3s;
}
.talks-widget-button:hover {
background-color: #4a9ef0;
}
/* Заменить изображение для меню */
li.menu-item.menu-item-cms a::after {
content: url("https://fs.getcourse.ru/fileservice/file/download/a/634394/sc/225/h/b400c315dfddb340b926b602f9902fcd.png");
}
li.menu-item.menu-item-teach a:after {
content: url("https://fs.getcourse.ru/fileservice/file/download/a/634394/sc/62/h/e15ce14e13933609f16fe3976c03984c.png");
}
li.menu-item.menu-item-user a:after {
content: url("https://fs.getcourse.ru/fileservice/file/download/a/634394/sc/441/h/2c811799c5477533f576216740467dfe.png");
}
li.menu-item.menu-item-tasks a:after {
content: url("https://fs.getcourse.ru/fileservice/file/download/a/634394/sc/50/h/19108d14b8bc5135f7c6ca72a9249166.png");
}
li.menu-item.menu-item-notifications a:after {
content: url("https://fs.getcourse.ru/fileservice/file/download/a/634394/sc/324/h/9cead92a2a5ea617b5d17bf4820a1ea5.png");
}
li.menu-item.menu-item-sales a:after {
content: url("https://fs.getcourse.ru/fileservice/file/download/a/634394/sc/374/h/4c84e00a10e9a6fad37ebca6b7e55b2e.png");
}
li.menu-item.menu-item-chatium a:after {
content: url("https://fs.getcourse.ru/fileservice/file/download/a/634394/sc/205/h/5f8cad22696cfd4e4f1e315c4951d763.png");
}
li.menu-item.menu-item-notifications_button_small a:after {
content: url("https://fs.getcourse.ru/fileservice/file/download/a/634394/sc/336/h/0d9666e702fdfaad2f34108db2dc49cf.png");
}
/* Стили для активного и выделенного состояния кнопок */
.gc-account-leftbar .gc-account-user-menu li.active a,
.gc-account-leftbar .gc-account-user-menu li.selected a {
background-color: #fff;
border: 1px solid #74C0FC;
border-width: 1px 1px 5px 1px;
}
/* Цвет текста выпадающего меню */
.gc-account-user-submenu-bar .gc-account-user-submenu li a {
color: #171754;
text-transform: none;
font-weight: normal;
}
/* Стили для заголовка в подменю */
.gc-account-user-submenu-bar h3 {
color: #171754;
font-size: 20px;
font-weight: 600;
}
/* Стили при наведении курсора на элементы подменю */
.gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
background-color: inherit;
color: #171754;
font-weight: bold;
transition: all 0.3s;
}
/* Стили для фона подменю */
.gc-account-leftbar .gc-account-user-submenu-bar {
background: #fff;
width: 220px;
margin-left: -20px;
}
</style>
После сохранения изменений необходимо обновить страницу сайта, чтобы увидеть примененные изменения стиля боковой панели.
Этот CSS-код предоставляет готовое решение для изменения стиля боковой панели GetCourse. Вы можете настроить его, меняя цвета, размеры шрифтов и другие параметры. Код включает следующие действия:
- Скрытие значков марафона, уведомлений и меню.
- Установку цвета фона для меню и его элементов.
- Изменение стилей кнопок меню и добавление плавной анимации при наведении.
- Скрытие всех иконок меню и удаление разделителей между кнопками.
- Изменение стилей виджета в мобильной версии.
- Замену изображений для различных пунктов меню.
- Изменение стилей для активного и выделенного состояния кнопок.
- Изменение стилей текста и фона выпадающего меню.
Теперь ваша боковая панель GetCourse будет иметь обновленный дизайн, соответствующий предоставленному скриншоту. Если вы захотите внести дополнительные изменения в код или вернуться к первоначальному дизайну боковой панели, вы всегда можете отредактировать или удалить код в поле «Счетчики и прочие скрипты для BODY» в настройках аккаунта.
✨Зарегистрируйтесь на GetCourse по этой ссылке и получите бесплатный доступ на 14 дней!
⭐️Хотите, чтобы ваш проект на GetCourse выглядел профессионально и привлекал клиентов? Я помогу вам с дизайном и версткой. Свяжитесь со мной в Telegram