X-Cart forums - funkycategories

Page 1 of 2

Show 40 posts from this thread on one page

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)

PhilJ

10-01-2004 04:17 PM

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

Code:

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

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

adpboss

10-01-2004 04:59 PM

For version 4?

Got an example URL?

GM	11-11-2004 09:38 AM

Looks pretty good! I may try it tonight.

QVS	11-29-2004 07:51 AM

yeh a working example would be good :)

donavichi

12-01-2004 12:20 AM

Nice Mod PhilJ.

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

donavichi

12-23-2004 05:04 AM

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,

PhilJ

12-23-2004 09:02 AM

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.

Danielle

01-15-2005 08:08 AM

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!

manager

01-19-2005 03:03 PM

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 !

steveparks

01-19-2005 04:04 PM

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?

PhilJ

01-20-2005 03:31 AM

Quote:

It would be interesting to know how to make the menu display horizontal.

here you go...

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

  <tr> 

    <td width="1" class="funkycatsep">[img]{$ImagesDir}/null.gif[/img]</td>

{section name=cat_num loop=$categories}

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

{/section}

    <td width="1" class="funkycatsep">[img]{$ImagesDir}/null.gif[/img]</td>

  </tr> 

</table> 



<table width="100%" border="0" cellpadding="0" cellspacing="0"> 

  <tr> 

    <td class="funkycatsep"></td> 

  </tr> 

</table> 



{else} 



<table width="100%" border="0" cellpadding="0" cellspacing="0"> 

  <tr> 

    <td width="1" class="funkycatsep">[img]{$ImagesDir}/null.gif[/img]</td> 

{section name=cat_num loop=$subcategories}

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

{/section}

    <td width="1" class="funkycatsep">[img]{$ImagesDir}/null.gif[/img]</td>

  </tr> 

</table> 



<table width="100%" border="0" cellpadding="0" cellspacing="0"> 

  <tr> 

    <td class="funkycatsep"></td> 

  </tr> 

</table>



{/if}

Jon	01-20-2005 11:11 AM

Funkydunk is going to sue you! :wink:

CC	01-20-2005 12:41 PM

Looking good.

We have our categories box working where it displays subcategories below the main, when a main category is selected.
The only problem I have found is I can not get this to work with that...

It just screws up the subcategory that displays once selected.

Otherwise this definately imprvies the look of XC.

stryker898

01-21-2005 05:08 PM

Great Mod...thanks for sharing!!

Have one question...easy thing but I'm inexperienced with Java coding. How would I make my font go dark when 'function onOver(td)'
I tried...

Code:

} 

function onOver(td){ 

  if(document.getElementById||(document.all && !(document.getElementById))){ 

    td.style.backgroundColor="#FFE8FF"; 

    td.style.cursor="hand";

    td.style.fontColor="#000000";

  } 

}

but it didnt work...any ideas? Thanks

manager

01-22-2005 01:02 PM

Greetings PhilJ

Mucho Respecto for your speedy reply,

I am unclear where to paste the code, you so generously posted. In truth; I wouldn't know where to start. Could you post some very brief instructions.

jkirkpatrick

03-28-2005 07:37 AM

Hello,

Does anyone know how to make it so that when you click on the "Category" name it doesn't show the "subcategories.tpl" page? Instead I'd just like the user to stay on whatever page they're on but see the subcategories menu fold down.

Is this possible?

Thanks,
Jennifer

larrydavidow

04-13-2005 07:58 PM

Hi Jennifer

Are you using Fancy Categories? I think that's what you're saying... If it's not, I am :D

I'm using Funky Categories with Fancy Categories. By the way, Funky Categories is an AWESOME mod!! Works great!!

I'd like to know how to expand the fancy categories category when you click on a Funky Category link.

Larry

marian

04-14-2005 08:08 AM

Awesome!!!

Thank you for sharing this. I have a question. How do you get the sub-categories to display under the parent category in the menu? Like this one:
http://www.redleader.biz/xcart/home.php

Mine does not do that.
http://www.screentechstore.com/xcart/home.php

Thank You for a really nice mod and so easy too. :D

P.S. Edit to above post:
It looks like to get the subcategories to "drop" down below the main categorie you MUST have Fancy Categories installed. This is an add on that can be purchased from X-cart for 27.95

So disregard my question.

larrydavidow

04-14-2005 08:12 AM

Re: Awesome!!!

Quote:

Originally Posted by marian

That's done using Fancy Categories. It's the Icons template with Java turned off.

You can get Fancy Categories from http://www.x-cart.com/fancy_categories.html

It's worth the pennies...

larrydavidow

04-14-2005 08:14 AM

Still back to my original question...

Is there anyway to expand the fancy categories link when another link is clicked.

For example, go to http://www.redleader.biz/xcart/home.php

You'll see the "tabs" at the top of the page. Those are his categories. I want the drop downs on the left to expand the category when the tab up top is clicked.

Thanks

Larry

august

04-27-2005 03:35 PM

How can you get the same effect in help.tpl and special.tpl ?

marian

05-04-2005 04:42 AM

Funky and Fancy DO NOT work together

I found this out the hard way. I did the Funky mod first and then installed Fancy after I found out that to get the "drop down" effect for sub categories you HAVE to have Fancy. However, I have just installed Fancy and there is no effect at all. It looks just the same as before. I have tried Candy and Icon and there no difference at all.

I have installed Fancy on another store that is not modified by Funky and Fancy works.

Some guy here got the two to work together but did not put the procedure; did he install Fancy then Funky? Did he put some sort of mod to the Funky mod to make it work with Fancy?

Just curious. I can always UNDO the Funky mod and just do the Fancy, I guess. It's just that Redleader.biz just looked so nice. Oh Well! :?

larrydavidow

05-04-2005 05:13 AM

Re: Funky and Fancy DO NOT work together

Quote:

Originally Posted by marian

Yeah... Steveparks has done it, but he's being awful quiet.... :lol:

C'mon Steve, share the love!

august

05-04-2005 11:38 AM

Quote:

Some guy here got the two to work together but did not put the procedure; did he install Fancy then Funky? Did he put some sort of mod to the Funky mod to make it work with Fancy?

Here is the code, but only works on version 3.5.2

http://forum.x-cart.com/viewtopic.php?t=2210

If somebody could figure out how to make it work on 4.0.13 could you please post your results? Thanks

marian

05-04-2005 03:30 PM

Steve Parks and www.redleader.biz is gone :(

:cry:
I just went to the www.redleader.biz/xcart/home.php and www.redleader.biz and I get a 501 in IE6 and nothing in Firefox.
:cry:

The only reason I got Fancy Catagories is because I was told that the subcategory drop down can only be done with Fancy. It is so aggrevating when a really good idea gets so close to being completed and.....then nothing. It just fizzles out. Oh well. :( Funky looks much better but no drop down menu and that is what my clients are asking for.

Does anybody else know how to make Funky and Fancy work together?

marian

05-05-2005 06:35 AM

Oh Well! Redleader - gone :(

I don't think we will be hearing from Steve Parks, DNS lookup error.
http://www.redleader.biz/

dazybabes

05-06-2005 06:46 AM

That mod works great especially if your site is green??

mine isnt and I do have a slighly different version that Ive sorted and it works all ok........in IE but somewhat cocks up in FF

Is there anyway of altering this mod so that it uses different colours for different categories

class="CategoriesList{ $categories[cat_num].categoryid }"

anyone??

www.kitinfo.co.uk/kitwarehouse/home.php[/url]

larrydavidow

05-06-2005 06:50 AM

Quote:

Originally Posted by dazybabes

I believe Funky Categories has an entry in the skin1.css file. If not, check the funkycategories template file and look for font and background colors....

If it doesn't have anything in the skin1.css file, you can always just make one...

august

05-06-2005 07:23 AM

It does. I think she will need to create a class for every category, and assign a color to every class; I'm not programmer, just common sense.

dazybabes

05-09-2005 07:27 AM

I do have separate classes set up for each of my 6 catagories, I also have 6 skin.css files set up so that if youre in one catagory it uses different coloured images and borders and dialog.tpls and the when you click into another it uses the others that are set up??

that all works fine although I just cant seem to find out why it doesnt show properly in FF/Safari/Mozilla???

Looks ok in IE?

august

05-09-2005 08:33 AM

Try this:

Quote:

<SCRIPT type="text/javascript" language="JavaScript 1.2">

function browser_identificator() {
var x, browser, version, screen_x, screen_y;
var isPlugins = '';
version = "0";
isDOM = document.getElementById?true:false;
isJava = navigator.javaEnabled();
isStrict = document.compatMode=='CSS1Compat';
if(window.opera && isDOM) {
browser = "Opera";
version = "5";
if(window.print)
version = "6";
if((navigator.userAgent.indexOf("Opera 7") >= 0 || navigator.userAgent.indexOf("Opera/7") >= 0))
version= "7";

}
if(!(window.opera && isDOM) && document.all && document.all.item) {
browser = 'MSIE';
version = navigator.userAgent.replace(/^.*MSIE.(\d+).*$/, "$1");
}
if(navigator.appName=="Netscape" && !isDOM) {
browser = 'NN';
version = navigator.userAgent.replace(/^.*Mozilla.(\d+).*$/, "$1");
if(version != '')
version = "4";
}
if(navigator.appName=="Netscape" && isDOM) {
if(navigator.userAgent.indexOf("Safari") >= 0) {
browser = 'Safari';
version = navigator.userAgent.replace(/^.*Safari.(\d+).*$/, "$1");
} else {
browser = 'Mozilla';
version = navigator.userAgent.replace(/^.*Mozilla.(\d+).*$/, "$1");
}
}
for(x = 0; x < navigator.plugins.length; x++)
isPlugins += (isPlugins == ''?"":"|")+navigator.plugins[x].name.replace(/\s/g, "+").replace(/&/, " ");
isPlatform = navigator.platform;
isCookie = ((browser == 'NN' && version == '4')?(document.cookie != ''):navigator.cookieEnabled);
screen_x = screen.width;
screen_y = screen.height;
return (isDOM?"Y":"N")+(isStrict?"Y":"N")+(isJava?"Y":"N" )+"|"+browser+"|"+version+"|"+isPlatform+"|"+(isCo okie?"Y":"N")+"|"+screen_x+"|"+screen_y+"|"+isPlug ins;
}

</SCRIPT>

If not, try this:
http://www.apptools.com/phptools/browser/source.php

dazybabes

05-10-2005 07:49 AM

I'm sorry August but I'm only a novice at this, where abouts does that coding need to go? and what about that source.php??

thanks

august

05-10-2005 08:46 PM

I'm still learning too, I think the best place will be home.tpl in skin/customer/
You have to use {literal} and {/literal} at the start and at the end of the script for it to work in x-cart. Good luck!

dazybabes

05-11-2005 12:14 AM

Ok well doesn't seem to help so far?

What about that source.php that you gave me the link for?

where should that go?? Any ideas?

Thanks for your help anyway!

tamicampos

04-03-2008 11:25 AM

Re: funkycategories

I know Funky Categories is old but I would like to use it. I followed the directions perfectly and cut and past the code. It looks like this:

www.kookoomonkey.com

I had rounded boxes in my skin1/css file and it didn't work so I took it out but it only changes the other menus. Do I need to take out Fancy Categories?
Please help.

Yurij

04-04-2008 03:02 AM

Re: funkycategories

Quote:

Originally Posted by tamicampos

Change template "skin1/customer/funkycategories.tpl"

PHP 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"> 
{foreach item=one from=$categories key=ind}
  <tr> 
    <td width="1" class="funkycatsep"><img src="{$ImagesDir}/spacer.gif"></td> 
    <td class="funkycat" onMouseOver="onOver(this);" onMouseOut="onOut(this);" onClick="changeLoc('home.php?cat={$one.categoryid}');"><font color="#FFFF00">&raquo;</font>{$one.category}</td>
    <td width="1" class="funkycatsep"><img src="{$ImagesDir}/spacer.gif"></td> 
  </tr> 
  <tr> 
    <td colspan="3" class="funkycatsep"></td> 
  </tr> 
{/foreach} 
</table> 

{else} 

<table width="100%" border="0" cellpadding="0" cellspacing="0"> 
{foreach item=one from=$subcategories key=ind}
  <tr> 
    <td width="1" class="funkycatsep"><img src="{$ImagesDir}/spacer.gif"></td> 
    <td class="funkycat" onMouseOver="onOver(this);" onMouseOut="onOut(this);" onClick="changeLoc('home.php?cat={$one.categoryid}');"><font color="#FFFF00">&raquo;</font>{$one.category}</td>
    <td width="1" class="funkycatsep"><img src="{$ImagesDir}/spacer.gif"></td> 
  </tr> 
  <tr> 
    <td colspan="3" class="funkycatsep"></td> 
  </tr> 
{/foreach} 
</table>
{/if}

tamicampos

04-04-2008 05:28 AM

Re: funkycategories

Thank you very much.

seaCOAST

04-04-2008 09:51 AM

Re: funkycategories

Hey funky...is this supposed to work on 4.1.9? I installed it, but it didn't quite work right.

Thanks!

Yurij

04-07-2008 05:47 AM

Re: funkycategories

What problems arose? I tested for gold 4.1.9,
for "IE + FF" - works fine.

To install the mod, it is necessary to carry out all four steps set out in the first post of this topic. Just use the my template for step N1.

Scotty85

05-01-2008 04:15 PM

Re: funkycategories

Guess this isn't really needed at all with the new FancyCats.

All times are GMT -8. The time now is 03:36 PM.

Page 1 of 2

Show 40 posts from this thread on one page