X-Cart forums - funkycategories

X-Cart forums (https://forum.x-cart.com/index.php)

- Dev Questions (https://forum.x-cart.com/forumdisplay.php?f=20)

- - funkycategories (https://forum.x-cart.com/showthread.php?t=9668)

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" }

Code:

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

4) Change the styles according to your design. :lol:

For version 4?

Got an example URL?

Looks pretty good! I may try it tonight.

yeh a working example would be good :)

Nice Mod PhilJ.

Works for me on a 3.5.12 X-Cart and does a tidy job of making the categories look funky!

Spent a bit of time with this mod on acouple of sites and my initial reaction was - great mod.

However on continued use and testing it has become apparent that there is a fatal flaw with it on 3.5.X sites:

When installed, it slows the store down by about 60%.

PhilJ I don't know what it is that is making this happen but it's a fatal flaw which needs to be addressed if you want any serious level of uptake from the rest of the community.

If this problem was not present, then I would have to wholeheartedly commend you on an excellent mod.

Hope you get it sorted.

Regards,

If you use HTML catalog you'll find that only the category text hyperlinks link-on to the other HTML catalog pages.

If you click a table 'cell' part of the category link, it takes you to the normal dynamicly generated site.

This might be why you noticed a change in load times. I'll try and fix that.

Does someone have a site where we can see this in action? I'd like to know what it looks like before I do it...

Thanks!

Hi Philj,

I have tested this on Version 4.0.10,
I have noticed no problems. It has no adverse effect on the speed of the cart.
It was a sixty second setup, thanks to your easy to follow instructions.
It would be interesting to know how to make the menu display horizontal.
And it would be lovely to make the "speed Bar" have the CSS table background link rollover.

Thanks for sharing great mod !

Hi

Thanks for this...i was looking for a good mod for the categories block!

For those of you who want to see this in action, I've just put a version of this menu on my development site at:

http://www.redleader.biz/xcart/home.php

It workes great, and is really easy to set up from your instructions.

Is there a way of just doing this in CSS though and avoiding javascript?