URL скопирован в буфер обмена!
Как кастомизировать стандартный интейфес ЛК на Tilda?
С помощью этой модификации можно настроить внешний вид стандартного личного кабинета на Tilda. Вы можете изменить цвет текста и фона, отключить отдельные модули, такие как группы, язык и курсы, а также настроить кнопки и ховер эффекты.
Модификация работает с включенным Autoscale в блоках
Модификация работает только со стандартными блоками
Номер модификации в библиотеке TiCode
Цвет подложки
Радиус скругление углов подложки
Цвет заголовков
Размер заголовков
Цвет текста
Цвет крестика
Видимость групп
Видимость курсов
Разделитель
Настройки кнопки "редактировать профиль"
Цвет кнопки
Цвет текста
Радиус скругления углов
Цвет обводки
Толщина обводки
Цвет кнопки при наведении
Цвет текста при наведении
Настройки кнопок "сохранить / отмена / сменить пароль"
Цвет кнопки
Цвет текста
Радиус скругления углов
Цвет кнопки при наведении
Цвет текста при наведении
Настройки полей ввода
Цвет фона
Цвет текста
Радиус скругления углов
Цвет обводки
Толщина обводки
Настройки дполнительных полей
Смена языка
Смена аватара
Цвет фона кнопки "Загрузить аватар"
Цвет текста кнопки "Загрузить аватар"
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD016-->
.tlk-userbar__popup, .tlk-popup__container {
border-radius: px !important;
background-color: !important;
}
.ticodelk {
display: none;
}
.tlk-userbar__popup-edit-profile {
background: !important;
border-radius: px;
width: 100%;
border: px solid ;
padding: 7px !important;
margin-top: 10px !important;
color: !important;
transition: 0.3s ease;
}
.tlk-userbar__popup-edit-profile:hover {
color: !important;
background: !important;
border: px solid ;
}
.tlk-userbar__popup-groups-link:hover, .tlk-userbar__popup-courses-link:hover {
background: transparent !important;
opacity: 0.8;
}
.tlk-popup__close::before, .tlk-popup__close::after {
background-color: !important;
}
.tlk-userbar__popup-name, .tlk-input-title, .tlk-userbar__popup-heading, .tlk-popup__change-lang, .tlk-userbar__arrow-down path, .tlk-userbar__popup-text span {
color: !important;
}
.tlk-userbar__popup-heading {
margin-bottom: 0 !important;
}
.tlk-popup__form-wrap {
padding-bottom: 0 !important;
}
.tlk-userbar__popup-text {
color: !important;
}
.tlk-userbar__popup-container {
border-top: 0px solid transparent !important;
position: relative;
}
.tlk-userbar__popup-container::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #000000;
opacity: 0.2;
pointer-events: none;
}
.tlk-input {
background: !important;
border: px solid !important;
border-radius: px;
color: !important;
}
.tlk-btn.tlk-btn_gray {
background: !important;
color: !important;
border-radius: px !important;
width: 50%;
transition: 0.3s ease;
}
.tlk-popup__button.tlk-btn_white {
border: 1px solid !important;
border-radius: px !important;
color: !important;
width: 50%;
transition: 0.3s ease;
}
.tlk-btn.tlk-btn_gray:hover, .tlk-popup__button.tlk-btn_white:hover, .tlk-popup__change-password:hover, .tlk-upload__button:hover {
background: !important;
color: !important;
border-color: !important;
transition: 0.3s ease;
}
.tcd {
display: none;
}
.tlk-popup__change-password {
font-size: 14px;
color: ;
border-radius: px;
width: 100%;
padding: 9px 15px 8px !important;
border: 1px solid !important;
transition: 0.3s ease;
}
.tlk-upload__button {
background: !important;
color: !important;
border-radius: px;
}
.tlk-popup__title {
color: #ffffff !important;
font-size: 20px !important;
}
.tlk-accordion__link:hover, .tlk-userbar__popup-accordion-link:hover {
background-color: !important;
opacity: 0.2 !important;
}
.tlk-userbar__popup-groups-link span {
color: !important;
}
1. Указываем в генераторе настройки ЛК. Если какой-то параметр не нужен, то оставляем поле пустым.
Некоторые настройки полей дублируются в другие элементы. Например при заполнении поля "Цвет текста" эта настройка применится к заголовкам форм, названию и списку курсов и групп и другому мелкому тексту. Указание цвета кнопки в разделе Настройки кнопок "сохранить / отмена / сменить пароль" - применит этот цвет к обводе и тексту кнопки "отмена" и изменить пароль".
2. Копируем готовый код и вставляем в "Пользовательские CSS стили"
Пользовательские стили находиться в "Настройки сайта" > "Еще" > "Редактировать CSS". Не забываем сохранить и переопубликовать страницы сайта.
Примечание! Цвет иконки Личного кабинета можно настроить в Тильда. Для этого переходим в ЛК -> Настройки личного кабинета -> Дополнительные -> Кнопка открытия профиля пользователя.
Для более гибкой настройки ЛК можно перенести его в Zero Block при помощи этой модификации "Личный кабинет в Zero Block на Tilda"
Некоторые настройки полей дублируются в другие элементы. Например при заполнении поля "Цвет текста" эта настройка применится к заголовкам форм, названию и списку курсов и групп и другому мелкому тексту. Указание цвета кнопки в разделе Настройки кнопок "сохранить / отмена / сменить пароль" - применит этот цвет к обводе и тексту кнопки "отмена" и изменить пароль".
2. Копируем готовый код и вставляем в "Пользовательские CSS стили"
Пользовательские стили находиться в "Настройки сайта" > "Еще" > "Редактировать CSS". Не забываем сохранить и переопубликовать страницы сайта.
Примечание! Цвет иконки Личного кабинета можно настроить в Тильда. Для этого переходим в ЛК -> Настройки личного кабинета -> Дополнительные -> Кнопка открытия профиля пользователя.
Для более гибкой настройки ЛК можно перенести его в Zero Block при помощи этой модификации "Личный кабинет в Zero Block на Tilda"
