sold out sm button position

[limelites]

Does anyone know what file I could edit to wrap this sold_out_sm.gif in a position: relative; tag so I could move it up over the top of the image?

I've searched the developers toolkit and can't find the file that's generating this button. I can't see from the page source either :-(

[limelites]

hah, figured this out myself guys like this:

/includes/functions/function_general.php

replace:

    if ($return_button != $link and $additional_link != false) {
      return $additional_link . '<br />' . $return_button; 

with:

    if ($return_button != $link and $additional_link != false) {
      return $additional_link . '<br /><div style="position:relative; top:-200px">' . $return_button; 

just edit the -200px to suit your own image sizes.

[limelites]

No, ignore my last post.... I thought I had a solution but in fact it just messes up the page formatting.

Does anyone know how I can add a <div id="mySoldOutButton" to this image so I can control its position from the stylesheet??

[limelites]

no one?

[limelites]

I've been trying to figure this out for a couple of days but to no avail...

I'm basically trying to use some sort of position: relative; top: -100px; to control the position of the BUTTON_IMAGE_SOLD_OUT_SMALL gif that displays under the image on the products list pages.

Is there any way to position this button over the image?

I tried going with CSS buttons which helps but I hate them... I much prefer the image buttons... but how do I position button_sold_out_sm.gif relative?

Is there a way to define this button and then somehow control it via my stylesheet?

[limelites]

a picture paints 1000 words:

[s_t_e_v_e]

My fix is to modify includes/modules/CUSTOM/product_listing.php Line 160...

        case 'PRODUCT_LIST_IMAGE':
        $lc_align = 'center';
        if ($listing->fields['products_image'] == '' and PRODUCTS_IMAGE_NO_IMAGE_STATUS == 0) {
          $lc_text = '';
        } else {
          if (isset($_GET['manufacturers_id'])) {
            $lc_text = '<a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id']) > 0 ?  zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? zen_get_generated_category_path_rev($_GET['cPath']) : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&products_id=' . $listing->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage"') . '</a>';
          } else {
            $lc_text = '<a href="' . zen_href_link(zen_get_info_page($listing->fields['products_id']), 'cPath=' . (($_GET['manufacturers_id'] > 0 and $_GET['filter_id']) > 0 ?  zen_get_generated_category_path_rev($_GET['filter_id']) : ($_GET['cPath'] > 0 ? zen_get_generated_category_path_rev($_GET['cPath']) : zen_get_generated_category_path_rev($listing->fields['master_categories_id']))) . '&products_id=' . $listing->fields['products_id']) . '">' . zen_image(DIR_WS_IMAGES . $listing->fields['products_image'], $listing->fields['products_name'], IMAGE_PRODUCT_LISTING_WIDTH, IMAGE_PRODUCT_LISTING_HEIGHT, 'class="listingProductImage"') . '</a>';
          }
// bof - SOLD OUT on Image
         if ($listing->fields['products_quantity'] <= 0) {
         $lc_text .='<div class="sold_out_on_image" style="position:relative;top:-50px;">Sold Out</div>';
        }
// eof - SOLD OUT on Image

You should remove the in line style and put it into your stylesheet.css

[limelites]

Steve, almost perfect!! You've certainly got me on the right tracks!!

As you can see if you look at my products page here, I have altered the code you suggested so that it displays an image as opposed to text:

          // bof - SOLD OUT on Image
         if ($listing->fields['products_quantity'] <= 0) {
         $lc_text .='<div class="sold_out_on_image"><img src="http://www.dystynction.com/includes/templates/freetemplate2/images/button_sold_out_sm_mine.gif"></div>';
        }
         // eof - SOLD OUT on Image 

This works a treat as it places a sold out image over the top of the product image, however there is a problem with the white space caused by my position: relative;



How on earth do I get rid of the white space that the image file would occupy if not for my position: relative; ???

My stylesheet entry is this:

.sold_out_on_image {
position: relative; top: -180px;
margin: 0px;
padding: 0px;
line-height: 0px;
display: inline;
} 

[limelites]

OK, getting somewhere although still not perfect. I changed my stylesheet to this:

.sold_out_on_image {
position: relative; top: -180px;
height: 0px;
margin: 0px;
padding: 0px;
line-height: 0px;
display: block;
} 

and although it's a vast improvement, it still leaves a small white gap... anyone any idea from my source code how I can get rid of the <br> white space now?

[s_t_e_v_e]

another mod... not tested in IE...


.centeredContent {
position:relative;
}

.sold_out_on_image {
bottom:140px;
left:40px;
margin:0;
padding:0;
position:absolute;
text-align:center;
width:125px;
}