X-Cart forums - Change Detailed Image Background Color? How? Please

X-Cart forums (https://forum.x-cart.com/index.php)

- Changing design (https://forum.x-cart.com/forumdisplay.php?f=51)

- - Change Detailed Image Background Color? How? Please (https://forum.x-cart.com/showthread.php?t=6176)

Change Detailed Image Background Color? How? Please

Hello Group

I did not want to tag on staggerd image section. What I wanted to know is how to make that page black instead of white?

The page is:
File: /modules/Detailed_Product_Images/product_images.tpl

it starts out with:
{* $Id: product_images.tpl,v 1.10 2003/08/11 10:45:10 svowl Exp $ *}
{if $images ne ""}
{capture name=dialog}
<div align=center>
{section name=image loop=$images}

My guess is that we must be in a table. However, where is the start of this table so I can set the background to black?

I added some text above <div align=center> and it shows up above the image so I know I have part of the page. I do not know where the previous section ends. That is where I think the background color may be changed?

look in customer/main/product.tpl

Tpl files aren't always pages. A page in X-cart is usually made up of several template files.

Try using Webmaster mode to see a grahical "tree" type representation of which templates are embedded in which.

Hello adpboss

I used webmaster mode to find the page. I also deleted the page to make sure I had the coorect one. It is the correct page. I could not find it following the tree. It must be there?

Maybe someone who has found it can give us the good word.

if your looking to just make the detailed images box have a black background do this for v3.5.x

Code:

{* $Id: product_images.tpl,v 1.10 2003/08/11 10:45:10 svowl Exp $ *}

{if $images ne ""}

{capture name=dialog}



{* added this - start *}



<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#000000">

  <tr>

    <td>



{* added this - end *}



<div align=center>

{section name=image loop=$images}

{if $images[image].avail eq "Y"}

{if $images[image].tmbn_url}

[img]{$images[image].tmbn_url}[/img]

{else}

[img]{$xcart_web_dir}/product_image.php?imageid={$images[image].imageid}[/img]

{/if}











{/if}

{/section}

</div>



{* added this - start *}



</td>

  </tr>

</table>



{* added this - end *}



{/capture}

{if $smarty.capture.dialog ne ""}

{include file="dialog.tpl" title=$lng.lbl_detailed_images content=$smarty.capture.dialog extra="width=100%"}

{/if}

{/if}

all middle sections have the dialog.tpl file wrapped around them so adjusting that file will adjust all of them

Hello

That did not do the trick. But it sure change things. It put everything out of whack. It put part of the detail section in black but not the whole thing.

There has to be a table somewhere or maybe it is a row.

I think I understand now.

If you haven't modded your product page very much, detailed images appear at the bottom of the Product Detailed Page.

That area is NOT in a table. The table ends where the Product form ends.

Code:

</form>

</table>

{/capture}

{include file="dialog.tpl" title=$product.producttitle content=$smarty.capture.dialog extra="width=100%"}

{/if}

{if $active_modules.Detailed_Product_Images ne ""}








{include file="modules/Detailed_Product_Images/product_images.tpl" }

{/if}

{if $active_modules.Upselling_Products ne ""}

You would have to enclose

Code:

{if $active_modules.Detailed_Product_Images ne ""}








{include file="modules/Detailed_Product_Images/product_images.tpl" }

{/if}

in a table to be able to manipulate the background for that area only. If you go to Webmaster mode, browse to the front end and go to a product detail page, it will show you that the product_images.tpl is called from customer/main/product.tpl.

Once you have that it is easy to browse through product.tpl to see where the detailed images section is and whether or not it is in a table.

I hope this helps you , even a little. :-)

Hello All Great Ones

As my signature suggest I am quit ignorant with xcart. In all the <tr> I tried putting <tr bgcolor="#000000"> in the following file:
File: /customer/main/product.tpl

I do not think the detailed image section is there. It did change the detail section but not where the detail image is

When I have the detail image showing below the order description I want the backgorund of the detailed image to be black. At this site it is a 100% non modified site.

So, how do you get the detailed image section that is now white to a black bacground?

There is a section that is embedded with something else. All I need to do is find it!!!!!!!!!!!!!!

Below is a URL of the detaied image background I would like to have black
http://www.amaurydiaz.com/artwork/customer/product.php?productid=16133&cat=248&page=1

Please post the code of your product.tpl file here between <code> tags.

We'll look it over for you.

Hello adpboss & Group

This is 100% original

Code:

{* $Id: product.tpl,v 1.78.2.2 2003/12/16 12:13:32 svowl Exp $ *}

{include file="check_product_options_js.tpl"}

{include file="location.tpl"}

{if $product.product_type eq "C"}

{include file="modules/Product_Configurator/pconf_customer_product.tpl"}

{else}

{capture name=dialog}

<table border=0 width=100%>

<form name=orderform method=post action="cart.php?mode=add">

<tr>

<td valign=top align=left rowspan=2 width=100>

{include file="product_thumbnail.tpl" productid=$product.productid image_x=$product.image_x image_y=$product.image_y product=$product.product tmbn_url=$product.tmbn_url}

</td>

<td valign=top>

<span class=>

{if $product.fulldescr ne ""}{$product.fulldescr}{else}{$product.descr}{/if}

</span>








<table width=100% cellpadding=0 cellspacing=0 border=0>

<tr><td colspan=2><font class=ProductDetailsTitle>{$lng.lbl_details}</font></td></tr>

<tr><td class=Line height="1" colspan=2>[img]{$ImagesDir}/spacer.gif[/img]</td></tr>

<tr><td colspan=2></td></tr>

{if $config.Appearance.show_in_stock eq "Y" and $config.General.unlimited_products ne "Y" and $product.distribution eq ""}

<tr><td width=30%>{$lng.lbl_quantity}</td><td nowrap>{if $product.avail gt 0}{$product.avail}{else}{$lng.txt_no}{/if} {$lng.txt_items_available}</td></tr>

{/if}

{if $product.weight ne "0.00"}<tr><td width=30%>{$lng.lbl_weight}</td><td nowrap>{$product.weight} {$config.General.weight_symbol}</td></tr>{/if}

{if $active_modules.Extra_Fields ne ""}

{include file="modules/Extra_Fields/product.tpl"}

{/if}

{if $active_modules.Subscriptions ne "" and $subscription}

{include file="modules/Subscriptions/subscription_info.tpl"}

{else}

<tr><td class=ProductPriceConverting>{$lng.lbl_price}:</td>

<td>

{if $product.price ne 0}

<font class=ProductDetailsTitle>{include file="currency.tpl" value=$product.price}</font><font class=MarketPrice> {include file="customer/main/alter_currency_value.tpl" alter_currency_value=$product.price}</font>{if $config.Taxes.use_vat eq "Y" and $product.vat gt "0"}, {$lng.lbl_including_vat} {$product.vat}%{/if}

{else}

<input type=text size=7 name=price>

{/if}

</td>

</tr>

{/if}

</table>








<table border=0 width=100% cellpadding=0 cellspacing=0>

<tr><td colspan=2>

<font class=ProductDetailsTitle>{$lng.lbl_options}</font>

</td></tr>

<tr><td class=Line height="1" colspan=2>[img]{$ImagesDir}/spacer.gif[/img]</td></tr>

<tr><td colspan=2></td></tr>

{if $active_modules.Product_Options ne ""}

{ include file="modules/Product_Options/customer_options.tpl"}

{/if}

<tr><td height=25 width=30%>

{$lng.lbl_quantity}{if $product.min_amount gt 1}

<FONT class=ProductDetailsTitle>{$lng.txt_need_min_amount} {$product.min_amount} {$lng.lbl_items}</FONT>{/if}</td>

<td>

{if $config.General.unlimited_products eq "N" and ($product.avail le 0 or $product.avail lt $product.min_amount)}

{$lng.txt_out_of_stock}

{else}

{if $config.General.unlimited_products eq "Y"}

{math equation="x+1" assign="mq" x=$config.Appearance.max_select_quantity}

{else}

{math equation="x/y" x=$config.Appearance.max_select_quantity y=$product.min_amount assign="tmp"}

{if $tmp<2}

{assign var="minamount" value=$product.min_amount}

{else}

{assign var="minamount" value=0}

{/if}

{math equation="min(maxquantity+minamount, productquantity)+1" assign="mq" maxquantity=$config.Appearance.max_select_quantity minamount=$product.min_amount productquantity=$product.avail}

{/if}

{if $product.distribution eq ""}

<select name=amount>

{if $product.min_amount le 1}

{assign var="start_quantity" value=1}

{else}

{assign var="start_quantity" value=$product.min_amount}

{/if}

{section name=quantity loop=$mq start=$start_quantity}

<option value="{%quantity.index%}" {if $smarty.get.quantity eq %quantity.index%}selected{/if}>{%quantity.index%}</option>

{/section}

</select>

{else}

<font class=ProductDetailsTitle>1</font><input type=hidden name=amount value=1> {$lng.txt_product_downloadable}

{/if}

{/if}

</td></tr>

<tr><td colspan=2>

<input type=hidden name=mode value=add>

{include file="customer/main/product_prices.tpl"}

{if $config.General.unlimited_products eq "Y" or ($product.avail gt 0 and $product.avail ge $product.min_amount)}

{if $js_enabled}






{if $smarty.get.pconf ne ""}

<INPUT type=hidden name="slot" value="{$smarty.get.slot}">

<INPUT type=hidden name="addproductid" value="{$product.productid}">

{include file="buttons/pconf_add_to_configuration.tpl" style="button"}








{/if}

{if $product.forsale ne "B"}

{include file="buttons/add_to_cart.tpl" style="button"}



{if $login ne "" and $active_modules.Wishlist ne ""}

{include file="customer/add2wl.tpl"}

{/if}

{else}

{$lng.txt_pconf_product_is_bundled}

{/if}

{else}

{include file="submit_wo_js.tpl" value=$lng.lbl_add_to_cart}

{/if}

{/if}



<input type=image src="{$ImagesDir}/null.gif" width=10 height=10 border=0 align=top>




</td>

</tr></table>

</td>





<td align=right valign=top width=60>







{if $product.list_price gt 0 and $product.price lt $product.list_price}<table border=0 width=60><tr><td width=55 height=56 class="SaveMoneyLabel" background="{$ImagesDir}/save_money.gif" align=center valign=middle>






{math equation="100-(price/lprice)*100" price=$product.price lprice=$product.list_price format="%d" assign=discount}

{ $discount }%

</td></tr></table>{/if}

</td>

</tr>

<input type=hidden name=productid value="{$product.productid}">

<input type=hidden name=cat value="{$smarty.get.cat|escape:"html"}">

<input type=hidden name=page value="{$smarty.get.page|escape:"html"}">

</form>

</table>

{/capture}

{include file="dialog.tpl" title=$product.producttitle content=$smarty.capture.dialog extra="width=100%"}

{/if}

{if $active_modules.Detailed_Product_Images ne ""}








{include file="modules/Detailed_Product_Images/product_images.tpl" }

{/if}

{if $active_modules.Upselling_Products ne ""}








{include file="modules/Upselling_Products/related_products.tpl" }

{/if}

{if $active_modules.Recommended_Products ne ""}








{include file="modules/Recommended_Products/recommends.tpl" }

{/if}

{if $active_modules.Customer_Reviews ne ""}








{include file="modules/Customer_Reviews/vote_reviews.tpl" }

{/if}

It is like looking for a needle in a hay stack if you do not know where that section is comming from. I thank you very much for looking at this and taken your time to help me out.

Caucus,

It is coming from exactly where I should you. Towards the end of the product.tpl, it says include product_images.tpl.

So you either need to make the change in product.tpl, or product_images.tpl.

One file calls the other. That is how they are displayed.

Can you post your product_images.tpl here as well please?

Hello Again

This is from: File: /modules/Detailed_Product_Images/product_images.tpl
If you add text just above teh <div align=center> tag it shows up just above the image. Or if you delete this page nothing shows up for detailed image. So this is what displays the image but where do I put the <td bgcolor="#000000">

If I go like the following
<td bgcolor="#000000">
<div align=center>

A white column remains the width of deta of the detail Image section. However the rest of the picture backgorund is black. So it has to be the page that loads before this, I think?

Take a look at http://www.amaurydiaz.com/artwork/customer/product.php?productid=16133&cat=248&page=1

Code:

{* $Id: product_images.tpl,v 1.10 2003/08/11 10:45:10 svowl Exp $ *}

{if $images ne ""}

{capture name=dialog}

<div align=center>

{section name=image loop=$images}

{if $images[image].avail eq "Y"}

{if $images[image].tmbn_url}

[img]{$images[image].tmbn_url}[/img]

{else}

[img]{$xcart_web_dir}/product_image.php?imageid={$images[image].imageid}[/img]

{/if}











{/if}

{/section}

</div>

{/capture}

{if $smarty.capture.dialog ne ""}

{include file="dialog.tpl" title=$lng.lbl_detailed_images content=$smarty.capture.dialog extra="width=100%"}

{/if}

{/if}

You can't use TD because you are not in the product detail table anymore. You need to create a new table that holds only the detailed images.

Shan's mod didn't work? The more I look at it, the more it looks like the answer.

Hello adpboss & Group

I will try it one more time, maybe I missed somthing and then I will post the links with the results.

Hello Group

It is close:
http://www.amaurydiaz.com/artwork/customer/product.php?productid=16133&cat=248&page=1

That is very clever one has the black around the wite edges. I think I missed a closing tag the first time. It is amazing one cannot make all of the white in the detail section black. Do you think that would look better?

You can look at the images on complete black at:
http://www.amaurydiaz.com/gallery/gallery02.htm

and click on one of the images. I thought all black sharpens the image.