X-Cart forums - How to add gradients to side menus

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

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - How to add gradients to side menus (https://forum.x-cart.com/showthread.php?t=22066)

How to add gradients to side menus

I always wanted to add gradients to my side menus instead of having those flat colors but didn't think it was easily possible without an all css layout (example Boomer's site http://www.cart-lab.com/.) Well after an attempt to do it inside the table with a "table background" command I realized the CSS VertMenuTitle class was overlapping it which means you can do it in CSS! Here's the code:

Step 1:

Create a 21 x 1 pixel document in Photoshop or other graphics editing program. Gradient it using the gradient tool or other means. (Tip: Drop in a flat color using the paintbucket tool, zoom in, and use just a touch of the burn tool on the bottom and dodge tool on the top for a nice subtle gradient effect.) I saved my file as tablebackground.gif.

Step 2:

Change .VertMenuTitle in your skin1 to two files:

Code:

.VertMenuTitle {

        background-color: none;

        background-image: url(http://www.yoursite/xcart/skin1/images/tablebackground.gif);

        background-repeat:repeat-x;

}



.VertMenuFont {

        background-color: none;

        color: #ffffff;

        font-weight: bold;

        padding: 1px;

}

Step 3:

Inside /menu.tpl

Change

Code:

<font class="VertMenuTitle">{$menu_title}</font>

Code:

<font class="VertMenuFont">{$menu_title}</font>

We do this because VertMenuTitle is referenced twice, once for background and one for font decoration, creating 2 separate gradients. This fixes the issue and viola! Your new gradiented menu.

Moving to custom mods

Re: How to add gradients to side menus

I'm having some problems with this. Can somebody steer me in the right direction of what to put where? I know it is pretty much spelled out above, but it's not working for me. :oops: I think the problem is that I changed some of the original code some time ago and now don't know how to get it back.

Here is my .VertMenu CSS code:

Quote:

.VertMenuBox {
BACKGROUND-COLOR: #111111;
}
.VertMenuBorder {
BACKGROUND-COLOR: #333333;
}
.VertMenuTitle {
COLOR: #ffffff; FONT-WEIGHT: bold; TEXT-DECORATION: none; FONT-SIZE: 12px;
}

Here is my /menu.tpl code, which I have a gradient put into, but it only works for IE. I am trying to change this with this mod so that the gradient shows for all web browsers.

/menu.tpl:

Quote:

<TABLE border="0" cellpadding="0" cellspacing="0" width="100%">
<TR>
<TD class="VertMenuBorder">
<TABLE border="0" cellpadding="0" cellspacing="1" width="100%">
<TR>
<TD align="center" height="25" class="VertMenuTitle" style="FILTER: progid: DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=#cc0000, endColorstr=#ff000000);">{$link_begin}{$link_end}
{if $link_href}
<A href="{$link_href}">
<FONT class="VertMenuTitle">{$menu_title} </FONT>
</A>
{else}
<FONT class="VertMenuBoxNewsTitle">{$menu_title}
</FONT>
{/if}
</TD>
</TR>
<TR>
<TD class="VertMenuBox">
<TABLE border="0" cellpadding="0" cellspacing="0" width="100%">
<TR>
<TD>
{$menu_content} </TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
</TD>
</TR>
</TABLE>
<BR>

I have saved a 1 pixel by 25 pixel gradient image under Files ---> /images. I have named the file tablebackground.jpg.

Any help would be greatly appreciated.

Thanks,

Ryan