logo
Welcome to our new AbleCommerce forums. As a guest, you may view the information here. To post to this forum, you must have a registered account with us, either as a new user evaluating AbleCommerce or an existing user of the application. For all questions related to the older version of Gold and earlier, please go to AbleCommerce Gold forum. Please use your AbleCommerce username and password to Login. New Registrations are disabled.

Notification

Icon
Error
CSS Help needed - CSS Help needed
Options
Go to last post Go to first unread
Previous Topic Next Topic
ray22901031  
#1 Posted : Monday, September 14, 2020 12:48:28 AM(UTC)
ray22901031

Rank: Advanced Member

Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 827

Thanks: 3 times
Was thanked: 13 time(s) in 13 post(s)
This really has me stumped, maybe someone can shed some light here.

Please look at the two pictures in this post, on the "no sale" (Left), everything looks fine, but look what happens on "sale picture"(Right).

I am required to hide certain pricing by certain vendors that might cause pricing to be below their map pricing. This is not an issue, since I'm able to hide the price on any product that I choose, but when a product is on sale, and you click to view the price, you can see that the background image repeats.

I have tried every way to prevent this, but cannot come with a solution, any ideas, besides displaying the picture below the box?

Many thanks,
-Ray

CSS Code for this effect

.pricePopup .price {
color:#000; font-size:15px; line-height:22px;
background-image: url(/Assets/ContentImages/ars-Mini-Cart.jpg); background-size: 150px 25px; background-repeat: no-repeat; background-position: right bottom; }

No Sale.jpg (97kb) downloaded 1 time(s). On Sale.jpg (123kb) downloaded 0 time(s).

Edited by user Monday, September 14, 2020 12:50:15 AM(UTC)  | Reason: Not specified
Back to top

Wanna join the discussion?! Login to your AbleCommerce Forums forum account. New Registrations are disabled.
Back to top  
shari  
#2 Posted : Monday, September 14, 2020 4:34:53 AM(UTC)
shaharyar

Rank: Advanced Member

Groups: Admin, Developers, Registered, HelpDesk, Authorized User
Joined: 10/5/2018(UTC)
Posts: 703

Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
Each line of price display have the class 'price' and you are applying the styles on every element using the 'price' class. So there are three lines of price display and you are getting the image for each line.

Please try to update your style
from

Code:
.pricePopup .price {
color:#000; font-size:15px; line-height:22px;
background-image: url(/Assets/ContentImages/ars-Mini-Cart.jpg); background-size: 150px 25px; background-repeat: no-repeat; background-position: right bottom; }


to

Code:
.pricePopup {
color:#000; font-size:15px; line-height:22px;
background-image: url(/Assets/ContentImages/ars-Mini-Cart.jpg); background-size: 150px 25px; background-repeat: no-repeat; background-position: right bottom; }
Back to top
ray22901031  
#3 Posted : Monday, September 14, 2020 4:40:59 AM(UTC)
ray22901031

Rank: Advanced Member

Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 827

Thanks: 3 times
Was thanked: 13 time(s) in 13 post(s)
Hi Shari,

Unfortunately .pricePopup will not work because it puts it below the box. Things would be a lot easier if each "price element" had a specific ID. is there anything else you can think of?

Thanks
Back to top
shari  
#4 Posted : Monday, September 14, 2020 4:48:33 AM(UTC)
shaharyar

Rank: Advanced Member

Groups: Admin, Developers, Registered, HelpDesk, Authorized User
Joined: 10/5/2018(UTC)
Posts: 703

Thanks: 5 times
Was thanked: 113 time(s) in 112 post(s)
Please try this again. Try adding .box class after .pricePopUp

Update your style
from

Code:
Code:
.pricePopup .price {
color:#000; font-size:15px; line-height:22px;
background-image: url(/Assets/ContentImages/ars-Mini-Cart.jpg); background-size: 150px 25px; background-repeat: no-repeat; background-position: right bottom; }



to

Code:
Code:
.pricePopup .box {
color:#000; font-size:15px; line-height:22px;
background-image: url(/Assets/ContentImages/ars-Mini-Cart.jpg); background-size: 150px 25px; background-repeat: no-repeat; background-position: right bottom; }
Back to top
ray22901031  
#5 Posted : Monday, September 14, 2020 4:54:11 AM(UTC)
ray22901031

Rank: Advanced Member

Groups: Authorized User, Developers
Joined: 2/17/2019(UTC)
Posts: 827

Thanks: 3 times
Was thanked: 13 time(s) in 13 post(s)
YES, YES, YES - That will work - many thanks Shari
Back to top
Users browsing this topic
Guest
Forum Jump  
You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.

Privacy Policy | Powered by YAF.NET 2.2.4.14 | YAF.NET © 2003-2024, Yet Another Forum.NET
This page was generated in 0.128 seconds.