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

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

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

© OCTemplates 2018

Alex Alex @stas2010
14

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

Подписок: 8 Просмотров: 8952 Вопрос задан: 15 июля 11:28 Последний ответ: 15 октября 20:06

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

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

Комментарии



Дмитрий Дмитрий @octemplates
.selector {color: #fff;} 
.button-selector {background: #ccc; border: none; padding: 10px 20px;}

Ответ написан: 16 июля 09:10
Uper Uper @Gisto

Перенос Обратного звонка на левую сторонку экрана (Код от службы поддержки)

#uptocall-mini {left: 20px;}
#uptocall-mini {right: unset;}
.field-tip:hover .tip-content {left: 72px;}
.field-tip .tip-content:before {left: -16px;-o-transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);transform: rotate(360deg);}

 

Ответ написан: 18 июля 12:36
Данил Данил @skillvrn

Отключение блока описания категории (от разработчиков):

.cat-desc-box {display:none;}

Спрятать Код товара с карточки товара (от разработчиков):

.product-info-li.main-product-model {display: none;}

Как убрать автоматическое масштабирование картинки в слайдере, чтобы не страдало качество изображения (от разработчиков):

.oct-slideshow-right img{width: auto!important;}

Код для модуля Simple Checkout (что-то из документации, что-то от разработчиков дополнительно, что-то из темы шаблона на форуме):

td.quantity input.form-control {height: auto; padding-left: 4px; padding-right: 4px; text-align: center;} 
.simplecheckout-block .button_oc, .simplecheckout-button-block .button_oc, .simpleregister-button-right .button_oc{ -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; color: #ffffff !important; font-size: 14px; background: #59c2e6; padding: 10px 20px 10px 20px; text-decoration: none; border: 0;}
.simplecheckout-block .button_oc:hover, .simplecheckout-button-block .button_oc:hover, .simpleregister-button-right .button_oc:hover{background: #4F5F6F!important;}
.simplecheckout a, .simpleregister a { color: #58c2e6!important; }
.simplecheckout a:hover, .simpleregister a:hover { color: #4F5F6F!important; }

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {.right-sort-row {display:none;}}

.simplecheckout-cart button.btn.btn-primary {
    color: #ffffff !important;
    font-size: 14px;
    background: #59c2e6;
    text-decoration: none;
    border-color: transparent;
}
.simplecheckout-cart button.btn.btn-primary:hover {
    background: #4f5f6f;
}
#simplecheckout_cart .form-control {
    height: 37px;
}
.simplecheckout-cart button.btn.btn-danger {
    font-size: 14px;
}
.simplecheckout-button-right .button {
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #ffffff !important;
    font-size: 14px;
    background: #59c2e6;
    padding: 10px 20px 10px 20px;
    text-decoration: none;
    border: 0;
}
.simplecheckout-button-right .button:hover {
    background: #4f5f6f;
}

Сделать, чтобы Мега-меню при наведении не подъезжало постепенно, а появлялось мгновенно. Если быстро вести мышью сверху вниз, то попадаешь в просвет между полосой меню и появляющейся областью и это провоцировало отмену ее раскрытия. (От разработчиков):

#menu .dropdown-menu {margin-top: 0px !important;}

 

Ответ написан: 19 июля 23:16
Данил Данил @skillvrn

Выделить один из пунктов в верхнем меню другим цветом.

Получить ID информационной страницы (например, 10). В CSS шаблона вставить код:

li.apppli:nth-child(10) a { color: #f00!important; }

 

Ответ написан: 21 июля 00:17
Данил Данил @skillvrn

жаль сообщения нельзя редактировать, только что увидел, что ниже меня потом поправили и код будет такой:

li.apppli:first-child a {
    color: #f00!important;
}

(это для первого пункта меню)

в итоге вот так получилось:

https://i.gyazo.com/7a7f0c4d9ae687d17afb9daa3eddca08.png

Ответ написан: 21 июля 00:19
LionHunter LionHunter

Адаптивное отображение видео-ролика в блоге:
Добавляем в стили СSS

.video-responsive {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.video-responsive iframe,
.video-responsive object,
.video-responsive embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 560px;
max-height: 315px;
}
.video-wrapper {
width: 560px;
max-width: 100%;
margin: 1em auto;
}

Также  к коду самого ролика нужно добавлять: 

КОД ВИДЕО-РОЛИКА

 

Ответ написан: 03 августа 11:11
Алексей Алексей @Aspirinnka1
/* Убрать надпись "Выберите подкатегорию" в категории */
.subcat-header {
    display: none;
} 

/* отключить показ описания товара в категории при наведении мышкой */
.product-grid .product-thumb:hover .oct-product-desc {
    display: none;
}

/* шрифт категорий в Стене Категорий */
.oct-category-item-box .oct-category-item-text .oct-category-item-header {
    font-weight: bold;
    font-family: icon;	/* выбираем нужный шрифт	*/    
}

/* шрифт подкатегорий в Стене Категорий */
.oct-category-item-text ul li a {
    font-family: Verdana;	/* выбираем нужный шрифт	*/
}

/* отключить показ описания товара в категории при наведении мышкой */
.product-grid .product-thumb:hover .oct-product-desc {
    display: none;
}

/*убрать картинку категории в самой категории*/
.cat-desc-box img {display: none;} 

/* Высота блока наши преимущества */
.main-advantage-item {
    height: 70px;
    font-size: 20px;
}

/* Высота блока стена категорий */
.oct-category-item-box {
    height: 200px !important;
}

 

Ответ написан: 11 августа 16:33
Станислав Станислав @Stanislav-SUPPORT

Если в подвале сайте в "преимущества магазина"8 блоков, тогда нужно применить следующий css код:

@media only screen and (min-width: 992px){
footer .footer-advantages{min-height: 145px;}
}
@media only screen and (max-width: 992px){
footer .footer-advantages{min-height: 188px;}
}

 

Ответ написан: 17 августа 14:43
Олег Олег @Oleg-support

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

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

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

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

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

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

 

2) Скрыть "Все категории" в поиске

.cats-button {display: none;}

 

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

.oct-product-tab .owl-carousel .owl-item .name a, .oct-carousel-row .owl-carousel .owl-item .name a, .oct-day-goods-box .owl-carousel .owl-wrapper-outer .item .oct-day-goods-item .name a, .news-carousel-box .owl-carousel .owl-wrapper-outer .item .oct-news-item .name a {height: 60px;}
.product-grid .product-thumb h4 {height: 60px;}

 

4) Скрыть модель в карточке товара 

li.product-info-li.main-product-model {display: none;}

 

5) Скрыть артикул в карточке товара

li.product-info-li.main-product-sku {display: none;}

 

Ответ написан: 17 августа 14:55
Дмитрий Дмитрий @octemplates

Скрыть количество комментариев в блоге:

.panel-body.oct-panel .badge-box:nth-child(2) {display: none;}
.caption .pull-right .badge-box:first-child {display: none;}

 

Ответ написан: 27 августа 10:09
Gumoff Gumoff
1.oct-slideshow-right img{width: auto!important;}

 

Все равно страдает, ширина картинки увеличивается, высота тоже и изображение переносится вниз под Текст баннера, растягивая слайдер по высоте.

Ответ написан: 30 августа 10:47
Станислав Станислав @Stanislav-SUPPORT

Скрыть рейтинг в виде звёзд в карточке товара:

.row.after-header-row div:nth-child(2) {display: none;}

 

Скрыть рейтинг в виде звёзд у товаров в категории:

.product-thumb .rating {display: none;}

 

Ответ написан: 30 августа 12:29
Wildum Wildum

отключить выезжание кнопки купить и прятание цены

.product-grid .product-thumb:hover .cat-box-effect-inner { transform: unset; } .product-grid .product-thumb .cat-box-effect { height: 80px; } @media only screen and (min-width: 678px){ #res-products .product-grid { min-height: 525px; }}

Ответ написан: 15 октября 20:04
Wildum Wildum
.product-grid .product-thumb:hover .cat-box-effect-inner {
    transform: unset;
}
.product-grid .product-thumb .cat-box-effect {
    height: 80px;
}
@media only screen and (min-width: 678px){
  #res-products .product-grid {
    min-height: 525px;
}}

 

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