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

funkycategories
 
Reply
   X-Cart forums > X-Cart 4 > Changing and adding new features
 
Thread Tools Search this Thread
  #1  
Old 10-01-2004, 04:17 PM
  PhilJ's Avatar 
PhilJ PhilJ is offline
 

X-Guru
  
Join Date: Nov 2002
Location: UK
Posts: 3,646
 

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.
Reply With Quote
  #2  
Old 10-01-2004, 04:59 PM
  adpboss's Avatar 
adpboss adpboss is offline
 

X-Man
  
Join Date: Feb 2003
Location: Ontario, Canada
Posts: 2,389
 

Default

For version 4?

Got an example URL?
Reply With Quote
  #3  
Old 11-11-2004, 09:38 AM
 
GM GM is offline
 

eXpert
  
Join Date: Mar 2004
Location: Canada
Posts: 293
 

Default

Looks pretty good! I may try it tonight.
__________________
v. 4.0.14 (GM Style)
O.S. Linux
Build Your Own Diamond Ring
Reply With Quote
  #4  
Old 11-29-2004, 07:51 AM
 
QVS QVS is offline
 

Senior Member
  
Join Date: Nov 2004
Posts: 136
 

Default

yeh a working example would be good
__________________
xcart version 4.1.6
UK - Brighton

QVS ELECTRICAL SUPPLIES - http://www.qvsdirect.com

We supply a huge range of cables, electrical accessories, heating, ventilation, fire and security products, consumer units & circuit distribution, indoor and outdoor lighting, showers and water heating, tools and fixings, timer switches, sockets, switches, air conditioning, trunking, and much much more.
Reply With Quote
  #5  
Old 12-01-2004, 12:20 AM
 
donavichi donavichi is offline
 

X-Adept
  
Join Date: Apr 2004
Location: United Kingdom
Posts: 694
 

Default

Nice Mod PhilJ.

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

Donavichi.
X-Cart developer and e-commerce website designer since 2002.
X-Cart versions supported 3.5.x to 5.x
Hosting support for Linux, cPanel, WHM, Plesk
Reply With Quote
  #6  
Old 12-23-2004, 05:04 AM
 
donavichi donavichi is offline
 

X-Adept
  
Join Date: Apr 2004
Location: United Kingdom
Posts: 694
 

Default

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,
__________________
Best regards,

Donavichi.
X-Cart developer and e-commerce website designer since 2002.
X-Cart versions supported 3.5.x to 5.x
Hosting support for Linux, cPanel, WHM, Plesk
Reply With Quote
  #7  
Old 12-23-2004, 09:02 AM
  PhilJ's Avatar 
PhilJ PhilJ is offline
 

X-Guru
  
Join Date: Nov 2002
Location: UK
Posts: 3,646
 

Default

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.
Reply With Quote
  #8  
Old 01-15-2005, 08:08 AM
 
Danielle Danielle is offline
 

Senior Member
  
Join Date: Jan 2005
Posts: 138
 

Default

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!
__________________
Danielle
X-Cart Pro 4.0.10
X-Gift-Registry
X-AOM
Reply With Quote
  #9  
Old 01-19-2005, 03:03 PM
 
manager manager is offline
 

Member
  
Join Date: Jul 2003
Posts: 16
 

Default Nice Mod PhilJ

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 !
Reply With Quote
  #10  
Old 01-19-2005, 04:04 PM
 
steveparks steveparks is offline
 

Advanced Member
  
Join Date: Jan 2003
Location: UK
Posts: 87
 

Default Nice menu

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?
__________________
--------------
RHEL3/Apache2/PHP4/MySQL4/Plesk7.5.3
X-Cart 4.0.16 - Live
X-Affiliate
X-AOM
ez-checkout
ez-upsell
--------------
Reply With Quote
Reply
   X-Cart forums > X-Cart 4 > Changing and adding new features


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 05:25 AM.

   

 
X-Cart forums © 2001-2020