Follow us on Twitter X-Cart on Facebook Wiki
Shopping cart software Solutions for online shops and malls

How to add gradients to side menus

 
Reply
   X-Cart forums > X-Cart 4 > Dev Questions
 
Thread Tools Search this Thread
  #1  
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 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>

to

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.
__________________
X-cart 4.1.0
X-Configurator 4.1.0
PHP 4.4.2
Reply With Quote
  #2  
Old 05-25-2006, 03:08 PM
 
balinor balinor is offline
 

Veteran
  
Join Date: Oct 2003
Location: Connecticut, USA
Posts: 30,253
 

Default

Moving to custom mods
__________________
Padraic Ryan
Ryan Design Studio
Professional E-Commerce Development
Reply With Quote
  #3  
Old 07-21-2007, 10:13 AM
 
millsryno millsryno is offline
 

Advanced Member
  
Join Date: Nov 2006
Posts: 36
 

Default 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:
.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
__________________
X-Cart Version 4.0.19
DSEFU PRO
www.HandPouredWorms.com
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Dev Questions


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump


All times are GMT -8. The time now is 10:46 AM.

   

 
X-Cart forums © 2001-2020