Viewing 19 posts - 1 through 19 (of 19 total)
  • Author
    Posts
  • #12892

    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;

    }

    #77067

    Hi,

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

    Regards,

    Ismael

    #77068

    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

    #77069

    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

    #77070

    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.

    #77071

    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

    #77072

    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

    #77073

    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.

    #77074

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

    #77075

    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

    #77076

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

    #77077

    Hi,

    I’m flagging this for Devin’s attention.

    Regards,

    Mya

    #77078

    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

    #77079

    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?

    #77080

    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

    #77081

    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

    #77082

    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…

    #77083

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

    #77084

    Hey!

    I’ll close this thread now.

    Best regards,

    Peter

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

The topic ‘on sale label’ is closed to new replies.