X-Cart forums - Vert Menu Title help

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

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

- - Vert Menu Title help (https://forum.x-cart.com/showthread.php?t=31414)

Vert Menu Title help

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

Re: Vert Menu Title help

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.

Re: Vert Menu Title help

Here is the Vert Menu area from the .css file

Quote:

/*
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.

Re: Vert Menu Title help

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

Re: Vert Menu Title help

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

Quote:

<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>

Re: Vert Menu Title help

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.

Re: Vert Menu Title help

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. :-)

Re: Vert Menu Title help

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. :-)