I used a transparent gif for the background and its fixed now
Quote:
Originally Posted by vandiermen
Printable View
I used a transparent gif for the background and its fixed now
Quote:
Originally Posted by vandiermen
I am using CSS Flyout Menu 1.5 to customize Zen Cart 1.3.8. In addition to the CSS Flyout Menu I have the About Us Page mod.
I would like to customize the menu: add/delete/change/move menu headings and then add my own list items using the About Us mod in some cases. For example, I would like to delete HOME, replace it with CATEGORIES, and re-title CATEGORIES "NEW".
So far, it seems to me that this is not what the CSS Flyout Menu was designed for, and that making these kinds of changes may be difficult or impossible.
I am wondering if anyone has suggestions regarding how to create a customized menu with the CSS Flyout Menu or otherwise. Thanks much!
(By the way, I had thought that this mod was being supported by Jade True in "CSS Dropdown menu for your header- With Categories!", but Jade True has not posted to that thread recently.)
Please forgive the intrusion into this thread, but is this the right place to post questions regarding CSS Flyout Header for Zen Cart v1.5?
I had thought that this mod was supported by Jade True in "CSS Dropdown menu for your header- With Categories!", but Jade True has not posted to that thread recently.
I seem to be confused about which modules are which and which contributors are supporting them.
Thanks much!
Quote:
Originally Posted by Question
You are correct in assuming that this mod was not designed to do what you're wanting to do..........AND that the "CSS Dropdown menu for your header- With Categories!" is the mod that you need to do this.
Hope this helps.
Hi, I was wondering if the following is possible with the CSS flyout mod:
Can I put an extra line of text (or an image) inbetween 2 categories??
E.g.:
Category 1
Category 2
Category 3
CUSTOM TEXT / IMAGE
Category 4
Category 5
...
If it is possible, can someone tell me which part of the code needs editing please??
Many Thanks
Can some1 answer me this:
i recently installed the css flyout menu 1.5 and the categories ul generator is being used now by a css click-show-hide sidebox from here:
http://www.zen-cart.com/index.php?ma...roducts_id=872
and now the categories are generated only in the sidebox and not the menu.how can i have them generate in both?
I've been using zencart for several years using it to build the online store part of www.splatcooking.net . The store ( store.splatcooking.net ) is currently running on the core 1.3.8a files with a few mods added. Our production site has gathered the cruft associated with the mantra of "don't remove anything, it might break the site".
I'm doing an end of year tidy up, trying to add nicer menus based on this mod. I have uploaded the includes and the .htc file in, I think, the appropriate places. The new stylesheet is correctly included in the sorce of the main store page. However, I don't see any change to the menus. Do I need to add any additional code to the main stylesheet?
Regards
Peter Glock
Just to add, the template is cherry_zen and I'm using Safari on a Mac to access the site.
the fly out work great in FF, however, there are problem in IE.
the categories link, <a xxxx></a> has a left margin padding to it's <li> wrapper, while FF does not has that space...
I set ul, li {padding:0; margin:0} and the spacing still there...
I have a similar problem to the above, I have installed the files as instructed into the correct filepaths.
However, nothing seems to occur at all. What is strange though is viewing the css file included in my hosting account is fine. However 'editing' it brings up a screen with corruption in it.
Has anyone else come across this issue?
My apologies,
I had made an error in re-saving the stylesheet_categories_menu.css in post 361...
Time to change those colors :D
Excellent addon...
Hi all.........Just letting everyone know, that after a very long sick leave, that I'm now back in the "game". So, if any of you are still having problems with your Flyout Menu, re-post your question, and I'll try to help you solve the problem(s) as soon as possible.
Sorry for any inconvenience that this illness might have caused anyone.
OT- Welcome back Robert. Long time no see. :clap:
Thanks, Kim...............Good to be back.
wannspeed.com is my site
I have the css flyout menu installed.
How can I add the #catBoxDivider that seperates "specials, new products, featured products and all products" from the main products listed?
Also for some reason my subcategories don't fly out directly to the side, they drop down one row which makes it really tricky to cross with the mouse. What setting do I need to edit to fix that? wannaspeed.com (my server is having issues after a big upgrade so the site may load slow.)
Quote:
Originally Posted by dudemaaan
In your "includes/templates/CUSTOM/css/tpl_categories.css" , you should have a line (line 28 for me) that looks like this:
is it missing or commented out?Code:$content .= '<P></P>'; // insert a blank line/box in the menu
In your "includes/templates/CUSTOM/css/stylesheet.css" , find this section of code:Quote:
Originally Posted by dudemaaan
you currently have the "top:" set to 1........set it to 0.Code:div#nav-cat ul ul {
z-index: 1000; position: absolute; top: 1; left: 100%;
display: none;
}
Hope this helps.
Ok setting the top align to 0 worked perfectly! Thanks a hundred times.
My tpl_categories.css wasn't located in the directory you listed. I found mine in "includes/templates/CUSTOM/sideboxes/tpl_categories.css
I opened it up and it looks pretty close to what you have
Code:if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true'){
$content .= ''; // insert a blank line/box in the menu
if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') {
Does it need the "<p><p>" or do I need to move it to the other directory?
One last unrelated question. Can I add arrows only to the categories with sub categories? My version has no background images or references to images right now.
No, don't move it. That was my bad.......I forgot a folder. Sorry for the confusion.
Yes, you put the '<p></p>' for a blank line.
Hope this helps.
When I add the '<p></p>' I end up with a double white space and no line between the products and specials area.
I've tried <hr> with varying styles but It never comes out quite right. It's always a white section with a line in it. Or something else weird. All I really want is a grey line that divides it. I tried a <div> styled but then it changed my whole page some how so I took it off.
Quote:
Originally Posted by dudemaaan
Find this section of code in the "stylesheet_categories_menu.css" (at the very top):
and change the "background-color: #ffffff;" to transparent, making the whole section looking like this:Code:div#nav-cat {
margin-top: 0em;
background-color: #ffffff;
width: 100%;
margin-left: auto;
margin-right: auto;
font-weight: normal;
font-size: 1.3em;
}
Hope this helps.Code:div#nav-cat {
margin-top: 0em;
background-color: transparent;
width: 100%;
margin-left: auto;
margin-right: auto;
font-weight: normal;
font-size: 1.3em;
}
awesome! that did it. Thanks!
Quote:
Originally Posted by dudemaaan
Anytime. Glad to see you've got it worked out.
But, now that you've got it the way you want it, you might want to replace it, as FireFox isn't reading it............for some reason all I see when I went to edit your stylesheet_categories_menu.css, all I could see was: "’žb"..........that's it.....nothing else.
Did you recently install from a backup?
What editor do you use to edit you .css files?
I used dreamweaver and uploaded it via filezilla. I've heard dreamweaver isn't the best for editing the files but it seemed to always work for me. I've also had filezilla corrupt the files before when it wasn't set to bianary upload. So why is everything working and looking correctly on the site if the file is screwy?
Also where do you go in firefox to read the file? So that I can test or check for that in the future
I validated the CSS and it came back with this error
2 body Property behavior doesn't exist : url(includes/csshover.htc) url(includes/csshover.htc)
But I have the csshover.htc installed in the includes directory, so I dunno what else it wants.
EDIT: I think I figured out how to view the file in firefox. Using the developer kit "view source" and then click on the file. If that's the case, stylesheet_categories_menu.css seems to be okay now, aside from the CSS error that it showed me.
Quote:
Originally Posted by dudemaaan
If you have the developer kit, go to the "CSS" tab, then "Edit CSS". Then look at your stylesheet_categories_menu.css..........you'll see what I mean.
Seems like I've heard about Dreamweaver corrupting files, also.
You might try coping the file into notepad, and uploading to your server.
Hmm yeah I do see that. That's odd, because if you "view source" and click on the stylesheet it shows fine. And it works fine, it's just not showing up correctly in the css editor. When I download the file it views fine.
I tried saving it in notepad and replaced the file, but it's still doing the same thing.
EDIT: could it be due to the css error I'm getting in the stylesheet when I validate the css? I've tried numerous times but nothing is fixing that ’žb thing.
I re-downloaded the CSS flyout addon, made no changes to the stylesheet_categories_menu.css and the ’žb was still there after putting the completely default file on the site. *shrug*
Has anyone had any success in getting the CSS Flyout Menu mod to work property with the Hide Categories mod? I use the Hide Categories mode to prevent certain categories from showing up in the category menu but the CSS Flyout Menu mod shows all categories (even the ones designated as hidden by the Hide Categories mod).
I'm sure it's just a matter of making CSS Flyout Menu "aware" of the Hide Categories attributes but I'm not sure where to do that.
Any tips are greatly appreciated!!
Hello, I'm new to Zen Cart but I have had plenty of experience using CRE Loaded (their support is ########). So I'm ready to switch our store over but I have a couple of small problems.
First off, how do you remove the cateoreis from the Header? I'm using the Mistik tempalte and they go way off the side of the header/screen.
Second, the CSS Flyout menu doesn't work. It display all the categories and sub menus already open and there is no mouse over or pop-out at all.
I will locate the support thread for the tempalte as this si no the correct thread, but cince I ahd ot add one, I thought I would ask about both.
you can see what I mean at www.broadwyn-wear.com/zen
Thanks
Remove Categories from header: Admin>Configuration Settings>E-Z Pages Settings>EZ-Pages Display Status - HeaderBar .............Set to 0.You can also choose which links you want up there.....Admin>Tools>E-Z Pages......anything you don't want displayed in the header, just check the green box beside it under the header column.Quote:
Originally Posted by bwear
The menu that's on this page isn't the cssFlyout menu. You need to go to Admin>Tools>Layout Boxes Controller and set the "categories_css" to the "ON" position, and in the same time turn "OFF" any other "Categories" box you find.
That template...........Hmmmmmm....seems to me like it needs a lot of work. Support for it?.....................good luck.
Look at the bright side.........at least you DID find support for the Flyout Menu......but you need to turn it on before it works. :)
Thanks with the reply. unfortunatly, that didn't remove the menu from the top. I also had already made the changes to the sideboxes that you mentioned. The categories show up but the menus are permenatly expanded. Check my link above to see what I mean.Quote:
Originally Posted by Get Em Fast
Another dumb question, If I have a template that I ported to CRE Loaded from osCommerce, should that easily port to zencart as well?
Yes, I see it.........but I know my menu, and that kind of behavior (with the links expanded) is ABSOLUTELY IMPOSSIBLE with the CSS FlyOut Menu (it couldn't do that on it's worst day). Maybe you installed a different one by mistake? Let's make ABSOLUTELY CERTAIN that you've got the correct one HERE.Quote:
Originally Posted by bwear
That shouldn't be a problem. Believe me.........is OSC can do it, ZC can do it better.Quote:
Originally Posted by bwear
Or maybe, bwear, the "stylesheet_categories_menu.css" got corrupted during FTP, as it's not loading in FF or IE. And if it's not loading, well.............then it would not look OR act right. Check it, make sure all the information's there, maybe re-upload it to your server? Also might double-check the rest of the files for the menu, as well, making sure they're in the correct places with all the correct info?
Did you change anything, yet (on the menu), or is it "out of the box", still?
Done some more checking for ya. It IS the correct menu, so without loading the css correctly, I guess it CAN act that way.....sorry. I didn't take into account that it might could do that if the css didn't load.........so check it, as stated above.
Also, on second look at your site, that's the Categories-Tabs Menu at the top of your site. You can turn that off in Admin>Layout Settings>Categories-Tabs Menu ON/OFF. set to 0.
If you still can't get the Flyout Menu to work, give us another post, and we'll work until it does.
Thank you! Someone who actually supports their work, and understand "Open Source". Alright, now i'm a little forclempt and need a moment, Talk amongst yourselves. Let me give you a topic... CRE Loaded and the rat ##############s that take your money and offer no supporrt.....Quote:
Originally Posted by Get Em Fast
Alright now that that has passed, back to the CSS Flyout. I did downlaod it from the link you posted above and copied the files over as stated, but I had noticed in the forums earlier, that the .CSS or the .htc might not be in the correct place. It is still "out of the box" except I renamed the "YOUR_CUTOMS_TEMPLATE_NAME" folder to mistik to match my template.
Hi,
I have been trying to generate 3 different images..
- an image for when there is no event.
- an image for a roll over event.
- an image for when there is no event but there is a link tree (i.e same as the first but with an arrow on.)
so far i have only managed to get two images working...no event and roll over event. Can someone explain to me how to adjust my css code below to add an image when there is a a link tree.
Thanks in advance!
<code>
body {
behavior: url(./csshover.htc);
/* WinIE behavior call */}
div#nav-cat {
width: 185px;
margin: 0px 0 0 0px;
background-color: #EBEBEB;
font-weight:bold;
color:#C6C6C6;
text-align: right;
line-height: 28px;
background-image:url(../images/#);
padding-bottom:20px;
background-repeat: no-repeat;
background-position:bottom;
}
div#nav-cat ul {margin: 0; padding: 0; padding-top: 0; width: auto; background-color: transparent;
border-top:#;
}
div#nav-cat ul.level2 {background-color: ################;
width:auto;
}
div#nav-cat ul.level3 {background-color: ################;
width:auto;
}
div#nav-cat ul.level4 {background-color: ################;
width:auto;
}
div#nav-cat ul.level5 {background-color: ################;
width:auto;
}
div#nav-cat ul.level6 {background-color: ################;
width:auto;
}
div#nav-cat li {background-image: url(../images/navbut.gif);
position: relative;
padding-right:0px;
list-style: none;
margin: 0px;
margin-top: 0px;
z-index: 20;
height: 28px;
width: 185px;
/* change it to whatever space you want to put space between buttons*/}
/* <---this line may help or hinder IE menu shifting issues */
div#nav-cat li li {
margin: 0px;
/* this overrides the margin-top in the declaration above */
}
div#nav-cat li:hover {
background-image: url(../images/b1_over.gif);
}
div#nav-cat li a:hover {color:#FFFFFF;
}
div#nav-cat li.submenu {
background-color: transparent;
}
div#nav-cat li.submenu:hover {background-color: transparent;
background-image: url(../images/b1_over.gif);
}
div#nav-cat ul {background-color: transparent;
}
div#nav-cat li a {display: block; padding: 0.25em 0 0.25em 2em;
width: 150px;}
/*border-left: 0.5em solid #BBB;}
div#nav li a:hover {border-left-color: red;}*/
}
div#nav li a:hover {border: none;
}
div#nav-cat>ul a {width: 150px;
}
div#nav-cat ul ul {position: absolute; top: 0; left: 185px;
display: none;
}
div#nav-cat ul.level1 li.submenu:hover ul.level2,
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {display:block;
}
</code>
SpoOf, when did you download your copy? Is that the old one, or did you delete all the hints, as the new one is "color coded" to make it easier for you to find your way around each level.
Because of post #425 from dudemaan? That css error can be ignored. That property is only for IE to "flyout" the menu, and doesn't exist for other browsers, as they won't use it. You'll also find this question answered in the Horizontal Dropdown Menu thread, as it also uses the csshover.htc . You can also Google that error and find extensive reading on the topic.Quote:
Originally Posted by bwear
O.k. and you've went through all your files afterward, and made sure that ALL 5 files are indeed in the correct places?Quote:
Originally Posted by bwear
Yes sir, as far as I can tell they are. I didn't move any around.Quote:
Originally Posted by Get Em Fast
Ive played around with it to work with my template and looks like ive deleted the hints! Have i made it to complicated to implement the tasks i wish to achieve?Quote:
Originally Posted by Get Em Fast
Thanks for your speedy reply.
Kind regards
Hi i have managed to solve it by playing around slightly more.Quote:
Originally Posted by Spo0f
Thank you for your help :)
Kind regards.
Sorry Spoof......looks like you posted about the time I went to bed. Glad to hear you got it, though.
A couple of sites has recently had problems with their stylesheet_categories_menu.css either not loading correctly or not loading at all. So I tracked down and hopefully squished a bug.
The amended menu (CSS Flyout Menu 1.3.8a) has been submitted and should be available for download later.
In the mean time, if you need a copy you can pm me.
CSS Flyout Menu 1.3.8a is now available for download.
Is it possible to use this same flyout menu for the information sidebox as well? If so, how would I go about doing that???
Well, I don't know.....................what have you got in mind?Quote:
Originally Posted by darrin0
On the website I'm building - mybeatrice.com - I'm only using two sideboxes, the categories sidebox and the information sidebox. I would just like to get the information sidebox to match the category sidebox. So in other words I would like the links that are normally located under the Information sidebox (privacy policy, contact us, etc.) to flyout similar to the menu I've created for the categories.Quote:
Originally Posted by Get Em Fast
O.k. I see where you're going..........and it is possible to create what you're wanting, even using the same CSS, throw away the categories list.....use some pieces here some pieces there, and you'll have it.............just gonna take quit a bit of modifying to get it, but yea.........it's possible.
Could this mod be modified to do something like on this site:
http://www.lapolicegear.com
If you hover over the image that says "Click here to Shop by Category", a flyout menu appears with a listing of all categories.
Thanks!
That is a nice feature, isn't it? I guess anything's possible, but it would take a lot of work to make this menu do that.Quote:
Originally Posted by Danielle
hi i am using the css flyout menu for my zencart (1.3.8) and i love it but i am having an issue with it being behind the flash slideshow i have on the main page of my site http://www.dannaoshee.com it works great for firefox but don't you know it that its IE that is giving me the headache. Is there some sort of work around or something i can just add or change to make this stop?
Hmmm.....I'm not seeing this in IE 7 or 8, but it's usually due to the z-index being lower than something else on your site.....but, as the z-index for your flash is set to -5, while the menu's z-index is set to 1000, there should be no problems. Try raising the z-index to 2000 and see if that solves the problem.
You would do this in "includes/templates/YOUR_TEMPLATE/stylesheet_categories_menu.css
Have you cleared your browsers cache?
What version of IE are you seeing this in?
There are known problems with IE6 Internet Explorer 6 ?
The new version works well in firefox, chrome, ie8 but the flyout effect not working in ie6.
My website is at http://www.easytechnology.gr/index.p...ex&language=en
Thank you very much :)
Well, as W3schools reports (March isn't in yet), IE6 users are a dying breed. Stats showed that IE6 users dropped from 10.2% in January down to 9.6% in February. And that's an 8.9% drop from January of 2009........so if they continue to drop at that rate, then nobody will be using IE6 by the end of this year........and if they're is..........then shame on them.......it's about time for them to upgrade. We shouldn't have to downgrade our programs, programs features, and have all the extra work of trying to make pages display properly in pretty much "ancient" programs when those people that are STILL using IE6 needs to quit living in the past and find the "Update" button!
O.K. I Got that out of my system (just a little "pet-peeve" of mine)...........and AM looking into it. Seems to work in IE6 locally, but not remotely.....hmmmmmm.
Is it possible to put sub categories on the flyout menu as top level? I have 2 main sub categories that basically split my products/services in 2.
At the moment the flyout is set up as:
Categories>
SubCat1>products a,b,c
SubCat2>Products x,y,z
Is is possible to have only:
SubCat1>products a,b,c
SubCat2>Products x,y,z
Thanks,
darren
Darren, the menu itself can't do that, but if you read the forums, It may be possible to do that. Ajeh would be the one to ask about that particular function.
For those of you wondering about the IE6 issue.................still nothing here. If anyone has a "fix" to this issue, then by all means, please post it. Thank you.
Ok thanksQuote:
Originally Posted by Get Em Fast
What issue?Quote:
Originally Posted by Get Em Fast
Ok, i see the issue in ie6.Quote:
Originally Posted by tonibarcelona
Trying to validate tthe css, it seems that ie6 doesn“t find the.htc file:
La propiedad behavior no existe : url(/includes/templates/classic/css/includes/csshover.htc) url(/includes/templates/classic/css/includes/csshover.htc)
A typical error that can be the origin of the problem is if the htc extension isn“t declared at server like text/x-component
Try it, maybe is your solution, because the css menu works well in ie6
HI all,
How would I go about removing the contact us link from CSS Flyout Menu ?
Quote:
Originally Posted by Muzz
Muzz, you got the wrong menu. The CSS Flyout Menu doesn't have a "Contact Us" link in it. If yours does, then it's been modified, and you should be able to find the code for that link in:
includes/templates/YOUR_CUSTOM_TEMPLATE/sideboxes/ tpl_categories_css.php
Can this or any other CSS fly out menu work on the ez-pages sidebox? Thanks in advance:D
Quote:
Originally Posted by gl3ny
I managed to get it to do what I wanted as above. If anyone is interested. I will gladly help.Quote:
Originally Posted by Get Em Fast
Thanks Get Em Fast.
It is in my header.. I have added a few add on's and such lost track.
Will take your advice and look for modifying that file.
Thanks
Quote:
Originally Posted by Muzz
In your header, huh? So was it the CSS Horizontal Dropdown Menu that you were thinking about? If so, it's just a little off topic here, but to modify links in that particular Menu, look at:
includes/templates/YOUR_CUSTOM_TEMPLATE/common/tpl_drop_menu.php
At about line 82. You will find the "Contact Us" link there.
Hope this helps.
Quote:
Originally Posted by gl3ny
Glad to hear you managed to do this. This could be very useful to the community. You could write a small tutorial on how you accomplished this and turn it in to one of the moderators. They may include it either in the Turorials section or on the Wiki page. And, of course, you could always leave a copy of your turorial right here in this thread, also.......
I'm trying to figure out a way to do subtitles. For instance, I want to insert a different styled list item with just plain text in between certain catalog items. Can anyone direct me to some info?
thanks in advance
hi ppl , i use iframes in my site , for catalog's and other flash content , how can i GEt the css flyout menu to stay on top of the i frame ,
you can see what i mean on our site
http://www.ultracheapauto.com.au
please help , its driving me mad
or any alternative to iframes to display this content easily?..
Quote:
Originally Posted by xeontranq
Getting a blank page at that addy.
Quote:
Originally Posted by johnson4x4
Don't know of a way to add sub-titles, as the menu list is generated according to your products.
But you CAN add all the links you want BETWEEN the menu list and the "Specials, New Products, All products" by opening up:
includes/templates/YOUR_CUSTOM_TEMPLATE/sideboxes/tpl_categories_css.php
At about line 26 you will see a line that reads:
You can edit that to something like this:Code:$content .= '<P></P>';
Hope this helps.Code:$content .= '<br><a href="http://your-link.com">link 1</a></br>';
$content .= '<br><a href="http://your-link.com">link 2</a></br>';
$content .= '<br><a href="http://your-link.com">link 3</a></br>';
internal server 500 error , host uping max open files , it will be back in about a hourQuote:
Originally Posted by Get Em Fast
OK the site is back , anyone know how i can fix this annoying problem please? ...
i have some more info .. it only seems to be happening on IE , firefox etc all fine , ....
http://www.ultracheapauto.com.au/ind...age=catalogue3 try it for your self ... anyone know how i can fix this ... ?...
cheers
Andrew
www.ultracheapauto.com.au
hallo everyone,
Im new with using zen cart... I have a problem... I installed the flyout menu...everything is working fine... in my english version... but if Im changing the language into German or japanese the sidebox is not viewable anymore. Hopefully somebody can help me. Do I have to install something into the languages ??
thank for you help... to view the site please click here
http://movez.de/catalog/index.php?ma...ex&language=en
thanks for your help... Im using the latest version of zen cart and the flyout menu is css_flyout_menu_1-3-8a
Quote:
Originally Posted by albi
albi, It's not a problem with your menu. I looked at your site, edited your menu in FF, expanding the listing boxes and coloring the text white.........but, there was none. It appears that you language packs aren't sending the text for the links to your menu.
Try turning the Flyout Menu off, turn your Default menu on. See if it does the same thing.
hey... thank you so much... I was looking for hours in the code... now after your reply I realized that I did not put in the german category names... well... now I got it... wonderful... thanks a lot that you took the time. safed my evening by:clap: albi
Not a problem, albi. That's what we're here for.
Hi - I wonder if it would be easy to modify the code in this (brilliant!) module to handle a custom, vertical menu? I.e. a menu listing multiple levels of external/internal links, instead of categories and products?Quote:
Originally Posted by Get Em Fast
(I do need both, a Flyout menu listing Categories - working fine - as well as the custom menu) I started by renaming and modifying the following files to use them to display my custom menu, however, I have been playing with this for hours now and cannot get the categories_ul_generaotr.php file to find and loop around menulists other than the categories!
./includes/templates/MYTEMPLATE/sideboxes/tpl_categories_css.php
./includes/modules/sideboxes/MYTEMPLATE/categories_css.php
./includes/classes/categories_ul_generator.php
Might you have any tips to for someone who's php is not yet very proficient yet! :lookaroun
Many thanks!
annika
It would be a lot easier for you to just get the blank sidebox from the downloads section, and add your own menu code in it.
Hi
I'm upgrading to the lastest version of Zencart - has anyone got the CSS Flyout Menus working on 1.3.9 successfully?
Thanks in advance
RoPey
I have css_flyout_menu-v1.3.8a working just fine on a 1.3.9d test site on my local system and in a 1.3.9d test folder on my hosts server. As usual be sure to back up first and do your own testing for compatibility with your site and mods.Quote:
Originally Posted by RoPey
Marc
Excellent! As you advise, I will of course backup, backup and backup again :smile:
I've got a problem on my website with the css category menu's being hidden behind a slideshow that I have running on the main page. See an example at http://www.shoptomlinsons.com/
Once you get 2-3 categories deep it is hidden behind the center image (which is actually a js slideshow). Is there any way I can make the categories always show up in front of anything else on the main page?
Yes, there is. In the stylesheet_categories_menu.css, find this section of code:Quote:
Originally Posted by ajcannon
Add:Code:div#nav-cat ul.level1 li.submenu:hover ul.level2,
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {display:block;}
to make that whole section look like this:Code:z-index: 1000;
That should fix you right up.Code:div#nav-cat ul.level1 li.submenu:hover ul.level2,
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {
display:block;
z-index: 1000;
}
You're awesome! Thanks so much...worked like a charm. Have a great day!
Not a problem. Happy Zenning!
Lots of people say it ... "I love this place!" I'm not a programmer, have little networking skills and know even less about website etc .. but these forums make working with Zen Cart SOOO easy!
Usually dont post until I have a problem, most the time either I figure it out or the forums has some useful bits to help.
I have this running on my 1.3.9d site (www.battlebunker.com) but
I'm having an issue with the menu extending below and off screen making it fiddly to reach the bottom of the menu ... any suggestions?
I think I read something about a scrollbar that is added for long menus (may not have been for this mod) ... will have to go looking for that in the previous posts on this thread - I must admit I have not read all the pages ....
And I hate feeling obligated to say "I have a template monster theme", from what I have read on these forums I gather they dont go well together.
Cheers
That's what we're here for. Glad you found a "Home" with Zen-Cart. Happy Zenning.Quote:
Originally Posted by Guptyboy
Shame on you........if everybody done that, there wouldn't be any answers to all the problems in this forum. Every once in a while, just look through the new posts.....you'd be surprised at how many questions you can actually answer by the knowledge you've gained here. That's what this community is built on........the sharing of "learned knowledge"Quote:
Originally Posted by Guptyboy
Read, read, read......that's the key!Quote:
Originally Posted by Guptyboy
O.k., now to solve your problem. In your stylesheet_categories_menu.css, find this block of code (almost at the bottom):
And add this to it:Code:div#nav-cat ul.level1 li.submenu:hover ul.level2,
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {
display:block;
}
Making that whole section look like this:Code:height: 200px;
overflow: scroll;
Adjust height (length of box before it starts to scroll) as needed.Code:div#nav-cat ul.level1 li.submenu:hover ul.level2,
div#nav-cat ul.level2 li.submenu:hover ul.level3,
div#nav-cat ul.level3 li.submenu:hover ul.level4,
div#nav-cat ul.level4 li.submenu:hover ul.level5,
div#nav-cat ul.level5 li.submenu:hover ul.level6 {
display:block;
height: 200px;
overflow: scroll;
}
:no:..............no words..............................Quote:
Originally Posted by Guptyboy
Hope this helps.
Thanks for the fast response ... I've had so many late nights playing with Zen Cart - in fact, tonight has been a sleepless night - its almost time to go get my morning donut and coffee! NOICE!
Okay ... I applied those edits and it has given the scroll box .. some weird layout issues with the scroll box though. Can you see the excess white space when hovering over a category that cant fill the 200px It seems to limit the levels of expansion aswell
Any other suggestions?
PS - aye my friend, that it is ... sometimes you need to give your eyes a rest though and use your mouth to ask ... thats my excuse and I'm sticking to it! :P
I ordered a copy of the book just before the weekend, hopefully be here next week! Then I can become Totally Zenned! mwuwhaha.
That's due to the height of the box being set at 200px. But, I just noticed that when the menu is set to scroll, the next level doesn't show. I would take that back off leaving it as it was.
Right now, I'm pretty busy and don't have much time to do any testing on it. I WILL look into a better solution, as I am planning on re-doing the whole menu making it more "user friendly". But, I can't say how long it will be before I get the new version done because, like I say.....I'm pretty busy with clients at the moment.
So for now, my best suggestion would be to move your menu to the top of your page (where your calendar is), leaving more room for the menu items to appear without scrolling. Actually, with a sidebox menu system, that's where it should be in the first place so customers don't have such a hard time finding it. As of now, without scrolling down, a customer cannot even see your menu, which is one of the first things you should "stick in their face".
Robert
I am having a hard time figuring out the z-index or issue with my menu in IE7 for http://www.bellasurjewelry.com/
Seems to be working fine for IE8 and FF as well as Chrome, but IE7 is doing something weird. You can only click on the top subcategory. If you try to move to the subcategory below it, it jumps to the next categories subs. (try it...I know it might sound confusing lol).
Any help would be greatly appreciated! Site is almost done except for this and a few other loose ends.
bell, I'm not seeing any strange issues in IE7. Everything works as it should for me.
Is anyone else seeing this in bell's site?
Dunno... I just applied it to a new 1.3.9d test site. I must be missing something. Am I supposed to see something in the Admin panel for configuring this?Quote:
Originally Posted by RoPey
Hello,
I am using tpl_categories_css.php which use's categories_ul_generator.php
which CSS Flyout Menu also use's.
My question is: how do I get categories_ul_generator.php from showing the "Document Categories"
Normal old category_tree.php / tpl_categories.php do not show the "Document Categories"... and I put all the 'Document Categories' in to the 'Document Categories side box'...
I am not really expecting an answer, I am just stuck and looking for an alternative. maybe I will try to hide the doc categories somehow.
categories_ul_generator.php
category_tree.phpPHP Code:<?php
//placeholder21// +----------------------------------------------------------------------+
// |zen-cart Open Source E-commerce |
// +----------------------------------------------------------------------+
// | Copyright(c) 2003 The zen-cart developers |
// | |
// | http://www.zen-cart.com/index.php |
// | |
// | Portions Copyright(c) 2003 osCommerce |
// +----------------------------------------------------------------------+
// | This source file is subject to version 2.0 of the GPL license, |
// | that is bundled with this package in the file LICENSE, and is |
// | available through the world-wide-web at the following url: |
// | http://www.zen-cart.com/license/2_0.txt. |
// | If you did not receive a copy of the zen-cart license and are unable |
// | to obtain it through the world-wide-web, please send a note to |
// | [email protected] so we can mail you a copy immediately. |
// +----------------------------------------------------------------------+
// $Id: categories_ul_generator.php 2004-07-11 DrByteZen $
// based on site_map.php v1.0.1 by networkdad 2004-06-04
//
class zen_categories_ul_generator {
var $root_category_id = 0,
$max_level = 0,
$data = array(),
$parent_group_start_string = '<ul%s>',
$parent_group_end_string = '</ul>',
$child_start_string = '<li%s>',
$child_end_string = '</li>',
$spacer_string = '
',
$spacer_multiplier = 1;
var $document_types_list = ' (3) ';
// acceptable format example: ' (3, 4, 9, 22, 18) '
function zen_categories_ul_generator($load_from_database = true)
{
global $languages_id, $db;
$this->data = array();
$categories_query = "select c.categories_id, cd.categories_name, c.parent_id
from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd
where c.categories_id = cd.categories_id
and c.categories_status=1 " .
" and cd.language_id = '" . (int)$_SESSION['languages_id'] . "' " .
" order by c.parent_id, c.sort_order, cd.categories_name";
$categories = $db->Execute($categories_query);
while (!$categories->EOF) {
$this->data[$categories->fields['parent_id']][$categories->fields['categories_id']] = array('name' => $categories->fields['categories_name'], 'count' => 0);
$categories->MoveNext();
}
}
function buildBranch($parent_id, $level, $submenu=true, $parent_link='')
{
$result = sprintf($this->parent_group_start_string, ($submenu==true) ? ' class="level'. ($level+1) . '"' : '' );
if (($this->data[$parent_id])) {
foreach($this->data[$parent_id] as $category_id => $category) {
$category_link = $parent_link . $category_id;
if (($this->data[$category_id])) {
$result .= sprintf($this->child_start_string, ($submenu==true) ? ' class="submenu"' : '');
} else {
$result .= sprintf($this->child_start_string, '');
}
$result .= str_repeat($this->spacer_string, $this->spacer_multiplier * 1) . '<a href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . $category_link) . '">';
$result .= $category['name'];
$result .= '</a>';
if (($this->data[$category_id]) && (($this->max_level == '0') || ($this->max_level > $level+1))) {
$result .= $this->buildBranch($category_id, $level+1, $submenu, $category_link . '_');
}
$result .= $this->child_end_string;
}
}
$result .= $this->parent_group_end_string;
return $result;
}
function buildTree($submenu=false)
{
return $this->buildBranch($this->root_category_id, '', $submenu);
}
}
?>
PHP Code:<?php
/**
* category_tree Class.
*
* @package classes
* @copyright Copyright 2003-2006 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: category_tree.php 3041 2006-02-15 21:56:45Z wilt $
*/
if (!defined('IS_ADMIN_FLAG')) {
die('Illegal Access');
}
/**
* category_tree Class.
* This class is used to generate the category tree used for the categories sidebox
*
* @package classes
*/
class category_tree extends base {
function zen_category_tree($product_type = "all") {
global $db, $cPath, $cPath_array;
if ($product_type != 'all') {
$sql = "select type_master_type from " . TABLE_PRODUCT_TYPES . "
where type_master_type = " . $product_type . "";
$master_type_result = $db->Execute($sql);
$master_type = $master_type_result->fields['type_master_type'];
}
$this->tree = array();
if ($product_type == 'all') {
$categories_query = "select c.categories_id, cd.categories_name, c.parent_id, c.categories_image
from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd
where c.parent_id = 0
and c.categories_id = cd.categories_id
and cd.language_id='" . (int)$_SESSION['languages_id'] . "'
and c.categories_status= 1
order by sort_order, cd.categories_name";
} else {
$categories_query = "select ptc.category_id as categories_id, cd.categories_name, c.parent_id, c.categories_image
from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd, " . TABLE_PRODUCT_TYPES_TO_CATEGORY . " ptc
where c.parent_id = 0
and ptc.category_id = cd.categories_id
and ptc.product_type_id = " . $master_type . "
and c.categories_id = ptc.category_id
and cd.language_id=" . (int)$_SESSION['languages_id'] ."
and c.categories_status= 1
order by sort_order, cd.categories_name";
}
$categories = $db->Execute($categories_query, '', true, 150);
while (!$categories->EOF) {
$this->tree[$categories->fields['categories_id']] = array('name' => $categories->fields['categories_name'],
'parent' => $categories->fields['parent_id'],
'level' => 0,
'path' => $categories->fields['categories_id'],
'image' => $categories->fields['categories_image'],
'next_id' => false);
if (isset($parent_id)) {
$this->tree[$parent_id]['next_id'] = $categories->fields['categories_id'];
}
$parent_id = $categories->fields['categories_id'];
if (!isset($first_element)) {
$first_element = $categories->fields['categories_id'];
}
$categories->MoveNext();
}
if (zen_not_null($cPath)) {
$new_path = '';
reset($cPath_array);
while (list($key, $value) = each($cPath_array)) {
unset($parent_id);
unset($first_id);
if ($product_type == 'all') {
$categories_query = "select c.categories_id, cd.categories_name, c.parent_id, c.categories_image
from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd
where c.parent_id = " . (int)$value . "
and c.categories_id = cd.categories_id
and cd.language_id=" . (int)$_SESSION['languages_id'] . "
and c.categories_status= 1
order by sort_order, cd.categories_name";
} else {
/*
$categories_query = "select ptc.category_id as categories, cd.categories_name, c.parent_id, c.categories_image
from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd, " . TABLE_PRODUCT_TYPES_TO_CATEGORY . " ptc
where c.parent_id = '" . (int)$value . "'
and ptc.category_id = cd.categories_id
and ptc.product_type_id = '" . $master_type . "'
and cd.language_id='" . (int)$_SESSION['languages_id'] . "'
and c.categories_status= '1'
order by sort_order, cd.categories_name";
*/
$categories_query = "select ptc.category_id as categories_id, cd.categories_name, c.parent_id, c.categories_image
from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd, " . TABLE_PRODUCT_TYPES_TO_CATEGORY . " ptc
where c.parent_id = " . (int)$value . "
and ptc.category_id = cd.categories_id
and ptc.product_type_id = " . $master_type . "
and c.categories_id = ptc.category_id
and cd.language_id=" . (int)$_SESSION['languages_id'] ."
and c.categories_status= 1
order by sort_order, cd.categories_name";
}
$rows = $db->Execute($categories_query);
if ($rows->RecordCount()>0) {
$new_path .= $value;
while (!$rows->EOF) {
$this->tree[$rows->fields['categories_id']] = array('name' => $rows->fields['categories_name'],
'parent' => $rows->fields['parent_id'],
'level' => $key+1,
'path' => $new_path . '_' . $rows->fields['categories_id'],
'image' => $categories->fields['categories_image'],
'next_id' => false);
if (isset($parent_id)) {
$this->tree[$parent_id]['next_id'] = $rows->fields['categories_id'];
}
$parent_id = $rows->fields['categories_id'];
if (!isset($first_id)) {
$first_id = $rows->fields['categories_id'];
}
$last_id = $rows->fields['categories_id'];
$rows->MoveNext();
}
$this->tree[$last_id]['next_id'] = $this->tree[$value]['next_id'];
$this->tree[$value]['next_id'] = $first_id;
$new_path .= '_';
} else {
break;
}
}
}
$row = 0;
return $this->zen_show_category($first_element, $row);
}
function zen_show_category($counter,$ii) {
global $cPath_array;
$this->categories_string = "";
for ($i=0; $i<$this->tree[$counter]['level']; $i++) {
if ($this->tree[$counter]['parent'] != 0) {
$this->categories_string .= CATEGORIES_SUBCATEGORIES_INDENT;
}
}
if ($this->tree[$counter]['parent'] == 0) {
$cPath_new = 'cPath=' . $counter;
$this->box_categories_array[$ii]['top'] = 'true';
} else {
$this->box_categories_array[$ii]['top'] = 'false';
$cPath_new = 'cPath=' . $this->tree[$counter]['path'];
$this->categories_string .= CATEGORIES_SEPARATOR_SUBS;
}
$this->box_categories_array[$ii]['path'] = $cPath_new;
if (isset($cPath_array) && in_array($counter, $cPath_array)) {
$this->box_categories_array[$ii]['current'] = true;
} else {
$this->box_categories_array[$ii]['current'] = false;
}
// display category name
$this->box_categories_array[$ii]['name'] = $this->categories_string . $this->tree[$counter]['name'];
// make category image available in case needed
$this->box_categories_array[$ii]['image'] = $this->tree[$counter]['image'];
if (zen_has_category_subcategories($counter)) {
$this->box_categories_array[$ii]['has_sub_cat'] = true;
} else {
$this->box_categories_array[$ii]['has_sub_cat'] = false;
}
if (SHOW_COUNTS == 'true') {
$products_in_category = zen_count_products_in_category($counter);
if ($products_in_category > 0) {
$this->box_categories_array[$ii]['count'] = $products_in_category;
} else {
$this->box_categories_array[$ii]['count'] = 0;
}
}
if ($this->tree[$counter]['next_id'] != false) {
$ii++;
$this->zen_show_category($this->tree[$counter]['next_id'], $ii);
}
return $this->box_categories_array;
}
}
?>
tpl_categories.php
PHP Code:<?php
/**
* Side Box Template
*
* @package templateSystem
* @copyright Copyright 2003-2006 Zen Cart Development Team
* @copyright Portions Copyright 2003 osCommerce
* @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
* @version $Id: tpl_categories.php 4162 2006-08-17 03:55:02Z ajeh $
*/
$content = "";
$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n";
for ($i=0;$i<sizeof($box_categories_array);$i++) {
switch(true) {
// to make a specific category stand out define a new class in the stylesheet example: A.category-holiday
// uncomment the select below and set the cPath=3 to the cPath= your_categories_id
// many variations of this can be done
// case ($box_categories_array[$i]['path'] == 'cPath=3'):
// $new_style = 'category-holiday';
// break;
case ($box_categories_array[$i]['top'] == 'true'):
$new_style = 'category-top';
break;
case ($box_categories_array[$i]['has_sub_cat']):
$new_style = 'category-subs';
break;
default:
$new_style = 'category-products';
}
if (zen_get_product_types_to_category($box_categories_array[$i]['path']) == 3 or ($box_categories_array[$i]['top'] != 'true' and SHOW_CATEGORIES_SUBCATEGORIES_ALWAYS != 1)) {
// skip if this is for the document box (==3)
} else {
$content .= '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">';
if ($box_categories_array[$i]['current']) {
if ($box_categories_array[$i]['has_sub_cat']) {
$content .= '<span class="category-subs-parent">' . $box_categories_array[$i]['name'] . '</span>';
} else {
$content .= '<span class="category-subs-selected">' . $box_categories_array[$i]['name'] . '</span>';
}
} else {
$content .= $box_categories_array[$i]['name'];
}
if ($box_categories_array[$i]['has_sub_cat']) {
$content .= CATEGORIES_SEPARATOR;
}
$content .= '</a>';
if (SHOW_COUNTS == 'true') {
if ((CATEGORIES_COUNT_ZERO == '1' and $box_categories_array[$i]['count'] == 0) or $box_categories_array[$i]['count'] >= 1) {
$content .= CATEGORIES_COUNT_PREFIX . $box_categories_array[$i]['count'] . CATEGORIES_COUNT_SUFFIX;
}
}
$content .= '<br />' . "\n";
}
}
if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true' or SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
// display a separator between categories and links
if (SHOW_CATEGORIES_SEPARATOR_LINK == '1') {
$content .= '<hr id="catBoxDivider" />' . "\n";
}
if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') {
$show_this = $db->Execute("select s.products_id from " . TABLE_SPECIALS . " s where s.status= 1 limit 1");
if ($show_this->RecordCount() > 0) {
$content .= '<a class="category-links" href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>' . '<br />' . "\n";
}
}
if (SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
// display limits
// $display_limit = zen_get_products_new_timelimit();
$display_limit = zen_get_new_date_range();
$show_this = $db->Execute("select p.products_id
from " . TABLE_PRODUCTS . " p
where p.products_status = 1 " . $display_limit . " limit 1");
if ($show_this->RecordCount() > 0) {
$content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>' . '<br />' . "\n";
}
}
if (SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true') {
$show_this = $db->Execute("select products_id from " . TABLE_FEATURED . " where status= 1 limit 1");
if ($show_this->RecordCount() > 0) {
$content .= '<a class="category-links" href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a>' . '<br />' . "\n";
}
}
if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
$content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a>' . "\n";
}
}
$content .= '</div>';
?>
have you enabled it in the admin 'Layout Boxes Controller'?Quote:
Originally Posted by DBB1
Nope, but that does the trick... Thank you.Quote:
Originally Posted by vandiermen
Perhaps that little tidbit needs to be included in the readme file that comes with the contribution.
It simply says "Just unzip, install the 3 files included.....enjoy."
The instructions should probably further state that the CSS file still needs to be edited to control the menu layout, that there are no Admin controls. Stating "now, it's much easier to customize your own menu colors without having to know css" is a tad misleading perhaps.
I understand that the contribution has been around forever, but the instructions seem to assume the reader is a long-time user.
I'll contact the contributor and make these suggestions, but in the meantime, maybe this post will help someone new to the flyout menu.
Thanks again for the help!
-DBB1
I was able to find the problem in IE. It was a z-index issue and just had to place z-index on the wrapper for the main ul.
Took a little tweaking, but the menu is working great. Definitely not a horrible learning curve as this is my first zen cart site and things have come together quite nicely!
Thanks to everyone for your help!