Viewing 22 posts - 1 through 22 (of 22 total)
  • Author
    Posts
  • #15222

    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

    #86679

    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

    #86680

    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

    #86681

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

    Can you hide the url from the public?

    #86682

    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

    #86683

    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

    #86684

    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

    #86685

    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

    #86686

    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

    #86687

    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

    #86688

    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

    #86689

    Hi Devin,

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

    #86690

    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

    #86691

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

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

    Thanks again!

    #86692

    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

    #86693

    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

    #86694

    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

    #86695

    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

    #86696

    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?

    #86697

    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

    #86698

    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;
    }

    #86699

    Hi!

    Thanks for providing your code :)

    Regards,

    Peter

Viewing 22 posts - 1 through 22 (of 22 total)

The topic ‘Sale Flash Pro CSS issue’ is closed to new replies.