Опубликовано: 16 апреля 2018
как сделать наклейки стандартными от вебасист
В админке сделали свои наклейки для товаров со скидками
http://prntscr.com/j4a4ae - выглядит вот так
Ожидали что и на сайте будет выглядеть так же,а там http://prntscr.com/j4a52y
Комментарии (3)
body #product-core-image .badge,
body #product-core-image .badge:before,
body #product-core-image .badge:after {
height: 75px;
width: 75px;
}
body #product-core-image .badge.bestseller,
body #product-core-image .badge.bestseller:before,
body #product-core-image .badge.bestseller:after {
background: #74ff30;
color: #030;
}
body #product-core-image .badge.new,
body #product-core-image .badge.new::before,
body #product-core-image .badge.new::after {
background: #ff4;
color: #000;
}
body #product-core-image .badge.low-price,
body #product-core-image .badge.low-price::before,
body #product-core-image .badge.low-price::after {
background: #ffc2e3;
color: #300;
}
body #product-core-image .badge:before {
background: inherit;
content: "";
position: absolute;
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
body #product-core-image .badge::after {
background: inherit;
content: "";
position: absolute;
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}
body #product-core-image .badge {
height: 75px;
width: 75px;
background: #a1fcff;
background-color: rgb(161, 252, 255);
position: relative;
text-align: left;
top: 5px;
right: -5px;
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
padding: 0;
}
body #product-core-image .badge span {
text-transform: uppercase;
color: #000 !important;
font-weight: bold;
position: absolute;
z-index: 1983;
top: 28px;
left: -4px;
right: -4px;
transform: rotate(-13deg);
-webkit-transform: rotate(-13deg);
-moz-transform: rotate(-13deg);
-o-transform: rotate(-13deg);
font-size: 1em;
text-align: center;
overflow: visible;
line-height: 1em;
}
body #product-core-image .badge.bestseller span {
font-size: 1.3em;
top: 28px;
}
Спасибо. в странице товара заработало. А куда еще надо прописать чтоб на витрине тоже так же было звездочками?
В том же файле пропишите
.product-list .image .corner {
position: absolute;
z-index: 10;
font-size: 0.8em;
color: #fff;
font-weight: bold;
}
.product-list .image .badge {
height: 45px;
width: 45px;
position: relative;
text-align: left;
top: 0;
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
padding: 0;
}
.product-list .image .badge span {
color: #000 !important;
font-weight: bold;
position: absolute;
z-index: 1983;
top: 17px;
left: -2px;
right: -2px;
transform: rotate(-13deg);
-webkit-transform: rotate(-13deg);
-moz-transform: rotate(-13deg);
-o-transform: rotate(-13deg);
font-size: 1em;
text-align: center;
overflow: visible;
line-height: 1em;
}
.product-list .image .badge:before {
height: 45px;
width: 45px;
background: inherit;
content: "";
position: absolute;
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.product-list .image .badge:after {
height: 45px;
width: 45px;
background: inherit;
content: "";
position: absolute;
-moz-transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
-o-transform: rotate(-30deg);
transform: rotate(-30deg);
}