Thread: funkycategories
View Single Post
  #1  
Old 10-01-2004, 04:17 PM
 
PhilJ PhilJ is offline
 

X-Guru
  
Join Date: Nov 2002
Posts: 4,094
 

Default funkycategories

Nicer looking category menu. v4.x.x

1) Create skin1/customer/funkycategories.tpl

Code:
{literal} <script language="JavaScript1.2"> function changeLoc(address){ window.location.href = address; } function onOver(td){ if(document.getElementById||(document.all && !(document.getElementById))){ td.style.backgroundColor="#009966"; td.style.cursor="hand"; } } function onOut(td){ if(document.getElementById||(document.all && !(document.getElementById))){ td.style.backgroundColor="#006633"; } } </script> {/literal} <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td class="funkycatsep"></td> </tr> </table> {if $config.General.root_categories eq "Y"} <table width="100%" border="0" cellpadding="0" cellspacing="0"> {section name=cat_num loop=$categories} <tr> <td width="1" class="funkycatsep">[img]{$ImagesDir}/null.gif[/img]</td> <td class="funkycat" onMouseOver="onOver(this);" onMouseOut="onOut(this);" onClick="changeLoc('home.php?cat={$categories[cat_num].categoryid}');"><font color="#FFFF00">&raquo;</font>{$categories[cat_num].category}</td> <td width="1" class="funkycatsep">[img]{$ImagesDir}/null.gif[/img]</td> </tr> <tr> <td colspan="3" class="funkycatsep"></td> </tr> {/section} </table> {else} <table width="100%" border="0" cellpadding="0" cellspacing="0"> {section name=cat_num loop=$subcategories} <tr> <td width="1" class="funkycatsep">[img]{$ImagesDir}/null.gif[/img]</td> <td class="funkycat" onMouseOver="onOver(this);" onMouseOut="onOut(this);" onClick="changeLoc('home.php?cat={$subcategories[cat_num].categoryid}');"><font color="#FFFF00">&raquo;</font>{$subcategories[cat_num].category}</td> <td width="1" class="funkycatsep">[img]{$ImagesDir}/null.gif[/img]</td> </tr> <tr> <td colspan="3" class="funkycatsep"></td> </tr> {/section} </table> {/if}

2) Add this code to skin1/skin1.css

Code:
/* ================================================================= */ td.funkycat { HEIGHT: 24px; BACKGROUND-COLOR: #006633; FONT: 11px verdana,arial,sans-serif; COLOR: #000000; FONT-WEIGHT: bold; CURSOR: hand; border-left: 1px #003300; border-right: 1px #003300; } .funkycatsep { HEIGHT: 1px; BACKGROUND-COLOR: #003300; } .funkycatlink { TEXT-DECORATION: none; COLOR: #FFFFFF; FONT-WEIGHT: bold; } .funkycatlink:link { TEXT-DECORATION: none; COLOR: #FFFFFF; FONT-WEIGHT: bold; } .funkycatlink:visited { TEXT-DECORATION: none; COLOR: #FFFFFF; FONT-WEIGHT: bold; } .funkycatlink:hover { TEXT-DECORATION: none; COLOR: #FFFFFF; FONT-WEIGHT: bold; } .funkycatlink:active { TEXT-DECORATION: none; COLOR: #FFFF00; FONT-WEIGHT: bold; } /* ================================================================= */

3) Then in skin1/customer/home.tpl

change

Code:
{ include file="customer/categories.tpl" }

to

Code:
{ include file="customer/funkycategories.tpl" }

4) Change the styles according to your design.
__________________
xcartmods.co.uk
Reply With Quote