X-Cart forums

[mmoskva]

I would like to insert an image over my current menu background; so the background image displays and the buttons appear on top of them?

Appreciate help?

[balinor]

Use CSS...take a look at menu.tpl and edit the class that references the table cell that has the menu contents. Take a look at the .button class for reference.

[mmoskva]

when you referance the button class you mean button.tpl?

I tried coding inserting an image tag but I got a smarty error unrecognized syntax.

Here was the original code I used and I'll past what I insertend into the menu tpl file.

Original menu.tpl file

<TABLE border="0" cellpadding="0" cellspacing="0" width="100%">
<TR>
<TD class="VertMenuBorder">
<TABLE border="0" cellpadding="1" cellspacing="1" width="100%">
<TR>

<TD class="VertMenuTitle">{$link_begin}[img]{$ImagesDir}/{if $dingbats ne ''}{$dingbats}{else}spacer.gif{/if}[/img]{$link_end}
{if $link_href}
<FONT class="VertMenuTitle">{$menu_title}</FONT>
{else}
<FONT class="VertMenuBoxNewsTitle">{$menu_title}</FONT>
{/if}
</TD>
</TR>
<TR>
<TD class="VertMenuBox">
<TABLE border="0" cellpadding="5" cellspacing="0" width="100%" >

<TR>
<TD>{$menu_content}
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>



My modication is located at the bottom

<TABLE border="0" cellpadding="0" cellspacing="0" width="100%">
<TR>
<TD class="VertMenuBorder">
<TABLE border="0" cellpadding="1" cellspacing="1" width="100%">
<TR>

<TD class="VertMenuTitle">{$link_begin}[img]{$ImagesDir}/{if $dingbats ne ''}{$dingbats}{else}spacer.gif{/if}[/img]{$link_end}
{if $link_href}
<FONT class="VertMenuTitle">{$menu_title}</FONT>
{else}
<FONT class="VertMenuBoxNewsTitle">{$menu_title}</FONT>
{/if}
</TD>
</TR>
<TR>
<TD class="VertMenuBox">
<TABLE border="0" cellpadding="5" cellspacing="0" width="100%" >

<{$img_type} src="{$ImagesDir}/files/images/loginbglarge.gif">
<TR>
<TD>{$menu_content=}[img]{$ImagesDir}/files/images/loginbglarge.gif[/img]</TD></TR>
</TABLE>
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>

[balinor]

No, not html...you need to use CSS. Take a look at skin1.css. the .button class in particular. It uses a background image, so you would need to do something similar for the .vertmenubox class.

Sounds like you need yourself a good CSS book

[mmoskva]

I posted a background image tag in like you mentioned in css and it should be right over the username,password area but i cannot see nothing. Is their some background that needs to be transparent?
Location - Vertmenubox.


<TABLE border="0" cellpadding="0" cellspacing="0" width="100%">
<TR>
<TD class="VertMenuBorder">
<TABLE border="0" cellpadding="1" cellspacing="1" width="100%">
<TR>

<TD class="VertMenuTitle">{$link_begin}[img]{$ImagesDir}/{if $dingbats ne ''}{$dingbats}{else}spacer.gif{/if}[/img]{$link_end}
{if $link_href}
<FONT class="VertMenuTitle">{$menu_title}</FONT>
{else}
<FONT class="VertMenuBoxNewsTitle">{$menu_title}</FONT>
{/if}
</TD>
</TR>
<TR>
<TD class="VertMenuBox">
<TABLE border="0" cellpadding="5" cellspacing="0" width="100%" background-image: url("file/images/loginbglarge.gif")>
<TR>
<TD>{$menu_content}
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>
</TD></TR>
</TABLE>

[mmoskva]

I keyed background: instead of background-inage: but that didn't help any.

[mmoskva]

Can anyone help me on how to insert a background images in my menu.tpl?

[balinor]

Ok, you aren't listening to me This needs to be done in CSS, not html in the template. In skin1.css, in the .vertmenubox class, add this:

background-image: url(images/loginbglarge.gif)