[athenarchiver]

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:

.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

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

to

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