Для того, чтобы упростить запросы и улучшить качество обслуживания, мы используем систему заявок.

Каждой заявке присваивается уникальный номер, который можно использовать для отслеживания состояния и ответов онлайн.

Для того чтобы начать, просто зарегистрируйтесь или войдите в аккаунт.

© OCTemplates 2018

Антон Антон@Novaxx
5

Полезные CSS-коды для шаблона shop-store 2

Подписок: 0 Просмотров: 2631 Вопрос задан: 16 августа 12:16 Последний ответ: 06 октября 13:44

Предлагаю в этом топике публиковать полезные CSS коды с описанием для шаблона shop-store 2.

Пожалуйста, не забывайте пользоваться инструментом "добавить код" чтобы публикуемый материал понятно воспринимался пользователями.

1. Меняем размер шрифта и цвет + ховер названия товара в каруселях и каталогах с оранжевого-черного на черный-черный жирный.

.item .price, .item:hover .name a {color: #252525;font-weight: bold;}
.product-list .price-new, .product-grid .price-new, .product-grid .price, .item .price, .swiper-slide .price-new {color: #252525;}
.item .name {font-size: 14px;}
.product-grid .name a, .swiper-slide .name a {font-size: 14px;}
.product-grid:hover .name a {text-decoration: unset;font-weight: bold;}

2. Убираем огромные отступы в боковом навигационном меню, что-бы оно не было огромной портянкой.

#sstore-3-level ul ul li a {padding: 6px 22px;font-size: 12px;}
#sstore-3-level>ul>li>a {padding: 8px 22px;}
#sstore-3-level ul>li.has-sub>a.toggle-a:before {top: 12px;}
#sstore-3-level ul>li.has-sub>a.toggle-a:after {top: 8px;}
#sstore-3-level>ul>li>a {font-size: 14px;text-transform: uppercase;}
#sstore-3-level ul ul li a {text-transform: uppercase;}

3. Отключаем отображение блоков подкатегорий  "Уточнить поиск"

.subcategory-header, .category-list {display: none;}

4. Эффект работы мегаменю как на tech-store. В версии 7.2.1 код встроен. После установки версии 7.2.1 и выше этот CSS надо удалить.

#megamenu-menu .dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; top: 49px;transition-duration: .5s;
transition-property: all; }
#megamenu-menu .dropdown .dropdown-menu {top: 64px;opacity: 0; visibility: hidden; }

 

Комментарии



Олег Олег @Oleg-support

1) Изменение цветов в модуле обратного звонка:

#uptocall-mini .uptocall-mini-phone {background-color: rgb(60, 171, 24) !important;} - цвет круга в котором находится трубка

#uptocall-mini .uptocall-mini-phone:hover {background-color: rgb(60, 171, 24) !important;} - цвет круга в котором находится трубка при наведении

#uptocall-mini {border: 10px solid rgba(60, 171, 24, 0.32) !important;} - цвет ободка круга в котором находится трубка

.field-tip .tip-content {background: #3cab18;} - цвет плашки с надписью

.field-tip .tip-content:before {border-right-color: #3cab18;} - цвет маленького треугольника с лева от плашки

 

2) Цвет фона "Нашли дешевле" в карточке товара:

.cheaper {background: #8FBB6D;}

 

3) Скрыть список подкатегорий в категориях

.subcategory-header {display: none;}
.category-list {display: none;}

 

4) Цвет крестиков в боковом модуле категорий

#sstore-3-level ul>li.has-sub>a.toggle-a:before {background: #fff;}
#sstore-3-level ul>li.has-sub>a.toggle-a:after {background: #fff;}

 

5) Скрыть ссылки в первой полосе в шапке

#modaltrigger {display: none;} - скрыть "Мой аккаунт"

#wishlist-total {display: none;} - скрыть "Закладки"

#oct-compare {display: none;} - скрыть "Сравнение"

.checkout-top {display: none !important;} - скрыть "Оформить заказ"

.settings {display: none;} - скрыть "Настройки"

 

6) Вывод названия товара в 3 строчки

.product-grid .name { height: 45px;}

.item .name {height: 55px;}

.category-slide {max-height: 400px;}

.category-slide .owl-carousel .owl-stage-outer {max-height: 380px;}

 

7) Цвет полоски ползунка в Фильтре товаров NEW

.noUi-connect {background: #141414;}

 

Ответ написан: 17 августа 14:49
Антон Антон @Novaxx

Пункт 3 в 1м посте и пункт 3 во 2м одинаковые.

Ответ написан: 17 августа 17:17
Антон Антон @Novaxx

5 Товаров в ряд + уменьшены отступы вокруг карточки

/* 5 Товаров в ряд */
@media (min-width:1200px) {
.col-lg-4 {
  width: 25%;
 }
}
@media only screen and (min-width: 776px) {
.product-grid .product {
min-height: 384px;
}
}
@media only screen and (min-width: 994px) {
.product-grid .product {
 margin-right: -20px;
}
}
@media only screen and (min-width: 1200px) {
.product-grid .product-buttons .cart {
    width: 103px !important;
    margin-left: -5px;
}
}
@media screen and (max-width: 1199px) and (min-width: 769px) {
.product-grid .product-buttons .cart {
    width: 110px !important;
 }
}
@media only screen and (min-width: 1200px) {
.product-grid .product-buttons .additional {
    padding: 0 5px 0 0;
}
}
.product-grid .product-buttons .wishlist {
 margin-left: 0px;
}
.product-grid .product-buttons .compare {
 margin-left: 5px;
}
.product-grid .product {
margin-bottom: 10px !important;
}

 

Ответ написан: 16 сентября 11:19
Алина Алина

5 Товаров в ряд + уменьшены отступы вокруг карточки


почему 5, если 4 получилось?

Ответ написан: 18 сентября 16:47
Александр Александр

Всем привет.
Не могу понять, почему если изменения своего CSS начинается с "." (точки), то все получается, а если CSS начинается с "#" решетки, то CSS его игнорирует?

Ответ написан: 06 октября 13:44