on sale label

19 posts from 6 voices

• Started 1 year ago by megalex
• Latest reply from Dude
• This topic is closed
• This topic is not a support question

Tags:

No tags yet.

1. 

   megalex
   Member

   screenshot: http://farm8.staticflickr.com/7241/7316341586_d4ef08cc2f_b.jpg

   1) Can you fix the position of the on sale label on the product page.

   2) Can you change the colour of the text of the sale label (white or grey instead of black), without affecting the hover effect

   This is what I've figured out so far:

   propulsion / config-woocommerce / woocommerce-mod.css

   line 356-360

   #top .onsale{
   display:none;
   background: rgba(0,0,0,0.8);
   z-index: 10;
   }

   Posted 1 year ago #
2. 

   Ismael
   Moderator

   Hi,

   Kindly post a link to your site so we can give you a specific CSS snippet for you to use. :)

   Regards,
   Ismael

   Posted 1 year ago #
3. 

   megalex
   Member

   Hey!

   The sale flash label (it's a black banner with rounded edges) is hidden behind the word "Vitra", on the right side of the product image:

   PS: Can you hide the link in this post?

   Best regards,
   Ismael

   Posted 1 year ago #
4. 

   Ismael
   Moderator

   Hi,

   I have removed the link you have posted. Try to add this code in your Quick CSS or custom.css:
   

   #top .onsale {
      left: -150px;
      color: white;
   }

   Just adjust the left and color value as required. Hope this helps. :)

   Cheers,
   Ismael

   Posted 1 year ago #
5. 

   megalex
   Member

   It didn't work.

   If you take a look at the page of the link I've sent, it looks like the label is restricted to the boundaries of the text container.

   It should be moved to the image container.

   Posted 1 year ago #
6. 

   Ismael
   Moderator

   Hi,

   I can't find the code I have given you when I checked the site. Try using this one instead:
   

   #top .onsale {
      left: -150px !important;
      color: white !important;
   }

   Hope this would work.

   Regards,
   Ismael

   Posted 1 year ago #
7. 

   megalex
   Member

   It didn't work. I had to remove the code because it's confusing to customers. It's messing up the flash label on the home page and the shop page. Therefor I took a screenshot of what happened: http://farm8.staticflickr.com/7093/7340942616_b3d1456159_h.jpg

   If necessary, I can grant you acces to the wp dashboard where you can make changes in css and see the results immediately.

   Please take in account that these 3 pages are affected by changes in css:

   Home page: http://www.design-oostende-shop.be/
   Shop page: http://www.design-oostende-shop.be/webwinkel/
   Product page: http://www.design-oostende-shop.be/webwinkel/vitra-place-sofa-door-jasper-morrison/

   Please hide the url's above in this post

   Posted 1 year ago #
8. 

   megalex
   Member

   I would like to add:

   Using negative values (-150px) is of little use when the sale flash labels uses the left side of the text frame as a reference. A better way would be to use the left side of the image frame.

   Posted 1 year ago #
9. 

   megalex
   Member

   Any idea what's gone wrong? I've contacted woocommerce also, but they say this error is related to the propulsion theme.

   Posted 1 year ago #
10. 

    Devin
    Moderator

    Hi megalex,

    If you want to send me a temporary admin account I can take a look at whats going on and make the changes live(if possible).
    You can send the information to my email at DevinVinson (at) gmail.com. Make sure to include a link to this topic so that my spam filter doesn't grab it :)

    Regards,

    Devin

    Posted 1 year ago #
11. 

    megalex
    Member

    Hi Devin, I've sent the email to you.

    Posted 1 year ago #
12. 

    Mya
    

    Hi,

    I'm flagging this for Devin's attention.

    Regards,
    Mya

    Posted 1 year ago #
13. 

    Devin
    Moderator

    Hi Megalex,

    Sorry for the delay! I've been sick since Friday and am just now able to get back to work.

    I've added the following css to your Quick CSS to fix the sale flags:

    #top.single-product span.onsale{
    top: 0px;
    left: -105px;
    color: white;
    }
    #top.home span.onsale {
    color: white;
    left: 93px;
    top: 0px;
    }

    Regards,

    Devin

    Posted 1 year ago #
14. 

    megalex
    Member

    Hi Devin,

    Thanks for your help. But this fix leads to new problems:

    On big screens:
    Home page: values and text are split over two lines and hover effect is disabled
    Shop page: no changes
    Product page: position fixed, but hover effect is disabled

    On small screens (iPhone, iPad):
    Home page: sale flags are stretched over the width of the screen
    Shop page: no changes
    Product page: sale flags have dissappeared

    I couldn't leave it that way, it's too messy and I'm receiving complaints from as well PC as mobile users. I had to remove the quick css code.

    I guess the sale flag code needs a thorough revision as it is clearly not compatible with the woocommerce extensions.
    Maybe you might need to cooperate with the people of woocommerce?

    Posted 1 year ago #
15. 

    megalex
    Member

    Hi Devin,

    I'm trying to help here. I think I'm seeing a pattern: with each level you go deeper in the site, the sale flag moves further to the right. This could be a clue.

    Screenshot: http://farm8.staticflickr.com/7235/7188806323_00ef72c5a2_h.jpg

    Posted 1 year ago #
16. 

    Devin
    Moderator

    Hi megalex,

    That is very odd. When I was testing it, I didn't see any issue. Additionally, the css targets only the sale span and so it shouldn't effect anything else.

    I'll mark the topic for Kriesi to take a look at. Perhaps he will have some additional insight on getting the extension to work with the theme better.

    Regards,

    Devin

    Posted 1 year ago #
17. 

    Kriesi
    Key Master

    Hey! I will have a look at it and see what can be done about this but it seems to me the label is generated in totaly different containers depending on the page browsed, therefore a single css rule wont be sufficient...

    Posted 12 months ago #
18. 

    megalex
    Member

    Thanks Kriesi, I'm looking forward to your solution.

    Posted 12 months ago #
19. 

    Dude
    Dude

    Hey!

    I'll close this thread now.

    Best regards,
    Peter

    Posted 12 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.