How To Change The Discount Label Position & Appearance

On my version 3.0.6 site the discount label sits adjacent to the price. In 4.1.4 the discount label sits on top of the thumbnail image. Since most of my products are books, this obscures the book title in many cases. How do I go back to the previous style of discount label and positioning?



See screenshots for what I'm talking about.



Thanks in advance.

Screen Shot 2014-05-03 at 10.12.18 AM.png

Screen Shot 2014-05-03 at 10.12.05 AM.png

Hi Kingsleypress



Try adding this in custom CSS for 414


<br />
.product-main-info .discount-label {<br />
	left: 560px !important;<br />
	top: 140px !important;<br />
	width: 90px !important;<br />
}<br />

```<br />
and you will get this<br />
<br />
![](upload://6I6PuuEmauXO02up6hgyYXrei26.jpeg)<br />
<br />
If you play with background image you can put your own graphic.<br />
<br />
For example<br />
<br />
```php
.product-main-info .discount-label {<br />
	background: -moz-linear-gradient(center top , #FFFFFF, #BBC8FF) repeat scroll 0 0 rgba(0, 0, 0, 0);<br />
	border: 1px solid #CCCCCC;<br />
	border-radius: 20px;<br />
	left: 560px !important;<br />
	top: 140px !important;<br />
	width: 86px !important;<br />
}<br />
.discount-label span {<br />
	border-bottom-right-radius: 4px;<br />
	border-top-right-radius: 4px;<br />
	color: #000000;<br />
	font-family: trebuchet ms;<br />
	font-size: 14px;<br />
	font-weight: bold;<br />
	padding: 0 12px;<br />
  }
```<br />
<br />
<br />
![](upload://6I6PuuEmauXO02up6hgyYXrei26.jpeg)<br />
<br />
Quick and dirty, no tpl files needed to be changed.<br />
<br />
Fotis

Thanks Fotis. That definitely helps for the product details page. How about on a category page, where it lists, say, 12 products, like the attached?



Also, where do I add the custom css…in the Theme Editor?

Screen Shot 2014-05-03 at 11.54.11 AM.png

Go with


<br />
<br />
#pagination_contents .template-products.list .discount-label {<br />
	left: 401px;<br />
	top: 32px !important;<br />
	width: 89px;<br />
}<br />

```<br />
<br />
You will get this<br />
<br />
![](upload://6I6PuuEmauXO02up6hgyYXrei26.jpeg)<br />
<br />
For the CSS you can use either the Visual Editor and choose Custom Css from the elements Dropdown or the File editor and edit your Css file in styles/data folder<br />
<br />
Fotis

Fotis, thank you so much! Both of those fixes worked great.

:-)

In Some products that have big name the label mess up the page when we move it to a standart left position.

Is there a way to add the discount label in the prices-container so that it be next the price in any product via my changes addon.

how do I get rid of the label? what do I need to edit? Thank you!!! I have CS Cart 4.2.4

This

Go with

#pagination_contents .template-products.list .discount-label {
left: 401px;
top: 32px !important;
width: 89px;
}


You will get this



2rz9fte.jpg



For the CSS you can use either the Visual Editor and choose Custom Css from the elements Dropdown or the File editor and edit your Css file in styles/data folder



Fotis

Hello Fotis,

This didn't quite work for me, I am using 4.8.2SP2.

I too am having similar problem in that label is right on top of a Title.

Neither worked, the CSS for the product details page NOR the category page, the discount label just stays in it's original position :(

Any thing else I can try? Thank you!!!

This

Hello Fotis,

This didn't quite work for me, I am using 4.8.2SP2.

I too am having similar problem in that label is right on top of a Title.

Neither worked, the CSS for the product details page NOR the category page, the discount label just stays in it's original position :(

Any thing else I can try? Thank you!!!

Hi al-bert,

Yes this is a 414 you saw in the previous posts. Classes are different now.

Try this for category

.ty-grid-list__image .ty-discount-label {
    right: 0;
    top: 0;
   }

by adding any pixel value you like for left and right

and this one for product page

.ty-product-block .ty-discount-label {
right: 0;
top: 0;
}

by again adding any pixel value you like for left and right

That worked just right, Fotis, thank you man, for your time!!

Wow, all these changes in classes and who knows what else must sure keep you devs pretty busy with each new update :neutral: