[thurstonandlovey]

I am loving the On Sale feature and how we can use custom CSS to have to appear in a box that looks like a label. (Thank you SO much for your great work with ECWID it's really awesome for us web developers)

Regarding the positioning of that label / box, the CSS that ECWID directed us to utilise uses a negative top margin. This looks great EXCEPT, that it must take its measurement from END of the product label text.. because when you have multiple products on the same page, and some product titles are on one line, some wrap to 2 lines, the On SALE label is in a different position, because it must be talking it's positioning from where the text label finishes..

Please see this page to see what I mean:

http://thurstonandlovey.com.au/test_...=0&sort=normal

These 4 images are EXACTLY the same size.. However just one of the products has a title that does NOT spill over to the second line - and this is causing the ON SALE label to be in a different position to the rest.

This is not a massive issue BUT, if you are someone who likes things to look neat and consistent this is not ideal...

Is there another way to set the positioning of this label so that this inconsistency does not occur?

Thanks SO much, Kirstie

[smoothsailingco.com]

I think you'll either have to make sure the product text never reaches a 2nd line or use javascript to move the elements or calculate where to move them. The reason they aren't the same is because they move relative to their starting position and the multi line text creates a difference.

For option 1 you could do:

.ecwid-productBrowser-productNameLink {
    height: 25px;
    overflow: hidden;
}

It will cut off the product names though. You could try reducing the font-size to reveal more text to the customer.

For javascript, you could move ".ecwid-productBrowser-price-savePanel" into the same div as the images which would give them all the same starting position no matter how long the text.

That way is a lot more complicated though:
You'll need jQuery:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Then to move the panels:

Ecwid.OnPageLoaded.add(function(page) {
    if (page.type == 'CATEGORY' ) {
        $('.ecwid-productBrowser-price-save-container').parents('.ecwid-productBrowser-productsGrid-productBottomFragment').find('.ecwid-productBrowser-productNameLink a').each(function() {
            var product_name = $(this).text();
            var save_container = $(this).parents('.ecwid-productBrowser-productsGrid-productBottomFragment').find('.ecwid-productBrowser-price-save-container');
            $(this).parents('tr').find('img').each(function() {
                if ($(this).attr('alt') == product_name) {
                    save_container.appendTo($(this).closest('a'));
                    return;
                }
            });
        });                
    }
});

I'm no professional so I'm not sure if that is the most efficient way.

You'll need to update the css.

html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-grid div.ecwid-productBrowser-price-save-container

The panel isn't in the price-grid anymore so just remove that

html#ecwid_html body#ecwid_body div.ecwid-productBrowser-price-save-container

And the images will move to the left so you'll need to recenter them with:

.ecwid-productBrowser-productsGrid-productTopFragment-inner a {
    display: block;
    text-align: center;
}

There might/probably will need to be other minor adjustments to the CSS.

[thurstonandlovey]

Wow "smooth sailing" - thanks much for that very detailed response, VERY kind of you! Will have to give this a go .. thanks again!