X-Cart forums - menu.tpl background image problem

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

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

- - menu.tpl background image problem (https://forum.x-cart.com/showthread.php?t=6513)

menu.tpl background image problem

hello,
I wanted to use the background image in the menu like one used wildshopping.com/customer/home.php

Here is my code for menu.tpl

Code:

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

  <tr>

    <td width="26">[img]{$ImagesDir}/menu_bg_orange.gif[/img]</td>

    <td background="{$ImagesDir}/menu_bg_orange.gif"><font

class=VertMenuBoxNewsTitle>{$menu_title}</font></td>

  </tr>

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

  <tr>

    <td width="1" class="VertMenuBorder">[img]{$ImagesDir}/menu_bg_orange.gif[/img]</td>

    <td class="VertMenuBox">

<TABLE border=0 cellPadding=5 cellSpacing=0 width="100%">

  <TR>

    <TD width="80%" class=VertMenuBox nowrap>{$menu_content} </TD>

  </TR>

</TABLE>

</td>

    <td width="1" class="VertMenuBorder">[img]{$ImagesDir}/menu_bg_orange.gif[/img]</td>

  </tr>

  <tr>

    <td width="1" height="1" class="VertMenuBorder">[img]{$ImagesDir}/spacer.gif[/img]</td>

    <td height="1" class="VertMenuBorder">[img]{$ImagesDir}/spacer.gif[/img]</td>

    <td width="1" height="1" class="VertMenuBorder">[img]{$ImagesDir}/spacer.gif[/img]</td>

  </tr>

</table>

It shows the background image correctly but in the dingbats area it shows squre empty space !!
Like this.. http://www.gujaratibooks.com/temp/dingbats_problem.jpg

I don't want to use dingbats instead I want to use image which would be match with my background color like one used at wildshopping.com.

So what need to be change for this ?
Any help would be appriciated

find this

Code:

<TABLE border=0 cellPadding=5 cellSpacing=0 width="100%"> 

  <TR> 

    <TD width="80%" class=VertMenuBox nowrap>{$menu_content} </TD> 

  </TR> 

</TABLE>

change to this

Code:

<TABLE border=0 cellPadding=5 cellSpacing=0 width="100%"> 

  <TR> 

    <td background="{$ImagesDir}/menu_content_bg.gif" nowrap>{$menu_content} </TD> 

  </TR> 

</TABLE>

then upload your background image called menu_content_bg.gif to

skin1/images/

Shan thanks a lot for the quick reply.
But I think there some mistake in the code. Your code affect the other row of table I want image in "Title" raw of the table where there is a squre blank space.
From this image I think it would be easy to understand what I actually need.
http://www.gujaratibooks.com/temp/dingbats_problem_2.gif

I hope you will above to solve this.
Thanks once again for the help :)

Simplist method would be to replace all dingbat_*.gif images with this one image so you don't have to change every tpl file.

;)

I changed the image name also but still it's shows the blank space :(
Can any one please help me to solve this problem ?

make sure you set the correct image name

Code:

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

  <tr> 

    <td width="26">[img]{$ImagesDir}/menu_content_bg.gif[/img]</td> 

    <td background="{$ImagesDir}/menu_bg_orange.gif"><font 

class=VertMenuBoxNewsTitle>{$menu_title}</font></td> 

  </tr> 

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

  <tr> 

    <td width="1" class="VertMenuBorder">[img]{$ImagesDir}/menu_bg_orange.gif[/img]</td> 

    <td class="VertMenuBox"> 

<TABLE border=0 cellPadding=5 cellSpacing=0 width="100%"> 

  <TR> 

    <TD width="80%" class=VertMenuBox nowrap>{$menu_content} </TD> 

  </TR> 

</TABLE> 

</td> 

    <td width="1" class="VertMenuBorder">[img]{$ImagesDir}/menu_bg_orange.gif[/img]</td> 

  </tr> 

  <tr> 

    <td width="1" height="1" class="VertMenuBorder">[img]{$ImagesDir}/spacer.gif[/img]</td> 

    <td height="1" class="VertMenuBorder">[img]{$ImagesDir}/spacer.gif[/img]</td> 

    <td width="1" height="1" class="VertMenuBorder">[img]{$ImagesDir}/spacer.gif[/img]</td> 

  </tr> 

</table>

Thanks a lot Shan at last it's now working perfectly. :)