Sale Flash Pro CSS issue

22 posts from 5 voices

• Started 9 months ago by megalex
• Latest reply from Dude
• This topic is closed
• This topic is resolved

Tags:

No tags yet.

1. 

   megalex
   Member

   Hi Kriesi,

   There's an issue with the Sale Flash Pro extension from WooCommerce. I'm not sure if it's related to Propulsion or to WooCommerce's upgrade to version 1.6.2. Can you take a look at it? I've also informed WooCommerce support.

   The Sale Flash doesn't show in Safari for Mac. Here's a screenshot: http://farm8.staticflickr.com/7250/7749775704_48d48e3da1_b.jpg/

   The Sale Flash shows in Firefox for Mac but it's placed in the wrong position. Here's a screenshot: http://farm9.staticflickr.com/8424/7749775552_e8774ec4ce_b.jpg

   Posted 9 months ago #
2. 

   Ismael
   Moderator

   Hi,

   Sale Flash Pro is a premium extension so I can't test it on my end and this is the first time I've heard of it. Let me tag the rest of the support team and see if they can help you out.

   Regards,
   Ismael

   Posted 9 months ago #
3. 

   Devin
   Moderator

   Hi megalex,

   Can we take a look at your site live? We'll need to at least inspect the code to see if its something we can address. I seem to remember this extension working before however so I'm pretty sure its something we can help fix.

   Regards,

   Devin

   Posted 9 months ago #
4. 

   megalex
   Member

   Here's the url: http://bit.ly/MZff4p

   Can you hide the url from the public?

   Posted 9 months ago #
5. 

   Devin
   Moderator

   Hey Megalex,

   Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
   

   #top.single-product .onsale {
   top: -16px;
   left: -78px;
   display: block;
   }

   Regards,

   Devin

   Posted 9 months ago #
6. 

   megalex
   Member

   Hi Devin,

   Sales Flash Pro dissappeared.

   For your information, there was already a thread active regarding this issue:

   http://www.kriesi.at/support/topic/on-sale-label?message=update-support-forums-topic-status-error

   Posted 9 months ago #
7. 

   Devin
   Moderator

   Hi megalex,

   Your site doesn't appear to have the css I mentioned above included. You'll need to include it into your custom css file or quick css. The reason it isn't showing is that it needs the display: block or it won't show at all.

   I'm aware of the other topic, you addressed this one as new so I thought I would treat it as such.

   Regards,

   Devin

   Posted 9 months ago #
8. 

   megalex
   Member

   Hi Devin,

   I've added the code but it seems to me the label is generated in totaly different containers depending on the page browsed, therefore a single css rule might not be sufficient

   Posted 9 months ago #
9. 

   Devin
   Moderator

   Not necessarily. If you can point to the various pages where it is still having issues, we can define rules for each. For the overview shop pages, the following should work for instance:
   

   #top.archive .onsale {
   display: block;
   }

   Regards,

   Devin

   Posted 9 months ago #
10. 

    megalex
    Member

    Devin,

    When I make the screen smaller (for iPhone), the sale flash label appears on the left side of the text: http://farm9.staticflickr.com/8437/7830432290_6ecb00a325_b.jpg

    Posted 9 months ago #
11. 

    Devin
    Moderator

    We'll add a new media query to address the difference for mobile view with:
    

    @media only screen and (max-width: 767px) {
      #top.single-product .onsale { top: -753px;}
    }

    Its a bit heavy handed but until Kriesi re-arranges the divs its the only available work around.

    Regards,

    Devin

    Posted 9 months ago #
12. 

    megalex
    Member

    Hi Devin,

    I've added the code, but the problem remains.

    Posted 9 months ago #
13. 

    Devin
    Moderator

    The @media css needs to come after the the other css so that it gets priority on the smaller devices. So it should be:

    #top.archive .onsale {
    display: block;
    }
    #top.single-product .onsale {
    top: -16px;
    left: -78px;
    display: block;
    }
    @media only screen and (max-width: 767px) {
      #top.single-product .onsale { top: -753px; left: -23px;}
    }

    Regards,

    Devin

    Posted 9 months ago #
14. 

    megalex
    Member

    Yep, you're right! Positioning work well now.

    How can I change the color + opacity of the label?

    Thanks again!

    Posted 9 months ago #
15. 

    Nick
    Moderator

    Hi,

    This will make the label have a black semi-transparent 50% black background with white text.

    #top .onsale {
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    }

    There some issues with transparency and IE which are currently being pondered:

    http://stackoverflow.com/questions/7579520/cross-browser-w3c-compliant-semi-transparent-background-color

    Thanks,

    Nick

    Posted 9 months ago #
16. 

    megalex
    Member

    Hi, I forgot to mention I also need CSS fix for the front page. The flash label isn't currently showing there on the product at the right side of the screen: http://farm8.staticflickr.com/7260/7871689526_4b85dc6b37_b.jpg

    Posted 9 months ago #
17. 

    megalex
    Member

    There's also a small problem with the appearance of the flash label in the related products:

    screenshot: http://farm8.staticflickr.com/7130/7872082486_5002f0af8a_b.jpg
    url (please hide): http://goo.gl/4PFQs

    Posted 9 months ago #
18. 

    Nick
    Moderator

    Hi,

    This issue would be better handled by Woo, as I never used that premium plugin myself. From looking at the site, it looks awesome, so I am not really sure how the support team can help you further with that plugin without actually having to study and test it.

    Thanks,

    Nick

    Posted 9 months ago #
19. 

    megalex
    Member

    Hi Nick,

    I've already mentionned the problem to WooCommerce but after taking a look they came to the conclusion that the issue is related to the propulsion theme. Kriesi told me he was looking for a solution in this thread (http://www.kriesi.at/support/topic/on-sale-label?message=update-support-forums-topic-status-error) and include it in the next update. Can you remind him?

    Posted 9 months ago #
20. 

    Devin
    Moderator

    Hey Megalex,

    Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:
    

    #top.single-product .related.products .onsale {
    top: 7px;
    left: -18px;
    width: 70%;
    }

    You can play around with those values to get the look you want as it seems a bit big for the area with those values.

    Regards,

    Devin

    Posted 9 months ago #
21. 

    megalex
    Member

    Hi Devin, here's an overview of the code I've implemented, according to the following devices: iPhone4, iPad, Macbook. I've added some code, did some changes... it seems to work. Maybe it can help other users who have the same issue?

    #top.archive .onsale {
    display: block
    }
    @media only screen and (max-width: 767px) {
    #top.archive .onsale {
    top: 7px;
    left: 329px;
    display: block;
    width: 20%;}
    }
    
    #top.single-product .onsale {
    top: 0px;
    left: -108px;
    display: block;
    }
    @media only screen and (max-width: 767px) {
    #top.single-product .onsale {
    top: -743px;
    left: 328px;
    width: 20%;}
    }
    
    #top.single-product .related.products .onsale {
    top: 7px;
    left: 33px;
    width: 70%;
    }
    @media only screen and (max-width: 767px) { #top.single-product .related.products .onsale {
    top: 7px;
    left: 94px;
    width: 50%;}
    
    }
    #top .onsale {
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
    }

    Posted 8 months ago #
22. 

    Dude
    Dude

    Hi!

    Thanks for providing your code :)

    Regards,
    Peter

    Posted 8 months ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.