Suggestions:Quote:
Originally Posted by rwoody
1. Remove the two lines start with "php_flag"
2. Consult your web hosting system administrator for help.
Printable View
Suggestions:Quote:
Originally Posted by rwoody
1. Remove the two lines start with "php_flag"
2. Consult your web hosting system administrator for help.
Does anyone know if it's still possible to make this a horizontal flyout - under the header - as it was in previous versions ? I am using a clean install of 1.3.6 as this would be for a brand new template..
Thanks
Nm...
I downloaded the archived header mod and popped it in - of course I didn't use the tpl_header.php that was in it - just included the rest into my current 1.3.6 header and it worked fine. Just css tweaks now :)
Thanks!
In the classes/categories_ul_generator.php file, you have something like this:Quote:
Originally Posted by frank_lyy
The three lines that are commented starting with // were causing problems for some folks; however, if you uncomment those three lines, it should skip the items that normally appear in the documents category box.Code:$categories_query = "select c.categories_id, cd.categories_name, c.parent_id
from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd, " . TABLE_PRODUCT_TYPES_TO_CATEGORY . " ptc
where c.categories_id = cd.categories_id
and c.categories_status=1 " .
// "and c.categories_id = ptc.category_id " .
// "and ptc.category_id = cd.categories_id " .
// "and ptc.product_type_id not in " . $this->document_types_list . "
" and cd.language_id = '" . (int)$_SESSION['languages_id'] . "'
order by c.parent_id, c.sort_order, cd.categories_name";
How do I add a left border or margin to my categories box? I want it to look like the Information Box below it. I am using the CSS Flyout contribution.
http://www.butanecards.com/Shop/
P.S. Please disregard the colors on the site for now. I am just trying to get the layout correct then I will color it all in later.
Never mind.. I figured it out.Quote:
Originally Posted by creeperkat
Perhaps an explanation of what you did would be helpful?
Hello everyone, just wanted to say that I tried everything to get the flyout working for IE 6 (and I mean everything).... finally I just upgraded to IE 7.0 and guess what... it works perfectly (of coarse)... so instead of trying to get it to work with IE 6 we just made a little notice at the top of our pages that says something like "this site is best viewed with Firefox or Internet Explorer 7.0, if you are having trouble with the site please upgrade your browser... "
BTW, all the fixes in here worked for me except for the www redirect thing in the htaccess... when I installed that it took all of the formatting out of the site (made the whole site a text format) in both Firefox and IE6 for some reason... ???
I think the biggest help was removing the "float" and upping the px ....
If anyone comes up with something better than the .htaccess thing for IE6 that would be great. :) In the meantime I'm going to give this one a rest.
Hello
i install it , and it is not working for me,
i dont even see it on my tools/layout box
on my template under tools it dose show that Default(All)CSS Flyout Categories Menu TemplateMY_TEMPLATE
any idea what did i missd
www.tiledepot.us/store
Hi Agian
can some one help in here please
"Version 1.1.x installations will require a few changes to the modules/sideboxes/.../categories_css.php file" what changes and where to i find it
after re installing it all over again and reading all the previous post, am still not able to see the .css on my layot controler.
is that work with 1.37? www.tiledeopt.us/store and i do use the 1.37
reading other post with an oder dates am not sure which one is for what version
thank you
well i made it works
i had to make a copy to /public_html/store/includes/modules/sideboxes/
and not to my /public_html/store/includes/modules/MY_TEMPLATE/sideboxes/ as the instruction said
if any one read this please tell me how can i change the colors and the style of the catagory as it is look wierd on my site
www.tiledepot.us/store
thank you
Dosen't look like any one reading here anymore , look like the all solve their problems :)
i am still waiting for some one to help me please look at my site www.tiledepot.us/store
i am trying to remove the beige box around the catagories add an arrow next to catagory with sub,
this is an exapmple of waht i am trying to do http://www.afrimusik.com/
hope some one still reading here
thank you
Hello, I am having a difficult time with the CSS Flyout Categories? I unzipped it and I transfered it over, but it is not showing up on my website? I am not positive that I put the files in the right place.
Can anyone please help me, step by step on where to put the CSS Flyout Add in which files?
I greatly appreciate all of your time to read this and all of your help, as well. Thank you!
Did you turn this feature on in Admin>tools>Layout Boxes ControllerQuote:
Originally Posted by jben
after you uploaded your files?
Oops never mind, you been help :)
If you had rather have roll-over images, you might try my version of this contribution (link in my signature).
Results can be seen at www.linenspace.com (Best viewed in FireFox).
Hello Get Em Fast
Well I think what I got its yours, Thank You
How can I make a space between my product categories to the Specials, new product Etc...
Also how can I make the letters bit larger on my category
Thank you
I noticed that there is a template_info.php file and a scr_template_default.jpg image included in the YOUR_TEMPLATE folder of the contribution.Quote:
Originally Posted by Get Em Fast
Are these necesary? Asking because if I change the YOUR_TEMPLATE folder name to match my custom folder name the template_info.php would overwrite the one already there.
Hello Clyde
Thanks for your help with this mod, trying to make it closer to my other boxes.
I be obseving this Thread ,am sure i will learn some.:smile:
Thx again
Sorry, that doesn't look like mine. Mine uses two images for a roll-over effect on all the category links, not just a colored background.Quote:
Originally Posted by motti
But, I CAN help you with this issue, if you don't have it resolved by morning, as I've GOT to get some sleep. Sorry. If I don't, I might have you with little pink, fuzzy, polka-dots as categories. I'm usually on here by 7:30-8 A.M. central time.
C U then.
Hehehehe
I wait for the morning :smile:
Thank you
Not necessary. You can forget that one. It's just for informational purposes. You don't have to have ANY template_info.phpQuote:
Originally Posted by clydejones
Hope this helps.
Morning, motti. Looks like you done got it, huh? Looking good.
I did notice, though, that you've got a problem in your upcoming products header.
You know the line in you css that reads:
CAPTION {
/*display: none;*/
}
? You might want to un-comment that line to look like:
CAPTION {
display: none;
}
Then that will go away, but you probably already knew all about that, huh?
You might want to point this out in the readme or delete them altogether.Quote:
Originally Posted by Get Em Fast
1. Unzip the package, retaining the folder structure.
2. Read the following notes before proceeding to copy all the files to your site,
Before copying, take care to rename the "YOURTEMPLATE" folders to match your
custom template's foldername.
If I follow these (without looking at the contents of YOURTEMPLATE), I'd loose my custom template.
No, Clyde, you wouldn't loose your template. You can overwrite template_info.php, or totally delete it. Like I said, it's just for informational purposes, giving you the creator, creation date, and maybe some special instructions, but it doesn't do anything for your template. And that's not just mine....that's ANY template_info.php. Seriously, just try this: back your's up (since you're worried about this issue), then delet it off your local server (I'm sure you have one for development, right?), and look......no change what-so-ever. It's JUST for you to see this information:
$template_name
$template_version
$template_author
$template_description
$template_screenshot
But it doesn't do a thing for your template, or even required to be there.
Actually, if you look at it, I don't think I even changed it's information at all (don't remember), so I think it still contains DrByte's information from when he first created this mod. All I done was just update it to include images with a roll-over effect.
I am rather shocked, though, that as long as you've Zenned, and as many posts that you have, that you didn't know this. Mmmmmm..................
Quote:
Originally Posted by Get Em Fast
If I have a custom template folder that I created it contains a file called template_info.php that contains: (as you pointed out above) information that describes that particular template. Now if I upload a file with an identical name (template_info.php) the original file is overwritten and I now have a file that contains information different from what was in it originally.
so if the original is $template_name = 'This is my custom template' and I upload the file from the contribution I now have $template_name = 'CSS Flyout Categories Menu Template';
If I then go to admin -> tools -> template selection, my original template name (This is my custom template) no longer shows up however, (CSS Flyout Categories Menu Template) is now listed as a template selection.
How is this not changing my custom template?
Clyde, Whoa! Easy, big fella'. My bad. Sorry about that. I DO see what you mean. Wow! I'm surprised that I never noticed this.......but I don't change my template too often, though. Actually, NEVER. That's why I never saw that this file ever done anything other than show YOU a little information about the template.
Holy cow! I wander why this file is even included, now. DrByte created this thing, so I'm sure there's a reason for it, but I don't see what, as I chose NOT to overwrite mine (since there was already one there), and I've never had any problem with this mod working.
Like I said, I just updated it to include images with a roll-over effect, and never even paid any mind to the template_info.php.
I will submit an update to this mod to exclude this file, so this doesn't happen again.
Thank you EVER SO MUCH for pointing out this VERY possibly devastating error.
O.k. clyde......got it updated and uploaded to the DEV team. I'm sure they will post it A.S.A.P.
It was updated to remove this file, and an old screenshot that was left in there. I also credited you for this crucial discovery. Update message was as follows:
Just an updat to remove the file "template_info.php" which wasn't necessary, and if used to over-write a persons' template_info.php in their custom template, would cause them to loose their template info under Admin>tools>template selection!
Many thanks to clydejones for pointing out this crucial flaw!
Oops. Just noticed that I misspelled "update", right off the bat. Man.......I've got to slow down a little bit. Too many little, but stupid mistakes!
Thanks, again, clyde.
Get Em Fast
I do have one question about the mod. I have to admit, I don't use it myself, but I'd like to become familiar with it in case I get more requests to install it.
Is it my imagination or is there a problem getting everything to fit nicely into the category sidebox. I've looked at a couple of different sites that use it and noticed that the bottom seems to run directly into the following sidebox (overlapping the header portion of the box)
Uh....so far, I haven't noticed this, but in some cases you might be right. I've attached a screen shot of the original mod where I developed it. If you have any problems, just let me know. I'm sure it's just a margin or padding issue.
Thanks, I'll play around with it a bit.Quote:
Originally Posted by Get Em Fast
Sorry. Had to leave for a bit.Quote:
Originally Posted by clydejones
This was just as easy as I thought it would be. Just find these two sections (first part of code):
div#nav-cat {width: 150px; margin: -1px 0 0 -1px;
background-color: transparent; font-weight:bold;
text-align: center;
line-height: 23px;
}
and.....
div#nav-cat ul {margin: 0; padding: 0; padding-top: 0; width: 150px; background-color: transparent;
border: 2px solid tan;
background-repeat: no-repeat;
}
And add:
padding-bottom: 1em;
to each on of them, with the results being:
div#nav-cat {width: 150px; margin: -1px 0 0 -1px;
background-color: transparent; font-weight:bold;
text-align: center;
line-height: 23px;
padding-bottom: 1em;
}
div#nav-cat ul {margin: 0; padding: 0; padding-top: 0; width: 150px; background-color: transparent;
border: 2px solid tan;
background-repeat: no-repeat;
padding-bottom: 1em;
}
Hope this helps.
Hello, I would turn it on there but it is not showing up there as it would if the database could find the files. Do I keep all of files together and I any tips would be greatly appreciated. Every little bit helps. Thank you I have been working on this for three days and I am not going anywhere with it.
I thank all of you for your help and patience. I am still learning as this is a new process for me. Have a great day!
Thanks, I also noticed that the contribution I was working with used a "float:left"Quote:
Originally Posted by Get Em Fast
declaration which I removed and everything works fine.
Hmmm.........You sure it was my version? I have no float at all in mine.
Here is the FULL code, just in case you would like to compare:
body {
behavior: url(./csshover.htc);
/* WinIE behavior call */}
div#nav-cat {width: 150px; margin: -1px 0 0 -1px;
background-color: transparent; font-weight:bold;
text-align: center;
line-height: 23px;
padding-bottom: 1em;
}
div#nav-cat ul {margin: 0; padding: 0; padding-top: 0; width: 150px; background-color: transparent;
border: 2px solid tan;
background-repeat: no-repeat;
padding-bottom: 1em;
}
div#nav-cat ul.level2 {margin: 10; padding: 2; width: 150px;
background-color: transparent;
border: none;
}
div#nav-cat ul.level2 {background-color: transparent;
}
div#nav-cat ul.level3 {background-color: transparent;
}
div#nav-cat ul.level4 {background-color: transparent;
}
div#nav-cat ul.level5 {background-color: transparent;
}
div#nav-cat ul.level6 {background-color: transparent;
}
div#nav-cat li {background-image: url(../images/b1.gif);
position: relative;
list-style: none;
margin: -2px;
margin-top: 6px;
z-index: 20;
height: 23px;
width: 150px;
/* 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: 10px;
/* 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.submenu {
background-color: transparent;
}
div#nav-cat li.submenu:hover {background-color: transparent;
}
div#nav-cat ul {background-color: transparent;
}
div#nav-cat li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; 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: 152px;
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;
}
jben, check your pm's when you log back in, o.k.?
Not your verison, it was the version before yours.Quote:
Originally Posted by Get Em Fast
Ahhh..... I knew there wasn't a "float" in it, after I got done with the modifications.Quote:
Originally Posted by clydejones
Well it working fine and I shouldn't have any problems in the future.Quote:
Originally Posted by Get Em Fast
[FONT=Times New Roman]Hi Get Him Fast and Clyde[/FONT]
[FONT=Times New Roman][/FONT]
[FONT=Times New Roman]Thank you both, for the info Get Him and Clyde for the help [/FONT]
[FONT=Times New Roman][/FONT]
[FONT=Times New Roman]Last think I need on this mod ( or my mod ) is how can I make large space or even an Empty box between my category list to the Special., New Product Etc...[/FONT]
[FONT=Times New Roman]Or maybe I shouldn’t say last think, there is always something new coming up :smile: [/FONT]
in stylesheet_categories_menu.css add the following:Quote:
Originally Posted by motti
Now in tpl_categories_css.php find this line of code:Code:#spacing {
padding: 0.2em 0;
border: 3px solid #fff;
}
and change it to read:Code:$content .= '<ul class="level1"><li><a href=""> </a></li></ul>'; // insert a blank line/box in the menu
Code:$content .= '<div id="spacing"> </div>'; // insert a blank line/box in the menu
Ty Clyde
It is looking great :clap:
You are the best
Thank you
hi
does somebody can help me in solving this problem:
I have a site with two languages, I want to have some categories for a language but not for the others, the problem is that category flyout shows a blank row for this not translated category, any idea to resolving this problem?
the same problem I have in another site with multisite module, normal category sidebox works with filter function of multisite module, but flyout doesn't work and shows all categories eben filtered categories.
2- I got already the solution to get subcategories from right to left from Dr.Byte, but for the header css flyout, I don't find any place to change float, or etc, every changes I ried didn't work, any idea about this too?
thanks iin advance
reza
reza, could you post a URL so we can see this, please? I think I know what you are trying to do, but I want to make sure.
I have just implemented this fantastic mod. It is great in IE. Bear in mind that this could be specific to me, but in Firefox, the side menu is dark blue - it doesn'thave the image rollovers. It looks like it is CSS styled.
http://www.thegemtree.com/
appreciate any help with this.
**** SORRY IGNORE THAT, I CANNOT EDIT AND REMOVE THE ABOVE ****
it is working fine in firefox. For some reason, firefox was not showing it right for a little while
Quote:
Originally Posted by HeathenMagic
Thanks for the compliment. Just thought the colors were a little off for your site. Of course, you can replace those 2 images with any you like.......or if you like those buttons, and not the colors.....guess what?......I made you some that matches your site a little better. You might have to change the color of your text, though. Anyway, here they are:Quote:
Originally Posted by HeathenMagic
Thankyou so much for that I am most grateful.
I am hesitant in asking for your help further, but I have been looking for nigh on two hours. lol
I figured now that the css flyout sidebox text colour is defined somewhere.
I tried to add color: #000000; to the relevant place in stylesheet_categories_menu.css but it doesn't have any effect.
I have figured that if I change a component in the main stylesheet.css, it will change the colour, but all of the site links also.
I am wondering if I may have missed something in my limited knowledge.
Thanks once again,
Your quite welcome. And, nope.....you haven't missed anything, as far as I know. It's all controlled from the stylesheet.css, unfortunately. Maybe somebody like DrByte could elaborate on this issue a little further. I'm sure it could somehow be separated from the other links, but I haven't figured it out, yet. Just like that STUPID little blank menu that's been driving me crazy! I WILL figure that one out..........someday.
The "link" text color(s) are defined in the main stylesheet.css
You can control the categories text color(s) by adding a color: #000; attribute to each "a" declaration in the flyout menu stylesheet. This will then only affect the text color(s) in the flyout menu and not do anything to other text links.Code:a:link, #navEZPagesTOC ul li a {
color: #000;
text-decoration: none;
}
a:visited {
color: #000;
text-decoration: none;
}
a:hover, #navEZPagesTOC ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
color: #000;
}
a:active {
color: #000;
}
Hello, I am not sure what happen but I figured out how to change the text color and now my images wont rollover, I am missing something. I really appreciate your help. Thank you
www.cagedtalent.com/store
Thank you everyone, I figured this out with help from Get' em fast. Thank you Get' em fast for your constant help and patience. I greatly appreciate this.
Hi
I've installed this contribution and modified it for my template and it is working perfectly except in IE6 where the flyout menus don't work at all. I tried again on a local test server by overwriting with the original files but get the same result. Can anyone throw any light on this?
This area of the site is not live yet but the URL is http://www.motoskinzfx.co.uk/shop/
Thanks for any help.
RoPey
Typically that's because you're missing the csshover.itc script, or else your server configuration is blocking it from being loaded by the browser.Quote:
Originally Posted by RoPey
But, since you have a protx contribution error showing on your site, there's no way to see for certain what's happening in your case.
Thank you DrByte. I got sidetracked during installation of Protx on Friday and am now waiting for some info before I can proceed. However, I have looked on the remote server and, as you suggested, csshover.itc was missing. Hopefully, that will have fixed it.Quote:
Originally Posted by DrByte
Thanks for your help.
Regards
RoPey
Hi DrByteQuote:
Originally Posted by RoPey
I've got over the Fatal Error message from Protx and have put in the csshover.itc but it doesn't seem to have fixed IE6 not displaying the flyout menus.
Any other possibilities?
Many thanks
RoPey
I have a unique situation with my site where the menu works a little too well. When I scroll over the categories the sub-categories fly out, but if I move the cursor off of the menu it is still highlighting the category selection. It appears that I can move about 10-15px away from the menu and it is still highlighted. I am stumped and can not figure out what I did. Can you advise?
http://209.62.39.3/~hotshots/index.php?main_page=index
Hi
I am still having no success in getting my version of the flyout menus to work under IE6. I have tried overwriting my amended .css file with the original from the module download and have put csshover.htc in practically every directory going but still no luck.
If anyone could give me any clues as to what I'm doing wrong I'd really appreciate it.
RoPey
PS One thought - I'm testing under a vanilly IE6 install on Microsoft Virtual Machine running XP - my own development environment is Vista and so runs IE7. If someone with IE6 could have a quick look and see if it's the case under a regular install I'd appreciate that too.
Well I thought I had the .htc file everywhere, but discovered it wasn't in the one place it needed to be - they're appearing in IE6 now. Just some spacing issues to deal with now....Quote:
Originally Posted by RoPey
Was going to try to help, but can't seem to reproduce your problem in either Firefox or IE7.Quote:
Originally Posted by mbheald
BTW - better check out http://www.websiteoptimization.com/s...ain_page=index - your non-product images need optimization.
I have a site that I am porting to Zen Cart (http://classygroundcovers.com/cart/i...=index&cPath=1).
It needs categories to be displayed with both latin and common names (on separate lines for readability).
There are two Categories side boxes on the left presently:
- the one at the bottom works OK and displays multiple lines per category
- the one at the top is the css flyout version that I am trying to get working, it displays only the first line of each category when you mouseover All Types
Can anyone advise me how to get Css Flyout Categories to display categories on more than one line? (like the category box below)
Where did you place the file to make it work in IE6? Thanks.Quote:
Originally Posted by RoPey
@dinosoup - my thoughts exactly!
I've put in into includes (following the file structure of the mod) but this doesn't seem to be working for me.
Oh well, trial and error now I guess....
Hello everyone,
I read a lot of the posts about the breadcrumb problems and the flyout categories but I can not fix my problem.
I can not see the parent caetgory when I click on a sub category.
For exemple, I should see :
Home > Jewelry > Necklaces when I click on the sub-category 'necklaces' but I SEE just Home > Necklaces
You can check it out here : http://www.viamarisnyc.com/zen/index...index&cPath=23
If you have any idea, don't hesitate, I am getting crazyy!!
thanks a lot
Francois
I checked my site and it had the same problem, I never noticed!Quote:
Originally Posted by fcegarra
Replace includes/classes/categories_ul_generator.php with the file attached.
Let me know if that works. I think that everyone using this will need to replace that file. I guess I'll package it up for a new release in the downloads section.
Matt
lankeeyankee,
I would like to thank you for your post and your file editing. It works parfectly!
I think you can definitely package it up for a new release in the downloads section. It could help many other people!!
Thanks a lot,
F.
I have a problem with css flyout menu, its not working i think, i can see only tree view not flyout, please help me.
its shows like
dress
shirt
pant
sweater
Accessories
button
thread
but what i saw in example , mouse over in a category it expand another slide for sub category.
please help
Hi,
I installed the mod and everything seems to work right, except part of th edesign i just cant figure out.
There is this brownish border I cant find it anywhere to get rid of it.
Any idea?
Thank you very much.
regards,
kruna
oh... I am sorry i fogot to ask, I would like to have the flyout deign only for category not for specials, featured, new and all, is this possible?
Thanks
regards,
kruna
Get tired hitting my head to the wall. :frusty:
I just cant figure out what I messed up.
css flyout menu side box has strange light brown lines
http://fotonapakymppi.fi/kymppi_cart...=index&cPath=2
marksu
Hi Marksu,
today is your lucky day...I also just spent like hopurs on the same issue, decided to post as you can see above and few minutes ago I got the solution....even didnt have time to post an update...
go into your stylesheet and find
should be at the beginning line 11Quote:
div#nav-cat ul {margin: 0; padding: 0; padding-top: 0; width: 150px; background-color: transparent;
border: 2px solid tan;
background-repeat: no-repeat;
}
change background-color: transparent
to #ffffff or which color you want...
regards,
kruna
Marksu,
I forgot to add taht you also have to deleteregards,Quote:
solid tan
kruna
Thanks for the help.
I must admit it was my lucky day.
One thing I wonder is why does it not use the same borderimages on the sides.
The header is same though as other boxes.
marksu
Quote:
Originally Posted by Kruna
I am sorry I dont know what you mean I guess my skills are very limited to be able to provide you a proper answer on this...
I am glad it worked...
regards,
kruna
I just ment that comparing to flyout sidebox border and the other side boxes they differ. Flyout sidebox for me do not have any borders only the header.
Al also have a feeling that border where there in the begining when flyout menu mod was installed. Not sure though.
marksu
Quote:
Originally Posted by Kruna
opaply need to reinstall the flyout menu mod to get that fixed.
marksu
I now even reinstalled the flyout mod but still having problems.
The new sidebox dont have the default sidebox borders like al the other sideboxes have.
see here
http://fotonapakymppi.fi/kymppi_cart...=index&cPath=3
marksu
Btw removing the "solid tan" is enaf to get the brown lines away.
No need to edit transparency.
If somebody figure solution to my other problem which was the missing sidebox borders I would apreciate it.
see here
http://fotonapakymppi.fi/kymppi_cart/
marksu
Quote:
Originally Posted by Kruna
Any help would be apreaciated.Quote:
Originally Posted by marksu
Could it be that somehow the css flyout menu has the borders but are somehow hidden underneath?
Or
Are the css flyout sidebod table wrong width that the border are outside the table therefore not displayed?
Any help anyone?
marksu
Hi
The css flyout works fine on the site I am dsigning for a client in Firefox, but the menu shifts in IE6. It's very annoying. Any ideas?
**Site is an adult Store**
http://www.funtimz.co.uk
Cheers
Cal
Someone pleeeeease explain how the heck i get this flyout menu to work in IE6. Ive noticed a few stores like performance-pcs.comand http://www.afrimusik.com/ work. How did they do it. Im tired of :frusty: all night haha. Please help me out.
I'm also looking how to get the flyout menu to work on IE6. Thanks.
Also, disabled categories still show up on the menu. How can I fix this?
I believe the IE6 problem is this:
http://www.zen-cart.com/forum/showpo...&postcount=164
Still unsure about the disabled categories.
Can you post the specific problems that you have with ie6? link? I fixed this but I can't remember what I did, I think it might just be CSS fixes but when I see your problem(s) it is sure to jar my memory.
Matt
Hi, I have a problem with the css flyout categories menu. It works fine In Firefox but in IE when I hover the 'Hand Suction Lifters' link everything below the menu shifts downwards. see http://www.kilner-vacuum-lifting.com/kvshop.
I'm stumped by this problem... any help would be great?
Bump!...no one?
I hear you !!!
It's been a pain in the a*** for me too. I started my store in Nov 06 and in the following two months before we went live, this drove me mad too. I could get it to work in IE6, but not in FF. In order to get it to work in both, I have had to put up with this weird shifting issue in IE6 and for the past year, its been running like that.
Anyhow, after a year of being live, I'm currently going through the entire site once again, reviewing what I did, improving things, changing text to improve conversion and sales.
So a few weeks ago, I began to review the navigation of the menu and had another look at this, especialy since IE7 cures the problem, but still a large proportion of the worlds internet users are still using IE6 so I wanted to get to a point where I could have a menu which worked and behaved the same in IE6 7 and FF.
I have found two things. Firstly, you HAVE to have a small border on the bottom of your list items, as this is what causes the shifting in IE6, just one px will do, but if you don't set it at all, you get the shifting.
Secondly, and this is something which I still don't undertand myself is that in order to get this to work as I want it, with no margins, borders and images I have to have an additional closing comment marker towards the end of the stylesheet. If I get rid of it, the whole thing just looks a mess.
I've tidied up the stylesheet and added comments to each line so hopefully you can understand it if you not a CSS expert, which incidentally I aren't either.
Look at your own stylesheet and compare to this to see if any of it helps you out or just swap them and then change it for your own needs.
Other points to note which will not help: Don't change the order of the items in the stylesheet, moving them around will cause unintentional problems and don't set more than you need to in each area as this piling of valuves on top of other ones just make things worse too.
You can see the menu with the stylesheet below in action here : http://www.wilcodirect.co.uk
HTH
--
Chris
/* WD CSS Flyout Menu Stylesheet - CMW 13/02/2008 */
/* WinIE Behavior Call */
body {
behavior: url(includes/csshover.htc);
}
/* Overall Settings for CSS Flyout Sidebox Area */
div#nav-cat {
width: 150px; /* Sets sidebox to 150px wide - Set width below for the CSS Flyout */
margin: 0; /* Sets sidebox to no margin - Set margin below for the CSS Flyout */
background-color: #1D4DA1; /* Sets sidebox background colour to WD BLue, Set colour below for the CSS Flyout */
font-weight: bold; /* Set sidebox to bold text - Applies throughout entire sidebox and CSS Flyout */
}
/* Overall Settings for CSS Flyout Menu Area */
div#nav-cat ul {
line-height: 18px; /* Sets CSS Flyout List Area Lines to 20px high - Applies throughout menu system */
width: 150px; /* Sets CSS Flyout to 150px wide, matching the width of the entire sidebox which is set above */
margin: 0; /* Sets CSS Flyout List Area to no margin, - Applies throughout menu system */
padding: 0; /* Sets CSS Flyout List Area to no padding - Applies throughout menu system */
background-color: #1D4DA1; /* Sets CSS Flyout List Area background colour to WD BLue - Applies throughout menu system unless overridden */
}
/* Sets Backgrond Colour for further submenu blocks */
div#nav-cat ul.level2, div#nav-cat ul.level3, div#nav-cat ul.level4, div#nav-cat ul.level5, div#nav-cat ul.level6 {
background-color: #1D4DA1; /* Sets CSS Flyout List Area background colour to WD Blue - Applies to all levels apart from the first one */
}
/* Sets Category Text Background Options */
div#nav-cat li {
position: relative; /* Sets the submenu to display inline with the previous menu - Applies throughout menu system */
list-style: none; /* Sets the list to display without any indentation or markers - Applies thorughout menu system */
margin: 0; /* Sets each line item to no margin - Applies throughout menu system */
z-index: 1; /* Ensures the menu displays on top of other items on the page - Applies throughout menu system - may need to alter this value */
border-bottom: 1px solid #1d4da1; /* Sets each line item to have a tiny border just on the bottom, required to get this thing to work in IE6 - Applies throughout menu system */
}
/* Sets Currently Hovered Category and it's parent category to orange background */
div#nav-cat li:hover {
background-color: #FF9900; /* Sets the background color of a line item which is being hovered over to WD Orange - Applies throughout menu system */
}
/* Sets Category Text Background for categories with subcats */
div#nav-cat li.submenu {
background: url(../images/submenu.gif) 95% 50% no-repeat; /* Adds an image to the end of each line item containing a sub-menu - Applies throughout menu system */
}
/* Sets currently hovered parent category on the Main Menu to orange background */
div#nav-cat li.submenu:hover {
background-color: #FF9900; /* Sets the background color of a line item that contains a submenu which is being hovered over to WD Orange - Applies throughout themenu structure */
}
/* Settings for Category Text */
div#nav-cat li a {
display: block; /* Sets the whole of the line to be clickable, rather than just the text - Applies throughout menu system */
padding: 0.25em 0 0.25em 0.5em; /* Positions the text on each line item into a more central position - Applies throughout menu system */
text-decoration: none; /* Sets the text to disdplay normally with no unwanted effects - Applies throughout menu system */
width: 140px; /* Sets the width of the text area to 140px wide - Applies throughout menu system */
color: #FFFFFF; /* Sets the text to be white - Applies throughout menu system */
}*/ /* This strange closing comment mark seems to be necessary to get this to work properly */
/* Settings for the display of submenu blocks */
div#nav-cat ul a{
width: auto; /* Sets the submenu block width to auto - If not present menu displays as huge list - Applies throughout menu system */
}
/* Settings for position of submenu blocks */
div#nav-cat ul ul {
position: absolute; /* Sets the submenu blocks to display alongside and below the parent menu - Applies throughout menu system */
top: 0; /* Sets the position of submenu blocks to line up against the parent menu at the top - Applies throughout menu system */
left: 150px; /* Sets the position of submenu blocks to line up against the parent menu on the side - Applies throughout menu system */
display: none; /* Sets the submenu blocks NOT to display - Seems strange but if this isn't included strange effects occur - Applies throughout menu system */
}
/* Settings for extra submenu blocks */
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; /* Sets submenu blocks TO display when they are being hovered over, overriding setting directly above - Applies throughout menu system */
}
Nice post Chris!,
Looked at your CSS and your site..tried putting the 1px bottom border on menu but not working for me. I'm posting my css to see if you can spot anything a miss..I've been looking at it so long I'm begining to wonder if the problem is with this file or elswhere.
By the way your site is one of the best looking zen sites i've seen. I noted though you have the same issue with the 'sorter' showing through the menu flyout in ie6. I've still not solved this though.Code:body {
behavior: url(./csshover.htc);
/* WinIE behavior call */}
/* Overall Settings for CSS Flyout Sidebox Area */
div#nav-cat {width: 150px;
margin: 3px 0 0 0px;
background-color: #ffffff; font-weight:bold; font-size:12px;
text-align: center;
line-height: 23px;
}
/* Overall Settings for CSS Flyout Menu Area */
div#nav-cat ul {margin: 0; padding: 0; padding-top: 0; width: 150px; background-color: #ffffff;
background-repeat: no-repeat;
}
/* Sets Backgrond Colour for further submenu blocks */
div#nav-cat ul.level2, div#nav-cat ul.level3, div#nav-cat ul.level4, div#nav-cat ul.level5, div#nav-cat ul.level6 {margin: 0px; padding: 0px; width: 150px;
background-color: #ffffff;
border: none;
}
/* Sets Category Text Background Options */
div#nav-cat li {background-image: url(../images/b1.gif);
position: relative;
list-style: none;
margin: 0px;
z-index: 20;
height: 23px;
width: 150px;
border-bottom: 1px solid #D2DDF4; /* Sets each line item to have a tiny border just on the bottom, required to get this thing to work in IE6 - Applies throughout menu system */
}
/* Sets Category Text Background for categories with subcats */
div#nav-cat li.submenu {background-color: #ffffff;
}
/* Sets Currently Hovered Category and it's parent category to dark blue background */
div#nav-cat li:hover {background-image: url(../images/b1_over.gif);
}
/* Settings for Category Text */
div#nav-cat li a {display: block; padding: 0em 0em 0em 0em;
font-family: arial,Helvetica,sans-serif;
color: #666666;
text-decoration: none; width: 150px;
}
/* Settings for the display of submenu blocks */
div#nav-cat ul a {width: 150px;
}
/* Settings for position of submenu blocks */
div#nav-cat ul ul {position: absolute; top: 0; left: 152px;
display: none;
}
/* Settings for extra submenu blocks */
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;margin: 0 0 0 -2px;
}
Cheers
Nigel
get rid of the height and width declaration in nav-cat li, directly above where you have added the border-bottom.
I've got your CSS working on my test rig in all three browsers !!!
See if that helps.
P.S. Thank you for your kind comments regarding my handiwork and if your after any motoring essentials, don't forget about us !!
It works!!..would never have guessed to change those lines. Thanks :smile:
Quote:
Originally Posted by cmwoods
Do you have any thoughts about the problem with the 'product sorter' showing through the flyouts?..tried z-index but no joy :(
Maybe the thing to do is mod the css to move the sorter away from the menu.
will post if I can fix.
cheers
I just installed this and it just lists all the links and subcategories like a site map, any suggestions?
Sounds like you've forgotten to upload the included stylesheet file.Quote:
Originally Posted by keylesslocks
would it go into css folder for classic or template_default?
the reason why i put them in template_defualt is because this folder has the other subfolders such as common, sideboxes - but classic doesn't have those folders...
let me know... thanks!
Quote:
Originally Posted by cmwoods
I did as you suggested - and I also had the above-referenced height and width settings, I removed them and it broke for IE7 (the pull out feature doesn't work) and still didn't fix IE6 (pull out feature still doesn't work) and put a bit of a space between the top button and second button, though Firefox still works fine. Oh and another thing, the "roll over" effect is now broken. I have two images, one for roll out and one for roll over -
Here's my CSS
Please advise, thanks so much!!!Quote:
body {
behavior: url(./csshover.htc);
/* WinIE behavior call */}
div#nav-cat {
width: 150px;
margin: 0px 0 0 0px;
background-color: transparent;
font-weight:bold;
font-family: veranda, arial, sans-serif;
}
div#nav-cat ul {
margin: 0;
padding: 0;
padding-top: 0;
width: 150px;
background-color: transparent;
border: 0px solid #E0E8EF;
background-repeat: no-repeat;
}
div#nav-cat ul.level2 {margin: 10; padding: 2; width: 150px;
background-color: transparent;
border: none;
}
div#nav-cat ul.level2 {background-color: transparent;
}
div#nav-cat ul.level3 {background-color: transparent;
}
div#nav-cat ul.level4 {background-color: transparent;
}
div#nav-cat ul.level5 {background-color: transparent;
}
div#nav-cat ul.level6 {background-color: transparent;
}
div#nav-cat li {
background-image: url(../images/b1.gif);
position: relative;
list-style: none;
margin: 0px;
margin-top: 0px;
height: 23px;
width: 150px;
z-index: 20;
border-bottom: 1px solid ##E0E8EF;
/* 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.submenu {
background-color: transparent;
}
div#nav-cat li.submenu:hover {
background-color: transparent;
}
div#nav-cat ul {
background-color: transparent;
}
div#nav-cat li a {
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width: 140px;
color: #ffffff;
}
/*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: auto;
}
div#nav-cat ul ul {
position: absolute;
top: 0;
left: 150px;
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;
}
Hi, I am encountering the following CSS validation error in stylesheet_header_menu.css:
Also in the stylesheet_hoverbox3.css file, the following errors were caught:Code:body Property behavior doesn't exist : url(csshover.htc)
Any advise wld be greatly appreciated.Code:324 * html #hoverbox Value Error : margin-top Lexical error at line 324, column 88. Encountered: "?" (63), after : "" ? document.documentElement.scrollTop : 0) + 'px');
325 margin-left Value Error : margin-top Parse Error margin-left: expression( -1 * this.offsetWidth / 2 + (document.documentElement ? document.documentElement.scrollLeft : 0) + 'px');
328 margin-left Value Error : margin-top Parse error - Unrecognized }
331 * html #overlay Value Error : height Lexical error at line 331, column 96. Encountered: "?" (63), after : "" ? document.body.scrollHeight : document.documentElement.scrollHeight) > document.body.offsetHeight ? (document.body.scrollHeight > document.documentElement.scrollHeight ? document.body.scrollHeight : document.documentElement.scrollHeight) : document.body.offsetHeight + 'px');
332 width Value Error : height Parse Error width: expression((document.body.scrollWidth > document.documentElement.scrollWidth ? document.body.scrollWidth : document.documentElement.scrollWidth) > document.body.offsetWidth ? (document.body.scrollWidth > document.documentElement.scrollWidth ? document.body.scrollWidth : document.documentElement.scrollWidth) : document.body.offsetWidth + 'px');
333 width Value Error : height Parse error - Unrecognized }
How do i put a border around the links? http://www.flowsolutions1.com
don't know if someone has wrote about this before. I have installed this contrib for testing purposes and didn't found how to skip empty categories (in the sidebox I use in production server, yahoo treemenu with ajax, it was in a configuration parameter). As I found it very usefull in my store (computer parts) I implemented it and want to share it for those who may need it.
-create a file named categories_css.php and place it in includes/extra_configures
-edit includes/classes/categories_ul_generator.php and around line 58, searchPHP Code:<?php
define('CSSFLYOUT_SKIP_EMPTY', true);
?>
replace withPHP Code:$this->data[$categories->fields['parent_id']][$categories->fields['categories_id']] = array('name' => $categories->fields['categories_name'], 'count' => 0);
and around 72, searchPHP Code:$this->data[$categories->fields['parent_id']][$categories->fields['categories_id']] = array('name' => $categories->fields['categories_name'], 'count' => CSSFLYOUT_SKIP_EMPTY?zen_count_products_in_category($categories->fields['categories_id']):0);
and replace withPHP Code:foreach ($this->data[$parent_id] as $category_id => $category) {
finally, around line 101, searchPHP Code:foreach ($this->data[$parent_id] as $category_id => $category) {
if( (!CSSFLYOUT_SKIP_EMPTY) || (CSSFLYOUT_SKIP_EMPTY && $category['count']>0) ){
and replace withPHP Code:$result .= $this->child_end_string;
hope that helps.PHP Code:$result .= $this->child_end_string;
} //closing if CSSFLYOUT_SKIP_EMPTY
I'm trying to use this on a site that includes 'Document Categories', but it doesn't appear to work on them.
My regular Categories are positioned on the left and the the Documents are positioned on the right.
Have I missed something or does it just not work for documents?
Edited to add: Something I just noticed...it's combining my document categories with my regular categories on the left side too. :(
I am spent all day today trying to enforce it work with hideCategories contribution but absolutely without success. My PHP knowledge too basic for that. May be somebody can help? Thank you.
Hi,
I've a little problem with css flyout menu.. see: www.crazyanimals.it
When i pass through my menu with IE sometimes i loose the focus closing the menu..
Sometimes choose a second level category it's very difficult..
Someone can help me ??
Thanks !!
Best Regards
Ferruccio