Стилизация выпадающего списка сортировки в стандартном блоке на Тильде
В работе над каталогами товаров мы не раз сталкивались со сложностями в стилизации стандартных блоков Тильды. Больше всего это касается именно товарных блоков, слайдеров и элементов корзины. Однако об остальных пунктах мы расскажем позже в этом цикле статей о Тильде.
В этом же материале мы поделимся с вами подробным гайдом по стилизации выпадающего списка сортировки. Мы покажем и подробно разберём, как отредактировать все стили этого элемента с помощью одного действия — добавления простого блока 123 из библиотеки Тильды и копирования туда нашего кода. После этого нужно подогнать переменные под ваши пожелания, и готово! Код можно скопировать ниже.
Подробный код с информацией о том как отредактировать стили сортировки
Инструкция подходит для следующих товарных блоков Тильды:
блок ST320N, блок ST300, блок ST305N, блок ST310N, блок ST315N.
<style>
.t-store__sort-select {
width: 212px !important; /* Ширина вашего элемента в пикселях */
height: 34px !important; /* Высота вашего элемента в пикселях */
background: #F4F4F4 !important; /* Цвет заднего фона */
color: #000 !important; /* Цвет текста */
font-family: Montserrat !important;/* Название шрифта */
font-size: 13px !important; /* Размер шрифта */
font-style: italic !important; /* Стиль шрифта - normal или italic */
font-weight: 400 !important; /* жирность шрифта*/
line-height: 12px !important; /* высота строки*/
padding: 2px 30px 2px 10px !important; /*отступы от текста*/
border-radius: 30px !important; /*закругления элемента*/
border: 0 !important; /*размер бордера*/
text-transform: uppercase !important; /*Стиль текста, Uppercase - всё большими буквами, lowercase - маленькими, none - по умолчанию */
}
</style>
