Jump to content

  • You cannot start a new topic
  • You cannot reply to this topic

How To Change The Discount Label Position & Appearance Rate Topic   * * * * * 1 votes

 

Posted 03 May 2014 - 02:15 PM #1

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.

Attached Thumbnails

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


 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1440 posts

Posted 03 May 2014 - 03:49 PM #2

Hi Kingsleypress

Try adding this in custom CSS for 414

.product-main-info .discount-label {
	left: 560px !important;
	top: 140px !important;
	width: 90px !important;
}
and you will get this

Posted Image

If you play with background image you can put your own graphic.

For example

.product-main-info .discount-label {
	background: -moz-linear-gradient(center top , #FFFFFF, #BBC8FF) repeat scroll 0 0 rgba(0, 0, 0, 0);
	border: 1px solid #CCCCCC;
	border-radius: 20px;
	left: 560px !important;
	top: 140px !important;
	width: 86px !important;
}
.discount-label span {
	border-bottom-right-radius: 4px;
	border-top-right-radius: 4px;
	color: #000000;
	font-family: trebuchet ms;
	font-size: 14px;
	font-weight: bold;
	padding: 0 12px;
  }


Posted Image

Quick and dirty, no tpl files needed to be changed.

Fotis
Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 

Posted 03 May 2014 - 03:56 PM #3

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?

Attached Thumbnails

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


 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1440 posts

Posted 03 May 2014 - 04:19 PM #4

Go with


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

You will get this

Posted Image

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
Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 

Posted 03 May 2014 - 05:01 PM #5

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

 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1440 posts

Posted 03 May 2014 - 09:51 PM #6

:-)
Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • akistdm
  • Senior Member
  • Trial users
  • Join Date: 09-Oct 11
  • 225 posts

Posted 05 May 2014 - 10:09 AM #7

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.

 
  • luongbui
  • Newbie
  • Trial users
  • Join Date: 07-Dec 14
  • 9 posts

Posted 08 December 2014 - 06:29 PM #8

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

 
  • al-bert
  • Member
  • Trial users
  • Join Date: 27-Jul 18
  • 42 posts

Posted 11 January 2019 - 05:16 PM #9

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!!!



 
  • dvsgr
  • Senior Member
  • Authorized Reseller
  • Join Date: 14-Apr 09
  • 1440 posts

Posted 11 January 2019 - 08:26 PM #10

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


Fotis Kourmadas
Cs-Cart Development - Cs-Cart Authorized Reseller 

 
  • al-bert
  • Member
  • Trial users
  • Join Date: 27-Jul 18
  • 42 posts

Posted 12 January 2019 - 01:27 AM #11

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: