| ||||||||||
Shopping cart software Solutions for online shops and malls | ||||||||||
|
X-Cart Home | FAQ | Forum rules | Calendar | User manuals | Login |
How to add gradients to side menus | |||
|
|
Thread Tools | Search this Thread |
#1
|
|||||||
|
|||||||
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:
Step 3: Inside /menu.tpl Change Code:
to Code:
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 |
|||||||
#2
|
|||||||
|
|||||||
Moving to custom mods
__________________
Padraic Ryan Ryan Design Studio Professional E-Commerce Development |
|||||||
#3
|
|||||||
|
|||||||
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. 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:
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:
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 |
|||||||
|
|||
X-Cart forums © 2001-2020
|