X-Cart forums - Menu background images other than the titles ?

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

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

- - Menu background images other than the titles ? (https://forum.x-cart.com/showthread.php?t=3867)

Menu background images other than the titles ?

Hello,

I have images behind my menu titles but I was wondering if you can also add a background image to the menu body so to speak.

I was able to achieve this in the dialogue area thanks to a funkydunk post but I'm damned if I can repeat it for the menu without upsetting the menu title pix. Does anybody have any ideas ? :)

I'm using the #3.4.4.

It might be because I think you can set a background image for a table, but the menu set is composed of 1 table with two or more cells.

Try splitting the menu header and menu body into separate tables. Then the background behaviour for the menu body cell/table should work.

I'm not expert at this so backup before you do anything. :)

just set the background property for the table cell not the whole table

Yeah, or that might work. :oops:

:)

Define a new style in the skin1.css

.FancyMenuBackground {
background-image: url(images/extra/bg_star.gif);
background-repeat: no-repeat;
}

Then in menu.tpl change to:

Code:

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

<TR>

<TD width="29" height="19" valign="middle" class="VertMenuTitle">

[img]{$ImagesDir}/extra/menu_sun.gif[/img]

</TD> 

<TD align="left" valign="center" class="VertMenuTitle" width="90%">{$menu_title}</TD>

</TR>

<tr>

<TD class="FancyMenuBackground" colspan="2">{$menu_content}</TD>

</TR>

</TABLE>

That should do it :)

Thanks Guys :D I will give it a whirl and see how it looks. 8)

okydoky,

having a few minor problems. :? I have tried implementing the code and my right hand menu background is missing, that is the page background is showing through. The left side menu is unchanged.

here are some before and after shots of my menu.tpl . The CSS stuff was easy so I assume there are no probs there, the syntax seems ok.

B4

Code:

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

<TR> 

{if $link_href} 

<TD class=VertMenuTitle background="{$ImagesDir}/dingbats_categorie.gif" height=30 valign=center width=80%><font class=VertMenuTitle>{$menu_title}</font></TD> 

{else} 

<TD class=VertMenuTitle background="{$ImagesDir}/dingbats_categorie.gif" height=30 valign=center width=80%><font class=VertMenuBoxNewsTitle>{$menu_title}</font></TD> 

{/if} 

</TR> 

<TR> 

<TD colspan="2" class=VertMenuBox>{$menu_content} 

</TD></TR> 

</TABLE>

and after

Code:



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

<TR> 

{if $link_href} 

<TD class=VertMenuTitle background="{$ImagesDir}/dingbats_categorie.gif" height=30 valign=center width=80%><font class=VertMenuTitle>{$menu_title}</font></TD> 

{else} 

<TD class=VertMenuTitle background="{$ImagesDir}/dingbats_categorie.gif" height=30 valign=center width=80%><font class=VertMenuBoxNewsTitle>{$menu_title}</font></TD> 

{/if} 

</TR> 

<TR> 

<TD class="FancyMenuBackground"colspan="2" class=VertMenuBox>

{$menu_content} 

</TD></TR> 

</TABLE>

What do you think ? Is there something obvious I am missing or am I just too moded out on this template? :? thanks for your patience

cheers
supanewb

something obvious - you have left the class=VertMenuBox in aswell so that table cell has two classes assigned to it. The latter being the one that it applies.

Take that out and all will work fine