TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

King Composer – применяем красивые иконки навигации для Tabs Slider

1 107

Данная запись посвящена пользователям использующим плагин King Composer.

В случае использования компонента Tabs Slider, и при включении навигации по умолчанию отображаются невзрачные кнопки “NEXT” и “PREVIEW”, уверен большинству пользователей как и мне будет куда приятнее использовать навигационные стрелки место кнопок отображающихся по умолчанию.

В данной записи я предоставляю стили которые заставляют появится навигационные стрелки.

Очень важно! Элемент ROW в котором будет находится наш Tabs Slider должен иметь ID owl-tabs

В итоге получим:


King Composer - применяем красивые иконки навигации для Tabs Slider

CSS стили:

/*Nav Tabs Slider*/ #owl-tabs .owl-prev { position: absolute !Important; bottom: 50%!Important; width: 40px!Important; height: 50px!Important; margin-top: -25px!Important; /* background: red !Important; */ left: 10px!Important; color: transparent!Important; transition: all .3s ease!Important; color: #ff000000 !important; background: #27272700 !Important; padding: 0!Important; z-index: 71!Important; content: "e605"; } #owl-tabs .owl-prev:before { content: "e605"!Important; transition: all .6s ease!Important; font-family: simple-line-icons!Important; background: #27272700 !Important; font-size: 50px!Important; line-height: 50px!Important; font-weight: 100!Important; } /*Color*/ #owl-tabs .owl-prev:before, #owl-tabs .owl-next:before { color: #00296529 !Important; } /*Color hover*/ #owl-tabs .owl-prev:hover:before, #owl-tabs .owl-next:hover:before { color: #002965 !Important; } #owl-tabs .owl-next { position: absolute !Important; bottom: 50%!Important; width: 40px!Important; height: 50px!Important; margin-top: -25px!Important; /* background: red !Important; */ right: 10px!Important; background: #27272700 !Important; color: transparent!Important; transition: all .3s ease!Important; color: #ff000000 !important; padding: 0!Important; z-index: 71!Important; content: "e605"; } #owl-tabs .owl-next:before { content: "e606"!Important; transition: all .6s ease!Important; font-family: simple-line-icons!Important; font-size: 50px!Important; line-height: 50px!Important; background: #27272700 !Important; font-weight: 100!Important; }

Импорт для King Composer блока с отзывами:

Источник записи: https://mediadoma.com

Этот веб-сайт использует файлы cookie для улучшения вашего опыта. Мы предполагаем, что вы согласны с этим, но вы можете отказаться, если хотите. Принимаю Подробнее