# Оформеление GC (до Remake)

# Оформление бокового меню ГК

[![image.png](https://wiki.kishlaru.ru/uploads/images/gallery/2025-04/scaled-1680-/stuimage.png)](https://drive.google.com/file/d/103-7ZhGmtWc30PV3GXmUa9VeskELc1At/view?usp=sharing)  
[https://drive.google.com/file/d/103-7ZhGmtWc30PV3GXmUa9VeskELc1At/view?usp=sharing](https://drive.google.com/file/d/103-7ZhGmtWc30PV3GXmUa9VeskELc1At/view?usp=sharing)

#### Скрипт в настройках аккаунта  
[![image.png](https://wiki.kishlaru.ru/uploads/images/gallery/2025-04/scaled-1680-/image.png)](https://wiki.kishlaru.ru/uploads/images/gallery/2025-04/image.png)

```javascript
<!-- Боковое меню -->
<link rel="stylesheet" href="https://fitnessmama.school/pl/cms/layout/css?id=29680&hash=9cc3105d9df0b69b9fa7b4db22f48c30&bundle=1" />
<script src="https://fitnessmama.school/pl/cms/layout/js?id=29680&hash=9cc3105d9df0b69b9fa7b4db22f48c30&bundle=1"></script>
```

#### CSS

```css


/*Убираем бэкграунд иконки-пропадает ховер выделение */
.gc-account-leftbar .gc-account-user-menu li a {
   background-color: transparent!important;
}

/* Убираем разрыв */
.gc-account-leftbar .gc-account-user-menu li {
  border-bottom: none;
}

/* Прячем старую иконку чатиума полностью*/
li.menu-item-chatium {
  display:none;
}
/* Отступы между иконкой и выделением*/
.gc-account-leftbar .gc-account-user-menu li a.with-label {
    padding: 3px 0px 0px 0px!important;
    margin-top:10px;
}

/* Делает прозрачными места иконок + шрифт */
.gc-account-leftbar .gc-account-user-menu li a {
  background:none!important;
  font-family: 'Urbanist', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 11px; 

}

/* Подпись для новой*/
.gc-account-user-menu li.menu-item.new-chatium-icon a:after{
  content: "Chatium";
  color: #000;
  bottom: 2px!important;
  font-weight: 600;
}


/*Задаем выделение ярлыка*/
.custom-menu .gc-account-leftbar .gc-account-user-menu li.active a, .custom-menu .gc-account-leftbar .gc-account-user-menu li.selected a {
    background-color: #FFF!important;
}

li.menu-item.menu-item-profile a, li.menu-item.menu-item-notifications_button_small a, li.menu-item.menu-item-cms a, li.menu-item.menu-item-teach a, li.menu-item.menu-item-user a, li.menu-item.menu-item-tasks a, li.menu-item.menu-item-notifications a, li.menu-item.menu-item-sales a, li.menu-item.menu-item-chatium a {
    display: block;
    background: transparent;
    margin: 3px auto 0px;
    width: 62px !important;
  	height: 62px !important;
    border-radius: 8px;
    transition: all 1.0s;
}
/* пододвигаем колокольчик */
li.menu-item.menu-item-notifications_button_small a {
    height: 35px !important;
    border-radius: 5px;
}
/*Скругление профиля*/
.menu-item-profile .menu-item-icon {
    border-radius: 26px;
    width: 52px;
    border: 2px solid #EB1a41;
    margin-top:5px;
}

/*Позицианируем номерки*/
.gc-account-leftbar li:not(.menu-item-profile):not(.menu-item-notifications_button_small) .notify-count { 
  bottom: unset;

  top: 0%;
}

/* Шайк меню */
.gc-account-user-menu .menu-item a:hover img

{


  
	-webkit-animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

 .gc-account-user-menu .menu-item a:hover:after, 
.menu-item-prolongation a:hover img,
.menu-item.new-chatium-icon a:hover img
{

	-webkit-animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: shake-top 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
} 
  
.notify-count {
  z-index:1;
}

@-webkit-keyframes shake-top {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }
  10% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}
@keyframes shake-top {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }
  10% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}
 

/*_____________Настройка суб меню___________________*/
/*Настройка суб меню______________*/
<!--  Настройка суб меню -->
.gc-account-leftbar .gc-account-user-submenu-bar {
    width: 320px;
}

.gc-account-user-submenu-bar .gc-account-user-submenu li a {
   padding-top: 9px;
   padding-bottom: 9px;
   text-transform: lowercase;
   font-family: 'Urbanist', sans-serif;
   font-weight: 500!important;
   font-style: normal;
   font-size: 22px;
   line-height: 108.5%;
   padding-left: 20px;
}

/*Суб меню с заглавной*/
.gc-account-user-submenu-bar .gc-account-user-submenu li a::first-letter {
  text-transform: uppercase;
}

.custom-menu .gc-account-user-submenu-bar .gc-account-user-submenu a:first-letter {
   text-transform: uppercase;
}

.custom-menu .gc-account-user-submenu-bar .gc-account-user-submenu a:hover {
   color: #555555;
}

/*Заголовок субменю_*/
.gc-account-user-submenu-bar h3 {
   font-family: 'Urbanist', sans-serif;
   font-weight: 700!important;
  color: #004456;
   font-size: 30px;
   line-height: 40px;

}
.gc-account-leftbar .gc-account-user-submenu-bar {
   display: flex;
   flex-direction: column;
  background: #FFF;
}
.gc-account-leftbar .gc-account-user-submenu-bar:after {
   content: "";
   display: block;
   height: 60px;
   background: url("https://fs.gcfiles.net/fileservice/file/download/a/87136/sc/323/h/2a01bc7dda6cdfa74cb5e627822c51f2.png") center / contain no-repeat;
   margin-top: auto;
   margin-bottom: 20px;
}

/* Анимация выбора меню */
.gc-account-user-submenu-bar .gc-account-user-submenu li {
    position: realtive;
}
.gc-account-user-submenu-bar .gc-account-user-submenu li a {
    position: relative !important;
    z-index: 9999;
    transition: all 1.3s;
}
.gc-account-user-submenu-bar .gc-account-user-submenu li::after {
    content: "";
    width: 0%;
    height: 100%;
    position: absolute;
    background:  silver;
    top:0;
    left:0;
    transition: all .5s;
    z-index: 0;
}
.gc-account-user-submenu-bar .gc-account-user-submenu li a:hover {
    background: transparent;
    color:#005B63;
    z-index: 1;
    text-decoration: none;
}

.gc-account-user-submenu-bar .gc-account-user-submenu li:hover::after {
    width: 100%;
}

@media (max-width: 768px) {
	.gc-account-leftbar .gc-account-user-menu {
		margin-bottom: 45px;
		background: #5E2E92;
		width: 70px;
		height: 100%;
	}
	.gc-main-content.with-left-menu {
		margin-left: 0;
	}
}

@media (max-width: 576px) {
	.gc-account-leftbar
		.gc-account-user-submenu-bar-notifications_button_small {
		width: calc(100vw - 70px);
		overflow: auto;
	}
}

@media (max-width: 768px) {
	.gc-account-leftbar .gc-account-user-menu li {
		border-bottom: none;
	}
}


.gc-account-user-menu  {

 font-family: 'Urbanist', sans-serif!important;

}

.popover {
	z-index: 8888;
}
```

#### JS

```javascript
<!--  Подмена пункта меню Chatium -->
$(function() {
  setTimeout(function(){
    $(".menu-item-sales").after(
       '<li class="menu-item new-chatium-icon">'+
        '<a href="/chatium" title="Chatium">'+
          '<img class="menu-item-icon" src="https://fs.gcfiles.net/fileservice/file/download/a/87136/sc/31/h/80723613363bcb010a2e0e6a98a90c65.png">'+
        '</a>'+
      '</li>'
    ); 
  },0);
});
<!--  END Подмена ссылки на chatium -->

<!--  Установка активности пунктов на подмененных ссылках-->
$(document).ready(function(){
	setTimeout(function(){
		if (window.location.pathname.startsWith("/chatium")) {
			$('.gc-account-user-menu li').removeClass('active');
			$('.gc-account-user-menu li.new-chatium-icon').addClass('active');
		}
		
        if (window.location.pathname.startsWith("/profile")) {
			$('.gc-account-user-menu li').removeClass('active');
		}
	}, 10);
});

<!--  Подмена ссылок на профиль и смену пароля -->
$(document).ajaxSuccess(function(event, xhr, settings) {
  if ( settings.url == "/cms/counters/menu" ) {
    var target = $('.gc-account-user-submenu-bar')[0];
    var observer = new MutationObserver(function(mutations) {
      $(".gc-account-user-submenu-bar li.menu-item-profile a").attr("href", "/profile");
      $(".gc-account-user-submenu-bar li.menu-item-change_password a").attr("href", "/changePassword");
    }).observe(target, { attributes: false, childList: true, characterData: false, subtree: true });
  }
});
<!--  End Подмена ссылок на профиль и смену пароля -->

<!--  Подмена страницы личного кабинета -->
$(document).ajaxSuccess(function(event, xhr, settings) {
  if ( settings.url == "/teach/control/stream" ) {
    var target = $('.gc-account-user-submenu-bar')[0];
    var observer = new MutationObserver(function(mutations) {
      $(".gc-account-user-submenu-bar li.menu-item-teach a").attr("href", "/l_kabinet");

    }).observe(target, { attributes: false, childList: true, characterData: false, subtree: true });
  }
});
<!--  End Подмена страницы личного кабинета -->

<!-- Боковое меню фикс сохранение подменный профиль-->
$(()=>{setTimeout(()=>{
  $(".edit-profile-popup-btn").off().click((e)=>{
    e.stopPropagation();
    window.open('/profile', '_parent');
  });
})});
<!-- Боковое меню фикс сохранение подменный профиль-->
```

# Карточка тренинга в GC

```css
.stream-table { 
  margin-left:0!important;
}

.stream-table tbody {
  display:flex;
  flex-wrap: wrap;
}

.stream-table tbody tr {
  position:relative;
  flex:0 0 calc(33.3333% - 20px);
  height:350px;
  border-radius:9px;
  box-shadow:0 0 3px 1px rgba(0,0,0,0.1);
  overflow:hidden;
  margin:10px;
  transition:all 0.5s;
}

@media (max-width:850px) {
  .stream-table tbody tr {
    flex:0 0 calc(50% - 20px);
  }
      .stream-table tbody tr {
    height:310px;
  }
}

@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 {
  transform:scale(1.05);
}

.stream-table tbody tr td {
  position:relative;
  display:flex;
  height:100%;
  width:100%;
  padding:0!important;
}

/* Настраиваем заголовок */
.stream-table tbody tr td .stream-title {
  position:absolute;
  top:185px; 
  color:black!important;
  z-index:1;
  margin:auto 20px;
}

/* Настраиваем описание */
.stream-table tbody tr td div {
  display: none;
  position:absolute;
  top:285px;
  margin:auto 20px;
    line-height:1.4em;
}


.stream-table tbody tr td:before {
  content:"Deschide ";
  position:absolute;
  top:310px;
  left:20px;
  padding:5px 7px;
  border:1px solid black;
  border-radius:5px;
  transition:all 0.3s;
}

.stream-table tbody tr td:hover:before {
  background:rgb(228, 22, 122);
  color:white;
}

.stream-table tbody tr.no-public td:before {
  display:none;
}


.stream-table tbody tr td:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:180px;
background: #8E2DE2;
background: -webkit-linear-gradient(to right, #4A00E0, #8E2DE2);
background: linear-gradient(to right, #4A00E0, #8E2DE2);
}

.stream-table tbody tr[data-training-id="934063181"] td:after {         
    background:url(https://fs.getcourse.ru/fileservice/file/download/a/87136/sc/239/h/71f4ed3e615b77040c1fd4aaf9648be0.jpg) no-repeat;
  background-size:cover;
  background-position: 0 40%;
}
```

# Стилизация страниц со списком уроков FM

```css
.lesson-list li.user-state-not_reached .info {
  border-left: 1px solid #ecf0f1;
  background: #d3d3d3;
}

.lesson-list-01 .state-icon-block {
Color: white;
}

.lesson-list-01 .lesson-list li {
    margin:20px!important;
      box-shadow:0 0 10px rgba(0,0,0,.5);
    }

.lesson-list {
    margin: 0px;
    padding: 0px;
    list-style: none;
    background: white;
    padding: 10px 0px;
    margin-bottom: 20px;
  border-radius:0px;
}

.lesson-list li .item-a {
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
 background: #f7f7f7;
  
}

.user-state-bg {
    background: #f7f7f7;
}
.lesson-list li .state-icon-block {
    background: #f80070;
}

.lesson-list li .info {
 border-radius:15!important;
    margin-left: 60px;
    padding-top: 0px;
    height: 100%;
    background: #f7f7f7;
}

.lesson-list li .title {
    font-size: 25px;
    font-weight: normal;
    line-height: 24px;
    margin-right: 20px;
    display: block;
    max-width: 500px; 
}



.lesson-list li .info {
    margin-left: 0;
    width: auto;
}

.lesson-list li table td {
    vertical-align: middle;
    min-height: 180px;
}

.lesson-list li .item-image {
    display: flex;
}


```

# Изображения из кода оформления

Убрали во всех тренингах и подтренингах код оформления.  
Код оформления сохранили в вики.  
Собрали из кода все ссылки на тренинги и соответствующие изображения в отдельной таблице.  
Старался не пропускать какие-то дочерние подтренинги, но думаю есть не большой шанс что то упустить.  
  
[https://docs.google.com/spreadsheets/d/1nTtFkirQSJiWBujLhNuHQ8\_kPhBZe-EQWCoOxhCXEFw/edit?gid=0#gid=0](https://docs.google.com/spreadsheets/d/1nTtFkirQSJiWBujLhNuHQ8_kPhBZe-EQWCoOxhCXEFw/edit?gid=0#gid=0)