X-Cart forums

[hoosierglass]

Working on my verticle menu and have changed the background from a color to an image. The problem I am having is the background of the wording. There shouldn't be any, it should just be plain white lettering over the image. Is this because the image I used is a jpg and this should be done as a transparent gif?

Here is what it looks like:
http://www.kennedyhardware.com/screenshot.JPG

[balinor]

Make sure you have the CSS class that renders the background applied to the div or table cell that contains the title, not the tag that controls the text.

[hoosierglass]

Here is the Vert Menu area from the .css file

/*
Vertical menu
*/
.VertMenuLeftColumn {
VERTICAL-ALIGN: top;
PADDING-LEFT: 6px;
PADDING-RIGHT: 0px;
}
.VertMenuRightColumn {
VERTICAL-ALIGN: top;
PADDING-LEFT: 0px;
PADDING-RIGHT: 6px;
}
.VertMenuBox {
BACKGROUND-COLOR: #D6D7D9;
PADDING: 1px;
}
.VertMenuBorder {
BACKGROUND-COLOR: #0066FF;
}
.VertMenuTitle {
BACKGROUND-IMAGE: url(images/menubkgd.jpg);
COLOR: #FFFFFF;
FONT-WEIGHT: bold;
PADDING: 1px;
}
.VertMenuSubTitle {
BACKGROUND-COLOR: #081589;
}
.VertMenuTitleIcon {
WIDTH: 21px;
HEIGHT: 20px;
MARGIN-LEFT: 8px;
MARGIN-RIGHT: 8px;
VERTICAL-ALIGN: middle;
}
.VertMenuItems {
COLOR: #000000;
TEXT-DECORATION: none;
}
A.VertMenuItems:link {
COLOR: #081589;
TEXT-DECORATION: none;
}
A.VertMenuItems:visited {
COLOR: #081589;
TEXT-DECORATION: none;
}
A.VertMenuItems:hover {
COLOR: #FF0000;
TEXT-DECORATION: underline;
}
A.VertMenuItems:active {
COLOR: #081589;
TEXT-DECORATION: none;
}
.VertMenuHr {
WIDTH: 100%;
HEIGHT: 1px;
BORDER-BOTTOM-WIDTH: 0px;
BORDER-LEFT-WIDTH: 0px;
BORDER-RIGHT-WIDTH: 0px;
COLOR: #999999;
}
.CategoriesList {
FONT-SIZE: 12px;
}

I don't see any other place to put it.

[balinor]

Ok, but what does your menu.tpl look like?

[hoosierglass]

Here is the menu.tpl It is stock I have not changed it.

<table cellspacing="1" width="100%" class="VertMenuBorder">
<tr>
<td class="VertMenuTitle">
<table cellspacing="0" cellpadding="0" width="100%"><tr>
<td>{$link_begin}<img src="{$ImagesDir}/{if $dingbats ne ''}{$dingbats}{else}spacer.gif{/if}" class="VertMenuTitleIcon" alt="{$menu_title|escape}" />{$link_end}</td>
<td width="100%">{if $link_href}<a href="{$link_href}">{/if}<font class="VertMenuTitle">{$menu_title}</font>{if $link_href}</a>{/if}</td>
</tr></table>
</td>
</tr>
<tr>
<td class="VertMenuBox">
<table cellpadding="{$cellpadding|default:"5"}" cellspacing="0" width="100%">
<tr><td align="left">{$menu_content}<br /></td></tr>
</table>
</td></tr>
</table>

[balinor]

This is your problem:

<font class="VertMenuTitle">

You need to assign a different class to that, as it is calling the background for the text.

[hoosierglass]

First and foremost thank you.

Now that you explained it, I understand what it was doing. I would have never thought that the background would overlap like that in the same class, which is part of why I did not look at the menu.tpl.

Another small hurdle cleared thanks to Balinor.

[hoosierglass]

Oh Balinor you are BAD. You didn't tell me that if I called a class in the menu.tpl that I needed to put the class in the adminskin too!

I know I need to learn some things on my own.