Printable View
Hi,
I am having a bit of trouble installing this mod. I have transferred the "includes" folder with the CUSTOM renamed to the template I am using. All the files seem to be in the right place, but the categories_css doesn´t show up as an option in Admin.
Any ideas what I may have done wrong?
It's not showing up in Admin>Tools>Layout Boxes Controller at all?
Nope. I tried to experiment and rename the categories_css to categories.php and the categories tabs changed to what I guess is the flyout default look, but none of the flyout-functions, and now the products in the categories don´t show. So I have reset it.
I have installed the Norwegian language pack, other than that nothing too special.... Here is my site:
http://godpåbunn.no/
Thanks,
Kristian
Okay. Let's do a double-check of your files to make SURE they're in the correct place............
includes/classes/categories_ul_generator.php
includes/modules/sideboxes/black_pure_free/categories_css.php
includes/templates/black_pure_free/css/stylesheet_categories_menu.css
includes/templates/black_pure_free/sideboxes/tpl_categories_css.php
If those files are in the correct directories, it should show up in your Layout Boxes Controller.
Great, thanks!
For some reason what should be "includes/modules/sideboxes/black_pure_free/categories_css.php" was still "includes/modules/sideboxes/CUSTOM/categories_css.php" Now it seems to work -but the original design is gone for the categories menu :dontgetit a quick fix to keep the original background gifs for the menu header?
Thanks a bunch,
Kristian
Sorry, didn´t realize that the categories_css is a whole new menu. Any quick and convenient way to copy/paste the settings from my "categories" to my "categories_css" to make the new one blend in with rounded corners and so on?
Thanks a lot for your great add-on :-)
Kristian
Kristian,
In includes/templates/black_pure_free/css/stylesheet_categories_menu.css, overwrite the first 4 blocks of code in there with the below:
Code:#categoriescss.leftBoxContainer {
background: #f7f7f7;
width: 150px;
padding-bottom: 10px;
}
#categoriescssHeading.leftBoxHeading {
background-color: #f7f7f7;
}
#nav-cat {
width: 149px;
margin: 0 0 0 0px;
background-color: #fff;
font-weight:bold;
border: 1px solid #e6e6e6;
}
#nav-cat ul {
margin: 0;
padding: 0;
width: 149px;
background-color: #6495ed;
}
Thanks. In that folder I don´t have "stylesheet_categories_menu.css"
I have 4 files:
CSS_read_me.txt
print_stylesheet.css
stylesheet_css_buttons.css
stylesheet.css
Am I missing something?
Thanks,
Kristian
No, it's in there........look again.........if it wasn't in there, I couldn't see it with the Web Developer Tools OR see it in the View Source.
includes/templates/black_pure_free/css/stylesheet_categories_menu.css
Thank you so much! Of course it was there...just me looking in the wrong place. Looks great now. Coffee coming your way:smile:
Kristian
Hehe............that happens sometimes.........especially if you're tired and all the folders start looking the same.........Quote:
Originally Posted by Kristian
And thanks for the coffee! That's very nice and generous of you!
I've got one more little edit for you to make, though. Right now, if you hover over the "Toys" menu, the sub-menu is a little hard to get to if you move slow. You've got to move your mouse really fast to keep it open. So, let's fix that, okay?
In your stylesheet_categories_menu.css, find this block of code (almost at the bottom):
and change the 150 to 148, making that look like:Code:#nav-cat ul ul {
position: absolute;
top: 0;
left: 150px;
display: none;
}
That will fix that little problem.Code:#nav-cat ul ul {
position: absolute;
top: 0;
left: 148px;
display: none;
}
And thanks again for the coffee. I can smell it brewing right now.............no really, I can................(I just put a pot on). :D
Thanks again,
It is really amazing to get help like this. I didn´t see the problem just now (or notice the change to 148 px), but the change is there now. Does it seem better now at your end?
Kristian
I installed the mod and I would like to know how can I have all of the subcategories products show when I just click on the parent category. I have only 2 levels, the parent category (which is what is being listed in the sidebox) and the children subcategories. Currently when I click on the parent category, no products show and therefore the user is forced to select a particular subcategory which is not what I am hoping to accomplish. As the parent category should be a complete product listing of all its subcategories. Clicking on the subcategory should only narrow the list by that criteria.
Does anyone have any ideas that may help me achieve the functionality I am looking for?
Quote:
Originally Posted by ekon79
Well, that's what this menu is SUPPOSED to do..........show Categories and NOT products, so naturally clicking on ANY link in the menu will take the customer to the Category page.
Now, if you only have one product in a Category AND have the cart set to 'skip 1 product categories', then clicking on that particular Category will take them straight to the Products' page.
Quote:
Originally Posted by Kristian
Yep. Now, if you move your mouse slow from the 1st level to the 2nd level, the 2nd level doesn't disappear on you, as it was.
Hi! If this has already been asked, then I apologize ahead of time :smile:
I love this mod and it is so useful, so thank you very much!
I would like to change the background image for the current category. Is there a way to do this?
Thanks,
Anne
Hi;
I want to display the main catagories, and the second level cats underneath it, then the third level cats flyout, How do I do this?
Anne,Quote:
Originally Posted by picaflor-azul
Not currently. But, I think it could be done with merging a few edits over from Categories Dressing, but right at the time, I just don't have the time to do that. Keep me posted on what you come up with, and when I'm not so busy, I'll try to help you get this worked out.
Thanks,
Robert
Something like this?: http://www.testuksi.co.uk/catalog/Quote:
Originally Posted by iamgointowin
Just copy their stylesheet_categories_menu.css, then edit to match your site, as that will give you a GREAT start to what you're looking for.
Hope this helps.
css_flyout_menu_1-3-9b
Added both modules "CSS Flyout Header 1.5" and "css_flyout_menu_1-3-9b" header menus are working fine but categories side box menus are not working,
is it compatable, or what will be the problem...
is there any thing to add or modify at admin?
please help me to work out this...
just for info, i saw these modules have same file at icludes\classes..(categories_ul_generator)
Rashu
I installed the menu in my left column my problem is the menu moves at the middle of the page when i select a link....
how can i stop this?
Thanks:cool:
You got a link for us to look at this?
No link, the site is local on my computer and it bothers me as I don't want to go live with this problem.
I already installed your menu here and it's working fine:
http://www.bijouxpierres.com
On the site having menu trouble I use specific add ons that i don't use on the other like:
Fast easy check out which requires Css_javascript_loader
and I wonder if the Css loader is the reason of the problem, this is my best bet as your menu and this add on are both CSS related.
:yuck:
i forgot to add, viewing the page with Explorer 6 the menu doesn't move, it does move with Firefox 1.3.9...
Great mod, but I have one issue, probably of my own making. In short, I want to use a background gradient image instead of a solid color on the menu items. I'm noticing in Safari and Internet Explorer, the background image seems to get "offset". I'm sure it's a padding or margin issue, but I'm stumped.
I've attached a screenshot and my CSS. If you can spot the problem, please let me know. I'm going in circles on this one.
http://www.ruggedradiosmedia.com/background-image.jpg
HTML Code:#categoriescss.leftBoxContainer {
background-color: transparent;
width: 175px;
padding-bottom: 10px;
margin-top:0px;
}
#categoriescssHeading.leftBoxHeading {
background: url(../images/blue-background.jpg); background-repeat:repeat;
border-bottom: 1px solid #000;
margin-bottom: 1px;
}
#nav-cat {
width: 175px;
margin: 0 0 0 0px;
background-image: url(../images/arrows/grey-button.jpg);
background-repeat:repeat;
font-weight:bold;
}
#nav-cat ul {
margin: 0;
padding: 0;
width: 175px;
background: url(../images/arrows/grey-button.jpg);
background-repeat:repeat-x;
}
#nav-cat ul.level2 {background: url(../images/arrows/grey-button.jpg); background-repeat:repeat;}
#nav-cat ul.level3 {background: url(../images/arrows/grey-button.jpg); background-repeat:repeat;}
#nav-cat ul.level4 {background: url(../images/arrows/grey-button.jpg); background-repeat:repeat;}
#nav-cat ul.level5 {background: url(../images/arrows/grey-button.jpg); background-repeat:repeat;}
#nav-cat ul.level6 {background: url(../images/arrows/grey-button.jpg); background-repeat:repeat;}
#nav-cat li {
position: relative;
list-style: none;
margin: 0;
margin-top: 0px; /* change this to put space between buttons*/
border-bottom: 1px solid #000;
background: url(../images/arrows/grey-button.jpg); background-repeat:repeat;
}
#nav-cat li li {
margin: 0; /* overrides the margin-top above */
}
#nav-cat li:hover {
z-index: 1000;
color:#FF0;
}
#nav-cat li a:hover {
color: #FF0;
background-image:url(../images/arrows/hover-button.jpg);
background-repeat:no-repeat;
}
#nav-cat li.submenu {
background-image: url(../images/arrows/right-arrow.gif); /* background: url(../images/arrows/right-arrow.gif) 99% 50% no-repeat; */
background-repeat:no-repeat;
background-position:right;
}
#nav-cat li.submenu:hover {
background-image: url(../images/arrows/right-arrow.gif); /* background: url(../images/arrows/right-arrow.gif) 99% 50% no-repeat; */
background-repeat:no-repeat;
background-position:right;
}
#nav-cat li a {
display: block;
padding-top: 0.25em; /* Originally .25em */
padding-right:0em;
padding-bottom:.25em; /* Originally .25em */
padding-left:.5em;
text-decoration: none;
width: 100%;
color: #fff;
}
#nav-cat>ul a {
width: auto;
}
#nav-cat ul ul {
position: absolute;
top: 0;
left: 175px;
display: none;
}
#nav-cat ul.level1 li.submenu:hover ul.level2,
#nav-cat ul.level2 li.submenu:hover ul.level3,
#nav-cat ul.level3 li.submenu:hover ul.level4,
#nav-cat ul.level4 li.submenu:hover ul.level5,
#nav-cat ul.level5 li.submenu:hover ul.level6 {
display:block;
border-left: 2px solid #d########3;
background: url(../images/arrows/hover-button.jpg);
background-repeat:repeat;
}
IE6 had a ton of CSS bugs and shortcomings. The only reason to still be using that version is if you have a Windows 2000 operating system which is unable to run any newer IE (other modern browsers work fine on it), or you work for a company that requires all of its computers to use IE6.Quote:
viewing the page with Explorer 6 the menu doesn't move
I can't troubleshoot a screenshot. If you can't let us see the site directly, you'll have to wait for Get Em Fast (who knows the mod thoroughly) to show up.
Sure, the site's a work in progress, but you can check out what I'm trying to achieve at:
http://store.ruggedradios.com
Thanks for the help!
I'm getting a lot of end tag for "ul" which is not finished warnings with the WC3 Markup Validation Service. Is this normal?
Thanks
I meant:
I'm getting a lot of "end tag for "ul" which is not finished" warnings with the WC3 Markup Validation Service. Is this normal?
Thanks
www.test.soundfactory.nu
For whatever it's worth — I believe I solved my problem. I'm now getting background images to work across the different browsers, so we can consider this issue a done deal and ignore my previous post.:clap:
Quote:
Originally Posted by Soniccc
Hmmm................Yep..........there WAS a time when I got that, as well, but I though I had worked all of that out before uploading..........Hmmmmm.........maybe not?
Are you still seeing this?
You go a URL of the site with this problem?
I'm curious - it seems there was some discussion about Category Dressing being able to work with this mod http://www.zen-cart.com/forum/showpo...&postcount=590 but I'm not clear on the final outcome. Was this achieved? I'd hate to tweak a working flyout menu system if Category Dressing doesn't work.
Ultimately, I'm just looking to add headers in the menu system.
It's not that Categories Dressing can work with this mod, but that you can get flyout functionality in CD with a few style rules added to it. There is more detail in the CD support thread.
Awesome to hear and thank you for taking the time to answer. It clears it up a bit for me. I'll do a little more digging and playing with these and see where it goes. :-)
Hi does anyone know how to do this?Quote:
Originally Posted by picaflor-azul
Thanks
Thank you for the mod. I installed it and while it works well - I do have a couple of questions. I'm running the latest version of ZC 1.3.9h.
1. I have a large list of categories that fills the page. When you get closer to the bottom of the page, the menu flies out as it should, but you have to scroll the whole page down to view the contents. Is there a way to get the menu to fly up so the menu is on the same screen?
2. When some of my subcategories that do not have a sub-sub category, the subcategory name is highlighted. Is there a way to not do that? I played with the CSS but can't figure it out.
The site that I'm currently working on is an adult novelty toy site. I don't know the rule to the forum with regards to such sites so I'm not sure if I should include a link or not.
Any help would be appreciated.
kman55, You may include a link to the site as long as you ALSO post an Adult Content warning right next to it...............and seeing exactly what you're talking about and trying to accomplish would be helpful.
Thank you for your reply. The link is (remove spaces from the url) www.k i n k y k u p i d . com / zencart. PLEASE NOTE: This is an ADULT novelty toy site. Please do not log onto the site above if you think you will be offended by the contents.Quote:
Originally Posted by Get Em Fast
As I had mentioned, if you look at the categories that are closed towards the bottom of the page, the menu flies out (which is what I want) but the a lot of the contents hide under the screen. So you have to stop hovering, scroll the screen down and then hover of the category to be able to view the flyout menu.
Also, there's a grey highlight in many subcategories that does not have additional category. How do I remove that highlight? I've tried tinkering with the CSS and it did not help.
kman............sorry so long. I've been pretty swamped, lately.
Well, the list length has been worked on before, using a scroll feature, and does just fine..........if you've only got Categories and Sub-Categories. Beyond that, it breaks the flyout.
I think the grays' you're wanting to change can be found in these lines of code in your stylesheet:
Actually................for a site with as many Categories, Sub-Cats, Sub-sub-Cats, etc.............I wouldn't even recommend using this particular menu, as it DOES take up a LOT of 'real estate' on a site this size.Code:#nav-cat ul.level2 {background-color: #C9C9C9;}
#nav-cat ul.level3 {background-color: #C9C9C9;}
#nav-cat ul.level4 {background-color: #C9C9C9;}
Personally, I WOULD recommend Glens' Categories Dressing, letting each Sub and Sub-sub-Cat slide DOWN instead of "flying" out. Or...........I'm working on a Mega-Menu............ .....but, I can't discuss that right here, at this time. Further discussion about that will have to be in the form of a pm, email, or contact via my site.
Of course, it's your site, and that's just my opinion about the menu, but I already know you agree on the 'real estate' part, and I'm sure you're customers aren't too thrilled with the current menu....................
Anyway...........I hope this helped SOME, anyway.
Get Em Fast...... Lovely mod by the way, just wondered if i could quickly pick your brain about something and point me in the right direction.
The template for my site sideboxes indents everything by 25px except my categories box on the left and information box on the right. Now how do I stop this category mod indenting like my current non css category box?
HTML Code:.box {}
.box_head {padding:10px 0px 10px 38px; font-size:14px; font-weight:bold; line-height:normal; color:#000000; background:url(../images/h_ic1.jpg) top left no-repeat;}
.box_head a {color:#000000; text-decoration:none;}
.box_head a:hover {text-decoration:underline;}
[B].box_body {padding:10px 25px; margin:0; color:#000000;}[/B]
.box_body a {color:#000000; text-decoration:underline;}
.box_body a:hover {text-decoration:none;}
.box_body ul {margin:0; padding:0; list-style:decimal inside;}
.box_body ul li {padding:3px 0 3px 0; font-weight:bold;}
.box_body ul li a {text-decoration:none; font-weight:normal;}
.box_body ul li a:hover {text-decoration:underline;}
.box_body ol {margin:0; padding:0; list-style:decimal inside;}
.box_body ol li {padding:3px 0 3px 0; font-weight:bold;}
.box_body ol li a {text-decoration:none; font-weight:normal;}
.box_body ol li a:hover {text-decoration:underline;}
#categories {}
#categories .box_head {color:#363636;}
#categories .box_body {padding:0; margin:0; color:#3A3A3A;}
#categories .box_body a {color:#3A3A3A; text-decoration:underline;}
#categories .box_body a:hover {text-decoration:none;}
#categories .box_body ul {margin:0; padding:0; list-style:none;}
#categories .box_body ul li {padding:3px 0 3px 6px; border-bottom:1px solid #FFFFFF; background:#eeeeee;}
#categories .box_body ul li a {text-decoration:none; padding-left:5px; background:url(../images/arrow_1.gif) top left no-repeat;}
#categories .box_body ul li a:hover {text-decoration:underline;}
#moreinformation {}
#information {background:#545454;}
#information .box_head {background:none; color:#FFFFFF; padding:16px 0px 9px 0px; border-bottom:2px solid #4F4F4F; margin:0 9px 0 12px;}
#information .box_body {padding:0px 0px 18px 0px;}
#information ul {margin:0; padding:0; list-style:none;}
#information ul li {padding:2px 0 3px 6px; border:0; background:none;}
#information ul li a {text-decoration:none; color:#FFFFFF; padding-left:5px; background:url(../images/arrow_2.gif) top left no-repeat;}
#information ul li a:hover {text-decoration:underline;}
garethrooney, is this on the site in your signature? If so, if you'll enable the menu, I'll try to see just what margin/padding you're wanting/needing to adjust.
But, the styles you included......................have absolutely NOTHING to do with the flyout menu. It has it's own stylesheet.
Anyway..............I'll keep a look out for the menu to be turned on, then go from there. Okay?
Yes...
And enabled bottom left
Yeah i know ive tried messing with that and get no joy.
Regards
Gareth
Okay. Now that I can see it, I can ALSO see that it's been modified slightly to include a div that's not normally present in this menu.
Anyway, in includes/templates/theme025/css/stylesheet_categories_menu.css, add this line of code at the top of the page:
And I think that's what you're looking for................:smile:Code:#categoriescss .box_body {padding: 0;}
You legend....... Works perfectly. A couple of styling issues to sort then ill swap it out.
Never have a seen a zen module to quickly and efficiently supported.
Massive thanks
Gareth
Not a problem. Glad to help.
hello
How can i display only 2 levels: top categories + subcat without displaying any other levels, currently my menu displays up to 6 levels and it does take the whole page...
thanks
L.
:frusty:
Hi I'm using v1.3.9 and have the menu installed and v happy with it as is lovely menu. Have been searching tho for ways of adding custom pages to the menu titles. For example I really do not want information in the top menu, I have created a custom page and included this in menu but the menu dispaly HEADER_TITLE_CUSTOM_NAME, the link works but not sure how i can get rid of Header_title bit , any ideas??:flex:
Quote:
Originally Posted by jagall
Look in includes/languages/english/extra_definitions/CUSTOM/headermenu.php
and add the language define in there..........something like:
Hope this helps.PHP Code:define('HEADER_TITLE_CUSTOM_NAME','Your Custom Title Here');
thank you for getting back to me, I will try this, also if I want to add a submenu to this i.e. just another page really, will it work as when I tried based on the same code as the information lines, it seem to wrap the contact us, etc below it too.Quote:
Originally Posted by Get Em Fast
I suppose what I am asking is it possible to have a custom menu item (i.e. Page) with submenu items (more pages) on the drop down menu,
Cheers:yes:
Solved, got it working was missing a bit of code so great.Quote:
Originally Posted by jagall
I am using the define pages generator - and adding pages as needed but I also use the ez pages option, for menu and sideboxes just which is the best way to go, I suppose ez pages is more straightforward ??
Hello,
I am having the same problem as the person in post #601.. I verified the file locations shown in post #604.
I've included screenshots of the files and their locations.
Does anyone have any suggestions?
Thanks!
Here is a screenshot of my layout boxes controller too.
Hi I have searched through the thread for this but still cannot find a resolve, perhaps, Get Em Fast can answer this for me. I am trying to stretch my header, footer and css flyout menu to full browser width, just not sure best way to go about it or can it be done. Thanks
I couldn't figure it out so I went with a different flyout menu. No need to answer this anymore.Quote:
Originally Posted by spiflifkin
I am also having the issue of fly out CSS categories menu hiding behind the slide show. I've followed these suggestion and read a lot yet I cant get the categories to show above the slideshow.Quote:
Originally Posted by Get Em Fast
Please assist..
View page
I've solved this issue and it actually feels good...:clap:Quote:
Originally Posted by hardwiredtemplates
If anyone else stuck on the same boat this is what I added in my stylesheet.css file
#fadeshow1 {
z-index:0; }
this will put the fly out menu over the slideshow banners.
hardwire...................that solution will ONLY work if a persons' slideshows' <div>' name is "fadeshow1", which controls your slideshow..............NOT the menu, so the chances of that helping anybody is pretty slim............sorry. I know you had good intentions.................Quote:
Originally Posted by hardwiredtemplates
Now for YOUR particular case, it looks like (if you remove your above edit to your stylesheet.css) you need to edit your stylesheet_categories_menu.css, find this block of code:
and change your z-index to 1100. Sometimes you got to use higher numbers to get the menu on top of other elements. In your case..............the 1100 works just fine. Actually.............if you put in 1001, this moves the menus' flyouts' above your slider images, but below the sliders' captions. 1002 will get the menu's flyouts' above everything. So...............anywhere from 1002 on will work fine for you.Code:#nav-cat li {
display:block;
z-index:1;
position:relative;
border-top:solid 1px #FEFEFE;
border-bottom:solid 1px #EBEBEB;
}
Hope this helps.
Hi, does anyone know a solution to this issue please? I'm having the same trouble.Quote:
Originally Posted by nanos203
Thanks in advance....
Can someone tell me how to change the font color of the submenu items? I figured out how to change the font color of the top-level menu items, and figured out how to change the hover color of the submenu items... but I cant figure out how to change the regular non-hover link color for submenu items. Im using the latest version. Any help is appreciated. Thanks!
nevermind... got it figured out. id post how I did it if I could remember! Thanks all!Quote:
Originally Posted by lolwaut
try changing the color tag to the color you want in:
div#dropMenu ul.level2 li
div#dropMenu li a
div#dropMenu ul.level2 a
good luck
Hello Folks,
I have a new issue now. I have edited the CSS of my menu to my liking, with one exception. I have made my submenu links white on a gray background, while my top-level links are black on a white background. For some reason, any top-level item that has subcategories takes on the regular link color and hover link color OF THE submenus (which is white). This makes my top-level text white on a white background. I DONT want top-level menu items with subcategories to take on the color attributes of my submenu items. I am pulling my hair out here. Using version 1.3.9b.
Here is a link to my site: http://tinyurl.com/3uttrvu
You can see what I'm talking about on the first menu item.... make sure to hover over it.
Here is my customized stylesheet_categories_menu.css... I've made the font red on the submenu items, so you dont have to search too hard.
Any help is very much appreciated!Code:/*Version 1.3.9b*/
/*Cornflowerblue Menu CSS*/
#categoriescss.leftBoxContainer {
background: #fff;
border: 1px solid #E6E6E6;
width: 150px;
padding-bottom: 0px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#categoriescssHeading.leftBoxHeading {
margin-bottom: 0px;
}
#nav-cat {
width: 150px;
margin: 0 0 0 0px;
background-color: #fff;
font-weight:bold;
}
#nav-cat ul {
margin: 0;
padding: 0;
width: 150px;
background-color: #fff;
}
#nav-cat ul.level2 {background-color: #777777;}
#nav-cat ul.level3 {background-color: #6495ed;}
#nav-cat ul.level4 {background-color: #6495ed;}
#nav-cat ul.level5 {background-color: #6495ed;}
#nav-cat ul.level6 {background-color: #6495ed;}
#nav-cat li {
position: relative;
list-style: none;
margin: 0;
margin-top: 0px; /* change this to put space between buttons*/
border-bottom: 1px solid #d########3;
}
#nav-cat li li {
margin: 0; /* overrides the margin-top above */
}
#nav-cat li:hover {
z-index: 1000;
background-color: #777777;
}
#nav-cat li a:hover {
color: #fff;
}
#nav-cat li.submenu {
background: url(../images/arrows/arrow11.png) 99% 50% no-repeat;
background-color: #fff;
}
#nav-cat li.submenu:hover {
background: url(../images/arrows/arrow5.png) 99% 50% no-repeat;
}
#nav-cat li.submenu a:hover {
color: #87ceeb;
}
#nav-cat li.submenu a {
color: #fff;
}
#nav-cat li a {
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width: 100%; color: #000;
}
#nav-cat>ul a {
width: auto;
}
#nav-cat ul ul {
position: absolute;
top: 0;
left: 150px;
display: none;
}
#nav-cat ul.level1 li.submenu:hover ul.level2,
#nav-cat ul.level2 li.submenu:hover ul.level3,
#nav-cat ul.level3 li.submenu:hover ul.level4,
#nav-cat ul.level4 li.submenu:hover ul.level5,
#nav-cat ul.level5 li.submenu:hover ul.level6 {
display:block;
border-left: 2px solid #d########3;
}
The top level list item is named .submenu, so all links in that, including the top link, are affected. Change the rules toThis will apply only to subcategory links.Code:#nav-cat li.submenu ul a {
color: #fff;
}
#nav-cat li.submenu ul a:hover {
color: #87ceeb;
}
Also change the order of the rules so the hover state if active will override the base state.
Thanks so much! That did it! Very grateful!Quote:
Originally Posted by gjh42
Hello I'm trying to use this mod but i don't want all the themeing it has done i would just like to use my original theme and have the categories fly out how would i go about doing that?
This mod will have different structure and element classes and ids than whatever you have, so you will have to transfer the styling from your current elements to the new ones. You will have to let us see your site live to get specific advice on how to adapt your style rules.
Sure my site is http://perfectcarcorp.net/. I have the categories set up in a way on the left but I would like to use the second categories box on the left as my default since its perfectly themed. Can you help me with that?
Anybody?
The only real differences between the BetterCategories sidebox and the flyout one is the dividers between items and the bullets (and the font being a wee bit smaller). Do you want those things on the flyout menu? I think the flyout's current state of arrows is better for its functionality that the BC arrows would be.
Thats fine then could you help me with one last thing? The categories display weird on IE maybe somethings wrong in my code? Could you give it a look?
Code:/*Version 1.3.9b*/
/*Cornflowerblue Menu CSS*/
#categoriescss.leftBoxContainer {
background: #fff;
border: 1px solid #E6E6E6;
width: 150px;
padding-bottom: 0px;
-moz-border-radius: 4px;
border-radius: 4px;
}
#categoriescssHeading.leftBoxHeading {
margin-bottom: 0px;
}
#nav-cat {
width: 150px;
margin: 0 0 0px;
background-color: #fff;
font-size: 12px;
}
#nav-cat ul {
margin: 0;
padding: 0;
width: 150px;
background-color: #fff;
}
#nav-cat ul.level2 {background-color: #67cadf;}
#nav-cat ul.level3 {background-color: #67cadf;}
#nav-cat ul.level4 {background-color: #67cadf;}
#nav-cat ul.level5 {background-color: #67cadf;}
#nav-cat ul.level6 {background-color: #67cadf;}
#nav-cat li {
position: relative;
list-style: none;
margin: 0;
margin-top: 0px; /* change this to put space between buttons*/
border-bottom: 1px solid #d########3;
}
#nav-cat li li {
margin: 0; /* overrides the margin-top above */
}
#nav-cat li:hover {
z-index: 1000;
background-color: #67cadf;
}
#nav-cat li a:hover {
color: #000000;
}
#nav-cat li.submenu {
background: url(../images/arrows/arrow11.png) 99% 50% no-repeat;
}
#nav-cat li.submenu:hover {
background: url(../images/arrows/arrow5.png) 99% 50% no-repeat;
}
#nav-cat li.submenu ul a {
color: #000000;
}
#nav-cat li.submenu ul a:hover {
color: #fff;
}
#nav-cat li a {
display: block;
padding: 0.25em 0 0.25em 0.5em;
text-decoration: none;
width: 100%; color: #000;
}
#nav-cat>ul a {
width: auto;
}
#nav-cat ul ul {
position: absolute;
top: 0;
left: 150px;
display: none;
}
#nav-cat ul.level1 li.submenu:hover ul.level2,
#nav-cat ul.level2 li.submenu:hover ul.level3,
#nav-cat ul.level3 li.submenu:hover ul.level4,
#nav-cat ul.level4 li.submenu:hover ul.level5,
#nav-cat ul.level5 li.submenu:hover ul.level6 {
display:block;
border-left: 2px solid #d########3;
I don't know if it is causing problems, but there is an error here:This needs to be # with six digits/letters, like #ddaa33Code:#nav-cat li {
position: relative;
list-style: none;
margin: 0;
margin-top: 0px; /* change this to put space between buttons*/
border-bottom: 1px solid #d########3;
}
That did the trick thank you very much for your help!
Is it possible to have the final layer of a menu expanded into columns instead of having just one column in a scroll box?
For instance instead of having one scrolling column of 15 categories it can be split into 3 columns of 5 and also only show the scroll box when a preset limit of rows is exceeded?
Here is a site with what I have in mind http://www.rjettek.com/
I just installed zencart V1.5 and using the andover_modern template. I downloaded and installed the CSS flyout following the instructions and renamed the 1 Custom folder in the templates folder to andover_modern. when going to the admin/tools/layout box controller i do not see the warning about the new CSS file i did go and selected the template again, then went back into layout box controller and hit reset and got a message at the top saying "Successfully Reset all box settings to the Default settings for Template: andover_modern" when i go to my home page the flyout does not appear and i have tried to change some settings in the layout box controller but the flyout will not show up. Is it possible the flyout is not compatible with version 1.5 or am i missing something?
Thanks in advance :unsure:
Interesting, I just tried to install the "CSS Horizontal Dropdown Menu With jquery" and that does work"
Well i just reinstalled a fresh copy of Zencart and the only thing i am trying is the Vertical flyout but it won't show, I did read a post that went like this "In TOOLS > LAYOUT BOXES CONTROLLER, is "sideboxes/pure_orange/categories_css.php" set to "ON"?
I use the classic template but no i don't have any line in the layout box controller that says that. Am i missing something here ?
They usually say no news is good news but in this case it isn't :no:
Nobody in Zen land heve any idea what i am missing or doing wrong here ? Has anybody used the flyout with V1.5 at all ?
I'll give myself the good news, got it going after a modification
What modification did you need to do? If a change is needed, other people will want to know this.
Sorry, wrong choice of words, not really a modification
Hi
How could I set this up so the menu displays on the main page only?
My questions did originate from another thread on the forum but in honesty it is more suitable to post it here.
Great add-on by the way! :smartalec:
Whatever it was you did, Glenn is right other people may benefit form the same information..Quote:
Originally Posted by windsurfer
Dunno if this has been posted here, but I thought I'd post this in case it is needed/asked about.
http://www.zen-cart.com/forum/showpo...&postcount=359
Using hideCategories with CSS Flyout Menu
Is it possible to change the font colors for the level2, level3 in the flyout ?
Thanks
Yes it is. Seeing your implementation live is the best way for us to advise on the correct selectors to use. You can do it yourself if you use the Firefox Web Developer or Firebug extensions (or possibly other browsers' developer tools).
Hi gjh42
Thanks for the response.
I use the internet explorer developer tool but haven't been able to find where to edit the font color and size, i did manage to change the back ground colors. Any further advise. I am not live yet.
In the one foray I made into the IE9 developer tools, I did not see a lot of the important features I am used to in Firefox. IE9 has improved greatly in standards compliance and behavior from previous versions, but it still is not up to the same standards as Firefox and some others. You would be best off using a compliant browser like Firefox for development, and testing along the way in IE. Install the Firefox extensions I mentioned and see what you can do:)
Firebug in particular might help you here, with its ability to identify all style rules that apply to a given element, including ones that are overridden by others.
To use CSS flyout in conjunction with the hide category mod, you must edit /includes/classes/categories_ul_generator.phpQuote:
Originally Posted by nanos203
Find this line: where c.categories_id = cd.categories_id
Add this below it: and c.categories_id NOT IN(20, 22)
In the above example, this will hide category IDs 20 and 22 from the CSS flyout menu. Change it according to your needs.
Hope this helped someone!
This might work in YOUR store if your hidden category IDs are 20 and 22, but your fix is NOT the best solution..Quote:
Originally Posted by lolwaut
If you look a few posts up from here on this same page, you'll see I posted a link to the correct way to modify the menu to work with hideCategories.. The solution I posted doesn't require you to know which category IDs are hidden. this way if you add more hidden categories, you not have to edit the menu again..
(I also made it super easy to find using the thread search tools by "embedding" the words "Using hideCategories with CSS Flyout Menu" in the post, and I even changed the post subject to "Using hideCategories with CSS Flyout Menu" for good measure..:wink: This post I reference is from the hideCategories support thread)
Definitely didn't see that post. My way will work, but your way is definitely much cleaner. I've adopted your method. Thanks!Quote:
Originally Posted by DivaVocals
You're welcome.. Not my method.. just sharing what another community member shared..:smile: and yes your method would work.. until you added another hidden category and had to make that edit again.. :smile: Now you are free to add as many hidden categories as you like..:smile:Quote:
Originally Posted by lolwaut
First of all thanx a lot for this great Mod, i've installed it and works very well. I customize styles and this is the result :
http://www.fantozzi.net/arredoshop/ . My site is still offline, i'd like to customize all.
Anyway, i need help with this mod, i would like that the code of menu would be like that :
Is it possible to adapt your code ??Code:<div id="categoriescss" class="leftBoxContainer">
<h3 class="EXPANDABLE">CAT1 with SubCat</h3>
<ul class="SOMETHING 2">
<li>SUBCAT 11</li><li>SUBCAT 12</li><li>SUBCAT 13</li>
</ul>
<h3 class="EXPANDABLE">CAT2 with SubCat</h3>
<ul class="SOMETHING 2">
<li>SUBCAT 21</li><li>SUBCAT 22</li><li>SUBCAT 3</li>
</ul>
<h3 class="NO EXPANDABLE" style="cursor: default">CAT3 no subcat</h3>
Thanx a lot in advance.
Regards.
Franesco :clap:
It's open source, so yes you are free to take a copy of the mod and change its details as you like.
You can probably get it to behave as posted, but it may take a lot of recoding to eliminate the top <ul> etc. Is there any real difference you want beside the <h3> tags for top cats? And what is the purpose behind making these changes?
Thanx for your reply .. the purpose is to change thevisualization to make an accordion menu .. but maybe o'v got no skill to adapt your code to this .. :)
It's not my code, and an accordion menu takes javascript if you want it to work without refreshing the page. Get Em Fast, who wrote the current version of this mod, may be able to do it if he wants to take the time.
Thanx anyway for your response !!! :smile:
Wow.. Was that an attempt at humor or an insult??:ohmy:Quote:
Originally Posted by cisi
Or an english error / mistake ... i wanted to say that ME, maybe don't know how to customize code for my intent :)
Ahhhhhhhhhhhhhhhhhhhhh okay.. I understand now..:laugh::yes:Quote:
Originally Posted by cisi