View Single Post
Old 05-25-2006, 01:07 PM
athenarchiver athenarchiver is offline

Advanced Member
Join Date: May 2006
Posts: 31

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

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


<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.
X-cart 4.1.0
X-Configurator 4.1.0
PHP 4.4.2
Reply With Quote