Личный кабинет
Модификации
Тарифы
Вопросы и ответы
Написать в поддержку
Вопросы и ответы
Модификации
Личный кабинет
Тарифы
Полезные сервисы

Подсветка фона у кнопки

01 — 02
Демо-эффект
01
Интеграция в интерфейсе
02

Подсветка фона у кнопки

02 — 02
Демо-эффект
01
Интеграция в интерфейсе
02
Модификатор изменит вид фильтров для блока ST320N, заменив стандартные чекбоксы на кнопки
Описание
id номер:
67563293
Шаблон страницы
Номер скопирован!
Скопировать номер
  • Задаём класс uc-catalog
Блоку с каталогом
3 шаг
  • Для удобства добавили комментарии в код, рядом с каждым пунктом
Код скопирован!
Скопировать код
Создаем блок T123 и копируем в него код
1 шаг
Переходим к настройкам кода и блока
2 шаг
<!-- Модификация для Тильды. Заменяем чекбоксы на кнопки в фильтрах ST320N + cкругление карточек http://sonneto-design.ru/subscription/filter-checkbox -->
<style>
.uc-catalog .t-checkbox__indicator {
display: none!important;
}
.uc-catalog .t-store__filter__custom-sel .t-store__filter__title, .t951 .t951__sidebar .t-store__filter__item .t-checkbox__control{
padding: 5px 10px;
border-radius: 30px;
background: #F1F1F1; /*цвет кнопок*/
color: #000!important; /*цвет текста в кнопках (можно задать в настройках блока и удалить строку) */
user-select: none;
width: fit-content
}
.t-store__filter__custom-sel {
background-color: transparent!important
}
.t-store__filter__custom-sel .t-store__filter__title {
width: fit-content
}
.uc-catalog .t951 .t951__sidebar .t-store__filter__item .t-checkbox__control.active, .t-store__filter__custom-sel.active .t-store__filter__title {
background: #E1FC52; /*цвет активной кнопки*/
color:#000!important; /*цвет текста активной кнопки*/
}

</style>
<script>
$(function(){
var filterTistolsTimer = setInterval(function(){
if($('[name="Только товары в наличии"]')){
clearInterval(filterTistolsTimer);
$('[name="Только товары в наличии"]').on('change',function(){
if($(this).prop('checked') === true) {
$(this).parent().css('background','#726B5A') /*цвет текста кнопки "Только товары в наличии"*/
} else {
$(this).parent().css('background','#E9E4D9') /*цвет кнопки "Только товары в наличии"*/
}
})
}
},1000)
})
</script>
Для корректной работы блоков подключите библиотеку jQuery: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Важно
Создаем новую страницу на сайте
1 шаг
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
2 шаг
В графе указываем номер шаблона (он указан в инструкции)

Нажимаем кнопку «Выбрать»
3 шаг
Добавление страниц по id номеру возможно только при оплаченном тарифе на Tilda Personal и выше.
Важно
Вам также может быть интересно:
Pro подписка
Подсветка фона у кнопки
Эффекты кнопок
Pro подписка
Подсветка фона у кнопки
Эффекты кнопок
Текст скопирован в буфер обмена!
Текст скопирован в буфер обмена!