"On sale" tag over product photo - how to move it under?

[leonardo2212]

Dear All,

I am selling books through prestashop and I have a problem with "On sale" tag which comes on top of my photo and mostly covering book titles.

Is there any chance to move this tag on the half way up the photo, or on top or under, but not to cover my photo?

Perfect place I marked blue on my attach photo here.

Thank you in advance!

Leo

[JBW]

You can edit the corresponding CSS in your /themes/classic/assets/css/custom.css file.

e.g. moving the positon with "top" - additional you can make it transparent with "opacity" if desired - just play with the values. It might require  cache refresh to become active

.product-miniature .product-flags {
	top: 50px;
	opacity: 50%;
}

 

[leonardo2212]

5 hours ago, JBW said:

You can edit the corresponding CSS in your /themes/classic/assets/css/custom.css file.

e.g. moving the positon with "top" - additional you can make it transparent with "opacity" if desired - just play with the values. It might require  cache refresh to become active

.product-miniature .product-flags {
	top: 50px;
	opacity: 50%;
}

 

Dear JBW,

as I am not so familiar with css, should (or could) I change "top" to "middle", or I have to change 50px?

And thank you so much for answer!

[JBW]

Yes, you have to change to value of 50px to the desired one, this was just an example

[leonardo2212]

Thank you, I am off to play and learn!

[leonardo2212]

Dear JBW,

my /themes/classic/assets/css/custom.css file is empty. I did not mention earlier, I use default theme.

I browsed through css files, and in my theme.css I have some product-flags associations, should I change it here?  I also have theme-rtl.css whic looks or is similar to theme.css, it has also code related to product-flags.

Here is the code in theme.css with product-flags:

 .product-miniature .product-flags li.product-flag,.featured-products .product-miniature .product-flags li.product-flag,.product-accessories .product-miniature .product-flags li.product-flag,.product-miniature .product-miniature .product-flags li.product-flag{min-width:3.125rem;min-height:1.875rem;font-weight:600}#products .product-miniature .product-flags li.product-flag.online-only,.featured-products .product-miniature .product-flags li.product-flag.online-only,.product-accessories .product-miniature .product-flags li.product-flag.online-only,.product-miniature .product-miniature .product-flags li.product-flag.online-only{top:13.1rem}#

 

I tryed to change "top:13.1rem" to 20rem and then to 100rem, nothing changes. Where should I clear the cache, on my browser or server cache?

 

Please give it a look and thank you!

[JBW]

11 minutes ago, leonardo2212 said:

my /themes/classic/assets/css/custom.css file is empty. I did not mention earlier, I use default theme.

Yes thats nevertheless the correct file to place your custom code. I will overrule the default settings. Advantage is that your changes are not impacted/lost by any further upgrades of the standard files

[leonardo2212]

Hello,

I managed to do the change, my  "Discount amount" is now where I want it to be. But now phrase "On sale" goes also under with "Discount amount", how can I leave "on sale" on top or bottom of photo?

See photo..

 

[JBW]

19 minutes ago, leonardo2212 said:

But now phrase "On sale" goes also under with "Discount amount", how can I leave "on sale" on top or bottom of photo?

Use this CSS instead:

.product-miniature .product-flag.discount {
	top: 50px;
	position: absolute;
}

 

[leonardo2212]

Solved, thank you very much!