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">»</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">»</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.