V2.6 has been submitted, and until it is approved you can download it here.
I have also made a screenshot showing the features as applied to the ZC demo products.
Printable View
V2.6 has been submitted, and until it is approved you can download it here.
I have also made a screenshot showing the features as applied to the ZC demo products.
If you don't anticipate a need to move category groups around or style them differently from each other, you can stick with v2.5.
The id that allows the individual control is the only real difference.
Categories Dressing v2.6 is now available in Free Addons.
I will be interested to see what people do on real websites with the new styling possibilities built in to it. If you have any questions about achieving a particular look, please ask.
Just for fun, here is an example of putting two "extra" categories boxes at the top of the center column, achieved with only this CSS:Code:#navColumnOneWrapper {position: relative;}
.centerColumn {margin-top: 37em;}
ul#catGroup3 {
border: 1px solid #bd6699;
background: #bbeeff;
position: absolute;
width:16em;
height: 34em;
left: 16em;
top: 0.3em;
}
ul#catGroup48 {
border: 1px solid #bd6699;
background: #bbeeff;
position: absolute;
width:16em;
height: 34em;
left: 35em;
top: 0.3em;
}
hey Glenn.. awesome addon you have there..
just wondering, before i fiddle and break code..
is there an easy way to style 3 and 4 deep?
I donwloaded this add-on and installed and I'm feeling really stupid right about now because I can't figure out how to get a divider line to show:unsure:
Help :blush:
These rules style the first level subcats:To style deeper subcats differently, duplicate as required and add another "ul" to the selector, like:Code:#categories ul ul {/*subcategories*/
list-style: none;
background: #ffeecc;
border: none;
margin: 0 0 0.4em 0;
padding: 0 0 0 1.3em;
}
#categories ul ul a {/*subcategories*/
display: list-item;
list-style: circle inside url(../images/bullet1.gif);/*change to list-style: none; to remove bullet*/
background: #ffddbb;
border: none;
margin: 0;
padding: 0;
}
#categories ul ul ul a {
For a divider above a category, edit /includes/languages/english/extra_definitions/your_template/categories_dressing_defines.php, and add a define for that category (say it is cPath 23):All of your setup for this mod will be in this file, and in the stylesheet (plus creating any images required).PHP Code:define ('CAT_BOX_HEADING_23','0|1||');//divider only - style 1
Take the time to read through the readme.html included with the package.
Ok, that's what I was doing, just the divider code, but it never shows up. Maybe its my template (Pretty In Pink)?
Maybe I can rework a few things and not even need it.
Thanks!
Is it possible ..with or without this... for Sub cats to close when another opens?
For example :
I have Top Cats :
By Genre
By Author
Under Genre there is a long list and under Author there is A-Z......
If someone has the Genre open and they decide to click on Author, I hate for both subs lists to stay open, I would like for Genre to close and Author open...make sense?
I have made up another example, with more real-world applicability: moving the "sale" categories in the demo install from the sidebox to the top of the center column.
All of the modification from the stock Cat Dressing setup is as follows:
categories_dressing_defines.php(and commenting out the original define for cat 48)PHP Code:define ('CAT_BOX_HEADING_48','1|0||');//new list - no headings
define ('CAT_BOX_HEADING_49','1|0||');//new list - no headings
define ('CAT_BOX_HEADING_50','1|0||');//new list - no headings
define ('CAT_BOX_HEADING_53','1|2||');//divider only - style 2
//^--(modified to start new group, so it doesn't fall under cat 50 group)
stylesheet_categories_dressing.cssCode:#navColumnOneWrapper {position: relative;}
.centerColumn {margin-top: 11em;}
ul#catGroup48 {
border: 1px solid #bd6699;
border-width: 1px 0 1px 1px;
padding: 3px 0 0 2px;
background: #bbeeff;
position: absolute;
width: 142px;
height: 9em;
left: 157px;
top: 0.3em;
}
ul#catGroup49 {
border: 1px solid #bd6699;
border-width: 1px 0;
padding: 3px 0 0 2px;
background: #bbeeff;
position: absolute;
width: 142px;
height: 9em;
left: 299px;
top: 0.3em;
}
ul#catGroup50 {
border: 1px solid #bd6699;
border-width: 1px 1px 1px 0;
padding: 3px 0 0 2px;
background: #bbeeff;
position: absolute;
width: 142px;
height: 9em;
left: 441px;
top: 0.3em;
}
Do you have an expanded categories mod installed? That would be the only way you could have subcats of two different top cats open at the same time. It would also explain why the define is not working, because expanded cat mods use completely different versions of the files, and most likely tpl_categories.php is not even being called.
No, I don't know what's going on... probably just me losing my mind. Its working the right way now. I'm getting my self so confused because I spent half the day installing the Product Book mod only to not be able to get it to work and had to uninstall it! Now I'm wishing I had a few of the things in that mod that worked back again ....lol :wacko::no:Quote:
Originally Posted by gjh42
I should rephrase that... it wasn't that i couldn't get the mod to work, it did, I guess, it just didn't make sense to me and how I needed it to work and I don't think anyone is around to help with it.
Re the demo above in post 510, the work also included creating and saving the images (catimg48.gif, catimg48.gif, catimg48.gif) in /your_template/buttons/english/.
Product Book is a big mod which touches a lot of files and the database, so it might be that there is still some effect from it.
First post anywhere ever!
Steadily working through Zen Cart setting up my first website. No previous CSS or PHP experience but trying hard.
I'm using Categories_Dressing to create a simple sidebox categories menu using images . I have/want six categories (no sub-categories as yet) each using three separate images: link, hover and visited, as background images as partly described in the 'To display images in place of selected category names' section of the readme html.
So far I have managed to get the link and hover working by just editing 'stylesheet_categories_dressing.css ' under the section /*example for individual category as bg image*/ and substituting the following code, basically to correspond with the my categories' cPath (extract is of the first category only):
the images are located as follows:Code:#categories li a.catBg64 {
background-image: url(../images/catbg64.gif);
background-repeat:no-repeat;
height: 30px;
}
#categories li a.catBg64:hover {
background-image: url(../images/catbg64hover.gif);
background-repeat:no-repeat;
}
catbg64.gif = /includes/templates/your_template/buttons/english/
catbg64.gif & catbg64hover.gif = /includes/templates/your_template/images/
This didn't seem to match the readme instructions but was the only way I could get it to work.
Assuming that all's fine so far I need to get the visited link image working. Have created 'catbg64visited.gif' and planned to add the following code to that shown above:
and add the gif image to either/both of the directories I mentioned above, in the vain attempt that it might work.Code:#categories li a.catBg64:visited {
background-image: url(../images/catbg64visited.gif);
background-repeat:no-repeat;
}
A lot of faffing around with position of code and location of images and I never get exactly what I want - which is one image for 'normal' viewing, a second for mouse hover and a third for a visited link.
It would be great if someone could point me in the right direction.
Note: I've (miraculously) created a test server on my pc so won't be able to send a link.
Zen Cart version: 1.3.8a
Categories dressing version: v2.6
Looks like you caught a typo in the readme. In the new version I switched the code to look in /buttons/english/ instead of in /images/, to allow for multiple languages, and missed changing those bits. it currently saysbut should sayCode:Add this to your stylesheet_categories_dressing.css for each category cPath where you wish to use a background image:
#categories li a.catBg25 {
background-image: url(../images/catbg25.gif);
height: 30px;
}
#categories li a.catBg25:hover {
background-image: url(../images/catbg25hover.gif);
}
You are correct in the syntax for using a visited image. It should beCode:Add this to your stylesheet_categories_dressing.css for each category cPath where you wish to use a background image:
#categories li a.catBg25 {
background-image: url(../buttons/english/catbg25.gif);
height: 30px;
}
#categories li a.catBg25:hover {
background-image: url(../buttons/english/catbg25hover.gif);
}
I'll be interested to see your site when you get it on a live server.Code:#categories li a.catBg25:visited {
background-image: url(../buttons/english/catbg25visited.gif);
}
Can't tell you how good it was to hear there was a typo in the readme. I thought I'd lost it even before I had it!?
I've implemented the changes you highlighted and it now does what it was supposed to. Many thanks.
I now have the following issues to address:
Clicking on a category takes me to the appropriate page with the button in the correct visited colour - great. However the hover attribute on this button is still active, which I don't want. Is there anyway to 'disable' the hover on the visited button once in the linked page.
Also, I must need to 'reset' the button attributes in some way, as each button stays 'visited' even when another category button is clicked. Likewise, on moving to the hoimepage,contact ,about us etc they stay 'visited' The only way to reset is by clearing the IE7 cache.
I'm sure that these are fairly fundamental CSS questions and apologies if they move outside this posts remit. If anyone could suggest a way forward I'm sure I can take it from there.
Cheers
Zen Cart version: 1.3.8a
Categories dressing version: v2.6
"Visited" is a CSS/browser/cache property which is in effect if a link has been "recently" visited. I don't know of a way to affect how long this is effective, and it was never meant to show just the last link you clicked.
These stylesheet rules will affect the currently selected category and its parents:The selectors for the category with products that you are currently looking at are #categories li a.cat-selected-text and #categories li a.cat-selected. You could apply the "visited" background image using those in the selector list:Code:/*change bullet when a category w/o bg image is open to subs:*/
#categories li a.cat-parent-text {
list-style: square inside url(../images/bullet2.gif);/*change to list-style: none; to remove bullet*/
}
/*change bullet when a category w/o bg image is open to products:*/
#categories li a.cat-selected-text {
list-style: square inside url(../images/bullet3.gif);/*change to list-style: none; to remove bullet*/
}
/*disable bullet for cats w/ image or bg image*/
#categories li a.cat-parent, #categories li a.cat-selected, #categories li a.cat-not-selected {
list-style: none;
display: block;/*fix IE6 margin-left bug*/
}
though I believe this will not work in IE6 - it can't handle two classes applied to the same element and will ignore the entire rule.Code:#categories li a.cat-selected.catBg25 {
background-image: url(../buttons/english/catbg25visited.gif);
}
Ok, thank you very much for your help Glenn, I'll reevaluate what I'm trying to achieve and may scrub the visited link idea I had in mind.
Cheers again
Simon
You can probably achieve what you want in all browsers but IE6; IE6 users would get the normal category image instead of the "current" image. It's not like they would be losing functionality, only a nice design touch. They most likely wouldn't even know they were missing something.
Hi,
I have a menu with cats and subcats
example:
cat1
subcat1a
subcat1b
subcat1c
cat2
subcat2a
subcat2b
subcat2c
cat3
subcat3a
subcat3b
subcat3c
etc
I want to have an extra space/seperator or div between the last subcat and the categorie under it.
So an extra space in this example between subcat1c - cat2 and subcat2c - cat3 and subcat3c - etc
Where can I insert an seperator, div or <br />
It is possible to insert an seperator above a category and you have to asign them with their ids. But is there a simple hack where you can insert the seperator under every last subcat?
This would take a bit of work to do in the code, but it turns out to be dead simple to accomplish with CSS. You still can't insert the separator "under" the last subcat in a set, but you can give a margin-top (or whatever you want) only to categories that follow a set of subcats. (You can use
border-top: 1px solid #aabbcc;
to put a divider in this location.)
This will give the extra space only to top categories that follow subcats:This will give the extra space to any level category that follows subcats:Code:#categories ul+li.cat-top {margin-top: 2.0em;}
The only way you can have an <li> element directly following (not just inside) a <ul> element is for there to be a list of subcats just ahead of it.Code:#categories ul+li {margin-top: 2.0em;}
Note that this will not work for IE6 because it does not understand the "adjacent selectors" relationship. If you can live with people using this out-of-date browser not seeing the full esthetic effect of your design, you're golden.
Sorry I would like to understand that, but I do not excatly.Quote:
Originally Posted by gjh42
I understand it is not possible to that I can't insert the separator "under" the last subcat in a set.
So I must make a statement like when there are subcats, give a margin-top: 2em; to the next category-top
But where and how can I do this?
It is okay that it won't work for the old browsers (ie6 and earlier) .
A liitle code in here
Need that for example, but not above, but under itCode:switch ($current_path) {
case '1_10': //replace number with your desired cPath
//$content .= '<hr class="catBoxDivider" />' . "\n"; // to add divider uncomment this line
$content .= "\n" . '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') . '</span>':'</span>' . $disp_block_head);
break;
}
problem solved to insert this code above
Code:$current_path = str_replace("cPath=","",$box_categories_array[$i]['path']);
I wonder if anyone could help me with this mod. I installed it and played with the code for a few hours but I was getting nowhere.
What I'm trying to achieve is an additional categories box which will display a new set of categories which I will create called, "SIZES"...
These size categories must not appear in the tree of the main categories, but rather in a new sidebox below the main categories.
My goal is to have all my products set as linked products so that they will appear in the size categories should someone prefer to browse by size as opposed to browse by category.
I hope I'm making sense :-)
If anyone could tell me where I'm going wrong I'd be eternally grateful.
I installed this mod and no matter what I did to the stylesheet_categories_dressing.css or the categories_dressing_defines.php files I could not get the category headings to move down and below "all products"
If you look at this thread then I've outlined by way of pictures what I'm trying to achieve.
Anyone, point me in the right direction????
Thanks in advance....
Raimond -
The code you show is from the older version (v2.2) of Categories Dressing, and will most likely not work in the latest version (v2.6). What version do you have? The comments at the top of tpl_categories.php will say this. If you have the older version, you need to replace it with the new version for this job.
If you are not understanding the full explanation, it's ok, you don't need to. Just add this to the bottom of your stylesheet_categories_dressing.css:Code:#categories ul+li.cat-top {
margin-top: 1.0em;
border-top: 1px solid #aabbcc;
}
Hi gjh42,Quote:
Originally Posted by gjh42
problem solved to insert this code above
Code:
$current_path = str_replace("cPath=","",$box_categories_array[$i]['path']);
Limelites -
There are limits to the ways that category groups can move and still remain dynamic (opening to show subcategories). Any but the most straightforward of these require CSS experience and knowledge to apply correctly.
To get the Size group to appear below the all/featured/new links, you will have to use relative or absolute positioning. Position: absolute; may be the best route. If the designers box will vary in size, that cannot be accounted for in the positioning. You would either have to leave a gap for the designers box to open into or run the risk of the two boxes overlapping. I will first describe a method that will put the sizes above the designers. With a little extra work, it may be possible to have the sizes fit correctly below the designers, depending on your conditions.
Give the size categories sort orders in admin that are higher than any other categories, so they appear just above the links. Give the UK 3 category a heading of "Sizes" and a "new group" flag, in the defines.
Now style that group id with
position: absolute;
bottom: -25.0em;
and add
#categories {margin-bottom: 15.0em;}
The links will move neatly up into the space the sizes used to occupy, and there will be a space held open below the categories box. The sizes group will show with its heading below the categories box, approximately in the space held open. You will need to adjust these numbers to make the parts fit correctly. Start on this, and post back when you have a group defined; I can't test anything for you without that group.
Raimond, I don't really get how the code you posted could work to give the results you asked for, but if you are happy, so am I :)
In the original tpl_categories.php I inserted afterQuote:
Originally Posted by gjh42
default:
$new_style = 'category-products';
}
Code:switch ($current_path) {
case '1_10': //replace number with your desired cPath
case '3_14': //replace number with your desired cPath
$content .= "\n" . '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') . '</span>':' </span>' . $disp_block_head);
break;
}
Are categories 1_10 and 3_14 the categories that follow the subcat lists? (Obviously they are not top categories.) Are they the last subcategories in their respective lists? If that is the case, the code as you posted it would put a "heading" (space) above the subcat.
If it does what you want, good, but it needs to be hard-coded for each new situation. The CSS will automatically work for all situations with no further changes.
yes indeed, these are the last subcategories in the categories...and in this case it put a extra div under the sucat. In the attachement i inserted the modified tpl_categories.php...maybe is this more helpful.Quote:
Originally Posted by gjh42
I am happy it works for me :D
OK, it works because when the switch is processed, $current_path is still set on the last category that was processed. Yes, it will work correctly for every subcategory you hard-code into the switch.
Hallo, sorry for my question... I am begginer...
I install Categories Dressing and I need change a look. In stylesheet_categories_dressing.css I change global settings like colors for all categories. It is OK. Now I need change one category only. For example: /index.php?main_page=index&cPath=2.
In stylesheet_categories_dressing.css I have:
ul#catGroup2 {
border: 1px solid #bd6699;
background: #bbeeff;
position: relative;
left: -1.3em;
top: 0.2em;
}
In categories_dressing_defines.php I have:
define ('CAT_BOX_HEADING_2','1|0|aaa.gif|');
But I see nothing. All is the same. What I do wrong? I use ZenCart 1.3.8 in czech lanuage. Thank you for reply.
The information you posted looks ok, so I will have to see your site live to tell what is wrong. Please post a link.
Thank you for reply. URL is here: http://sexshoponline.cz/obchod/index...=index&cPath=2
Now I need to change one category only. I need to add picture in front text. For example: picture + space + text. Is it possible? I don't know if I have right settings...
Whatever I change in CSS I see nothing...
You are usingCode:/*example for individual category as bg image*/
#categories li a.catBg2 {
background-image: url(../images/zacatek.gif);
height: 30px;
}
#categories li a.catBg2:hover {
background-image: url(../images/catbg25hover.gif);
}
/*example for custom individual category styling*/
#categories li.promuze a {
border-top: 3px dotted #112233;
background-color: #aabbff;
color: #000000;
padding: 1em 0em;
}
.promuze {
border-top: 1px dotted #112233;
color: #000000;
background-image: url(../images/zacatek.gif);
}
ul#catGroup2 {
background-image: url(../images/zacatek.gif);
background-repeat: no-repeat;
}
background-image: url(../images/zacatek.gif);
but the code will not look for zacatek.gif, and will never display this set of images.
You need to name the image catbg2.gif, and then see what shows up. This will only work to replace the text with a background image, not add a background image to the text.
It appears that you have tried several different methods to get the results you want. Do you want a unique image for category 2 (promuze)? Or will the image be the same for all of the top categories?
For a unique image at the left of the name for one category, do the tpl_categories.php example like thisand in the stylesheet like this example: #categories li.cat-holiday a {}PHP Code:case ($box_categories_array[$i]['path'] == 'cPath=2'):
$new_style = 'promuze';
break;
Code:#categories li.cat-promuze a {
background: #aabbff url(../images/zacatek.gif) no-repeat left center;
color: #000000;
padding: 1em 0em 1em 3.5em;/*this moves the text away from the left to leave space for the image*/
}
I am trying it but still nothing... Is it possible to send you PM with FTP, please? Now I don't know what can I do... I am wierdo... I know...
I need menu like this: http://st.fri.uniza.sk/~chudoba/sexshop07.jpg
Or I can send you necesary files like CSS and PHP.
In my opinion HTML page can't see style #categories li.cat-promuze a
Here is a part of HTML code:
<div id="categoriesContent" class="sideBoxContent">
<a class="promuze" href="http://sexshoponline.cz/obchod/index.php?main_page=index&cPath=2"><span class="category-subs-parent">PRO MUŽE</span></a><br />
<a class="category-products" href="http://sexshoponline.cz/obchod/index.php?main_page=index&cPath=2_10">Afrodisiaka a Feromony</a><br />
The picture of the categories menu you want is what I really needed to give the right advice.
The "$new_style = 'promuze';" code is one way to get what you want for the categories, but it requires a separate "case" for every category and subcategory.
You have been working hard - I see you now have most of the top and subcategories done.
The most efficient approach would be to use category groups, so you can easily get the different bullets on the subcategories, but since you are so close with the method you are using, keep going as you are.
Thank you for your advise :-) Can you help me with one thing? I need decrease high between categories. Where can I set this?
Agent_KGB -
"one more question... how do i remove pictures (arrows) from showing up in front of the category link? "
These are the list-style markers (bullet1.gif, etc.), and to eliminate them, change the
list-style: disc inside url(../images/bullet1.gif);
to
list-style: none;
as the comments in stylesheet_categories_dressing.css describe.
There are a couple of places where you have unnecessary padding:padding: 0.8em 0em 1em 3.5em;Code:#categories li.cat-promuze a {
background: url(http://www.sexsho ponline.cz/obchod/includes/templates/classic/images/muzi.gif) no-repeat left center;
color: #FFFFFF;
text-align: left;
padding: 0.8em 0em 1em 3.5em;/*this moves the text away from the left to leave space for the image*/
}
#categories li.cat-afrodisiaka a {
background: url(http://www.sexshopo nline.cz/obchod/includes/templates/classic/images/muzi2.gif) no-repeat left center;
color: #FFFFFF;
text-align: left;
padding: 0.8em 0em 1em 3.5em;/*this moves the text away from the left to leave space for the image*/
}
This gives 0.8em on top and 1em on bottom. Reduce these as desired. If the background image loses the gradient line, then you can use background-position to fix that.
It looks like the line is at the bottom of the background; if so,
background-position: center bottom;
should make the bottom of the image line up with the bottom edge of the category.
Also, instead of this
url(http://www.sexshopon line.cz/obchod/...ages/muzi2.gif)
you should use this
url(../images/muzi2.gif)
It does the same thing, and if you make a test copy of your site elsewhere (like on your local pc), it will still work there. The original version will only work for the location where your shop is now.
I have a big problem, I have my categories menu with non-linked headings in a specific place and everything is fine until I sometimes add another category with a non linked heading and this then replaces a different category with a white box with the image name "pixel_trans.gif". What makes it more confusing is after adding this extra heading in the categories_dressing_defines.php file it is not reversible if I take the extra line of code back out again. The only way around this that I have found is to make a complete new category and add and link all the products back into it.
Surely this is a bug somewhere and can be fixed?
I will need to see your site to begin to diagnose your problem. Once I have a look at its current state, I will want you to reproduce the problem if you can, so I can see it in "action".
Thanks for your reply if you go toQuote:
Originally Posted by gjh42
http://www.kirkgateflowers.co.uk
and it's the category £30-£40 between the Under £30 and Over £40 categories.
This indicates that you have an image /buttons/english/catbg8.gif. If you do not intend to have a background image for this category, you need to eliminate this image from that folder. (Even though the bg image exists, it will not show unless you make a stylesheet declaration for it. This is a function that the code cannot automate.) Make sure that all unused images are cleared out of that folder.HTML Code:<li class="cat-top"><a class="cat-not-selected catBg8" href="http://kirkgateflowers.co.uk/index.php?main_page=index&cPath=8"><img src="includes/templates/template_default/images/pixel_trans.gif" alt="" width="100%" height="100%" title="£30 - £40" /></a></li>
You have used the "catbg#.gif" format for your heading image names. While the heading code accepts that with no problems, that kind of filename triggers a category name to be replaced if the filename matches the category cPath.
You should use the "cathead#.gif" format suggested in the readme, or something else not related to the dedicated Categories Dressing conventions.
I think I have cracked it now, the images were called catbg8.gif etc and this seem to conflict with the category number 8 so I have renamed them all and deleted the images off the server and all seem fine.
Thanks for your help anyway
Matt
Good to see that you figured out the problem and the solution by yourself. As you have discovered, any naming scheme that doesn't interfere with the category id system will work fine.
That's a nice-looking site you have, very clean and easy to use.
I am trying something along these lines but not as complex. I simply want the top level categories to appear in bold type font so that they stand out a little more.Quote:
Originally Posted by gjh42
I have tried to follow what appears simple code:
tpl_categories.php:
stylesheet_categories_dressing.css:PHP Code:case ($box_categories_array[$i]['path'] == 'cPath=1'):
$new_style = 'holiday';
break;
I would of course manipulate the css to simply bold type case if I could get it to work at all. When I upload this content it seems to have no effect whatsoever.PHP Code:/*example for custom individual category styling*/
#categories li.cat-holiday a {
border-top: 3px dotted #112233;
background-color: #aabbff;
color: #112233;
padding: 1em 0em;
}
Can anyone see where I'm going wrong?
You're using a sledgehammer to crack a nut.
To make top categories bold font, if you are using Categories Dressing, add to the generic stylesheet rulesThe "bold" sets the weight to bold for all categories, and the "normal" sets it back to normal for subcategories.Code:
#categories ul a {/*top categories*/
display: list-item;
list-style: disc inside url(../images/bullet1.gif);/*change to list-style: none; to remove bullet*/
background: no-repeat;
border: none;
margin: 0;
padding: 0;
font-weight: bold;
}
#categories ul ul {/*subcategory lists*/
list-style: none;
background: #ffeecc;
border: none;
margin: 0 0 0.4em 0;
padding: 0 0 0 1.3em;
}
#categories ul ul a {/*subcategories*/
display: list-item;
list-style: circle inside url(../images/bullet1.gif);/*change to list-style: none; to remove bullet*/
background: #ffddbb;
border: none;
margin: 0;
padding: 0;
font-weight: normal;
}
Another way to do the same thing would be to add a new ruleCode:#categories li.cat-top a {
font-weight: bold;
}
I like that expression, a sledgehammer to break a nut :-)
I've tried what you suggest by simply copying and pasting the code you supplied in the stylesheet_categories_dressing.css file (I pasted ALL 4 blocks of code). Nothing, nada, nichts.
I even tried to paste the code into my main stylesheet.css file just to see what happened (nothing)
It's really weird it's as if the stylesheet is having no effect whatsover on the categories dressing sidebox.
ahhhhhh... do you think maybe the stylesheet is having ZERO control over the categories dressing because I'm using it with ch_categories mod combined?
UPDATE: That's exactly what's happening. When I switch on the original categories sidebox and replace the expanded categories sidebox, then the stylesheet does exactly what it's supposed to.
Is there a way to point the stylesheet at the expanded categories sidebox instead of the original categories sidebox?
glenn hi
back on post #75 you explain how to hide a categorie but i need to hide 3 categories and i cant figure out :(
anybody??
thank you
Limelites -
Unfortunately, the Cat Dressing stylesheet will do nothing for the expanded categories sidebox, because most of the tags are different, and there are elements in each mod that do not exist in the other one. I am thinking about how to combine Cat Dressing with the Simple Categories Tree mod, but don't expect it any time soon.
V2.0 may be easier to get this functionality from. (SCT can definitely do it, but I'm not sure how much of it will transfer to v2.0.)
Just repeat the test for the other two cPaths:If using Cat Dressing, you can replacePHP Code:if (($box_categories_array[$i]['path'] == 'cPath=23') or ($box_categories_array[$i]['path'] == 'cPath=42') or ($box_categories_array[$i]['path'] == 'cPath=57') or 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), or category 23, 42, 57
} else {
($box_categories_array[$i]['path'] == 'cPath=23')
with
($current_path == '23')
Replace the 23 with the correct cPath for your category so it reads (say) 'cPath=4_37'.
Hi Glen,
Fortunately, catimg1.gif, catimg2.gif, catimg.26.gif, etc., etc., are still recognised by the expanded categories mod. This was my workaround.... basically uploaded bold font gifs to my buttons folder.
hi
i try that but im only see my header nothing else i have this
in my test site
thanksQuote:
}
$current_path = str_replace("cPath=","",$box_categories_array[$i]['path']);
if (($current_path == '31') or 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), or category 23, 42, 57
} else {
if (($current_path == '101') or 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), or category 23, 42, 57
} else {
// categories dressing - add divider above specified cats
if(in_array($current_path, explode(",",'3,22,21_56'))) { //replace numbers with your cat ids separated by commas
$content .= '<hr class="catBoxDivider" />' . "\n";
}
}
I down loaded the Categories Dressing, there was no readme files or instructions, all was there are an includes folder. Did I download the wrong file. my site www. currysgiftshop.com
Where did you download it from? I just checked to be sure, and the readme is in the zip that downloads from Free Addons: readme2_6.html.
I'm really finding the readme document for this mod really hard to understand. I have it installed but I haven't been able to do anything with it. I guess my question is how do I get rid of the default settings that the mod creates when you install it. I managed to delete the bullets, but can anytone tell me how to delete the two border boxes the mod creates around your categories as well as the line underneath it? I basically just want my categories to look like they did before I installed the mod.
You're not reading the readme as a text document, are you? It is coded in HTML, and would be hard to read in plaintext. Open it in a browser window.
Each section of the readme has a boldface note about how to disable its feature. If you comment out all of the define statements you don't specifically want in categories_dressing_defines.php, the borders and other effects will go away.
I like to use this mod and I've red the readme over and over and a lot of pages here about this thread. I'm not an expert and somehow I can't figure out how to use it excactly.
I only want to use the image-hover function, nothing else. I managed to use a catimg#.gif so instead of text it's shows a image. But when I use a catbg#.gif and a catbg#hover.gif I get a blanc image.
I think I don't understand how to use the css and/or php files for this mod since there are many ways to use/adapt this.
Sorry for asking, but I'm on this for two days now and I've red a lot about it but still I don't get it. Hope someone can provide me the information I need for just this image-hover function.
Forgive me for asking, thanks in advance for answering...:blush:
If you have catimg#.gif for a category, that will be found and used before the code ever looks for a catbg#.gif.
If you want to use the bg image hover function, eliminate the catimg#.gifs.
There is only one way to use the image hover, described in the readme. If you need more assistance, post a link so I can see what you have.
Thanks for answering. While looking at it once more I figured out I made a mistake... Guess I've been to long in front of the screen :lamo: Simply used the wrong directory for the images :frusty:
Hi Glen,
Thanks for all your advice so far. There's just one tiny little annoyance that I wonder if you could solve with me?
Can you determine from the source code on dystynction.com what it is that's causing the excessive gap between the top level categories and the sub categories?
Thanks...
Is there a way to specify to have all top categories expanded by default, without having to use any external mods?
Installed succesfull! buttons/hovers are working fine. Now I opened the site in IE and found that there are white spaces between the buttons. Looked in margins en paddings but I couldn't find the problem or solve this. Maybe someone knows how to hanlde?
See image to see what I mean.
Limelites -
It looks like you have managed to apply Categories Dressing to fragfutter's Uncollapsed Categories Tree. Is that the mod you have? This is very interesting; I will have to study that mod to determine if they can just be packaged together.
The reason that you are having trouble applying some rules is that UCT has a box id of #chcategories, while some rules in stylesheet_categories_dressing.css refer to #categories. Add "ch" to each of those, and they will take effect. You will see a number of odd stylings which you will want to modify to suit your taste.
Dimmyr -
No, you need some mod to expand the categories. Stock Zen Cart does not have that ability. You can install a prebuilt mod, or write one yourself.
Gerjan -
It will require seeing and tweaking your site live to figure out the cause of this.
Ok, but I have installed it local. Does it help if I post a view of the source? Otherwise I leave it this way for now and will return when it is online. Thanks again, I like this mod very much.
Debugging IE problems does not always mean finding errors in the coding, so it may not help to post the source. It will definitely be more possible to diagnose live.
Hi Glen, thanks for responding and yes, it is indeed Fragfutter's Uncollapsed Categories Mod I'm using. I have managed to apply a 'limited' dressing to UCT using a combination of your mod's stylesheet_categories_dressing.css and the main stylesheet.css. Hence, my use of the word 'limited'.Quote:
Originally Posted by gjh42
I'm sure you've been asked a hundred times by UCT users why your stylesheet isn't dressing their UCT menu and so I'm glad that you find my limited success so far, 'interesting'. It would be fantastic if you ever did find time to study the UCT mod and tweak your dressing mod to style UCT and you could then ship them both together. UCT is a very popular contribution, as is your cat dressing mod. It's a shame they don't work in harmony.
If indeed it's just a case of adding 'ch' to all the #categories rules then it should be quite easy to put together an update? I'm going to experiment with this a little myself as there are a few things about my menu that I'd have changed if I didn't have to 'make do'. I'll post back if I have any success.
I notice that Gerjan is also having one of my issues. The white gap between menu items in IE. the gaps between my menu items are excessive in IE whereas FF is acceptable. If you find a solution to yet AIEB then I'd be keen to hear it :-)
Glen, you're dead right!! A simple ctrl+f #categories replace with #chcategories and instantly, your mod and the UCT mod are working in perfect harmony. No need to study it, that's the simple and yet effective answer!!
Thanks a bunch :-) Now I just need to tweak some of the wacky pink backgrounds and enormous fonts I must have implemented back when I was trying to get it to work....
Glen,
I've got your mod integrating perfectly with the UCT mod now, thanks. Just one thing annoying me and I can't seem to find what's causing it.
My top level categories, Menswear, Womenswear and Childrenswear have a rather annoying solid circle bullet point and I can't find what's causing it. I've tried changing all references to list-stlye:none and changing them all to list-style:hebrew just to see what was the culprit, but nothing on the stylesheets seems to be causing these bullets.
Do I perhaps need to add a new rule to the stylesheet in order to code out these bullets?
I haven't found anything that works yet.
I think the underlying problem is that the Cat Dressing files don't mesh perfectly with the UCT files. There must be some category information that is extra, or missing, or presented differently from standard, in UCT. I am actually surprised that UCT feeds info to tpl_categories.php, as I would think it would use tpl_chcategories.php.
At any rate, the top level categories are tagged as <li> list items, but are not enclosed in <ul> tags. The subcategories have <ul> tags appropriately generated by tpl_categories.php.
So it will require study, but the mere fact that they almost work makes it look like a worthwhile project to prioritize.
Ok, thanks again. When, in the meantime I don't fix it, I'll be back when I'm "live".Quote:
Originally Posted by gjh42
Gerjan
Hi Glen,
When I change bullet2.gif to a blank,transparent, single pixel gif and then use this code in the generic stylesheet:
.......... it creates the exact effect I need on all top level categories.... However, it's only effecting the 'womenswear' category (cPath1)PHP Code:/*change bullet when a category w/o bg image is open to subs:*/
#chcategories li a.cat-parent-text {
list-style: square inside url(../images/bullet2.gif);/*change to list-style: none; to remove bullet*/
position: relative; left: -17px;
font-size: 13px;
font-weight: bold;
}
How on earth can I apply the same set to cPath3 and cPath16 too? These are also top level categories, but I'm having a real problem with this.
hello everybody,
I'am trying to set-up my website like
http://www.playboystore.com (adult content)
I would like to have a few top-caterory displayed as tabs in the header and the dependig subcateory's on the left navigation, how do i preceed ?
Does Anyone have a idea ?
i have installed
zen 1.3.8.a
grid listing
columdivider pro
category dressing
smart background.
hopped on of those would do the job, but still no success.
Thanks for your reply
Karimm,
I think you may have posted this in the wrong thread. This is a thread specifically for the Category Dressing Mod.
However, you should look at the css_horizontal_drop_down_menu_1-5 which would be helpful for you to achieve the row of menus across the top of the screen like on the
http://www.playboystore.com (adult content). This is a great mod and it comes with stylesheet so you can tweak it how you like.
As for the links in your header, just search, "zen cart links in header" on goole and you'll find loads on that there.
Thanks for your reply, :flex:
I know this maybe not the ideal topic for this forum topic.
But there seem to be some design specialist over here.
A good shop to check is the following, notice how they use the top navigation to switch between main stores (domains) !! ( it's dutch)
http://www.pdashop.nl/
every time you switch from shop, the different sub category's are shown with the products. that's just what i want.
Can you point me in the right way ?
Thanks
I'm not going to get into that subject here, beyond noting that the top row of icons linking to external domains could easily be done using the ez-pages navbar with external links. Check the tutorials for ez-pages, and post in an appropriate subforum or thread for help if you need it.
"I would like to have a few top-caterory displayed as tabs in the header and the dependig subcateory's on the left navigation, how do i preceed ?"
Your original question can actually be solved with Categories Dressing.
Use the categories-tabs bar in the header, and set the "active category" define in categories_dressing_defines.php to hide top categories. Then only subcats (of the currently selected top cat) will show in the categories sidebox. See the readme for more info.
Hallo, I have a question. Is it possible to have open categories on start? I need open second level of categories only. Thank you for reply.
Glen, I think you already solved this..... simply changing all references of #categories to #chcategories in your generic stylesheet and now your mod and the UCT mod are working in perfect harmony on my site.Quote:
Originally Posted by gjh42
I can apply your categories_dressing_defines.php and everything works as it's supposed to. Similarly, every rule in your generic stylesheet does affect my categories formatting just exactly as you'd designed.
Again then, anyone wishing to apply categories dressing to UCT, simply change all references of #categories to #chcategories in your stylesheet_categories_dressing.css and voila, perfect harmony.
The only thing I can't solve is which part of the code is generating these three bullets on limelites.co.uk and which part of the code I can use to insert a position:relative; to align these three heading further to the left:
http://www.dystynction.com/screen22.jpg
Please, help :-)
Take a look at my site, limelites.co.uk.............. Is this the sort of category expansion you require?Quote:
Originally Posted by notwist
To get the expanded categories then you need to install the ch-category-20070610 expanded categories mod available in the downloads section. Beware though, if you install this mod then it can be tricky at first to make it work with the categories dressing mod (see the last ten or so posts in this thread)Quote:
Originally Posted by notwist
If you require only opened to 2nd level subcategory then look at my solution found here.
There is some mismatch in the two mods, because Categories Dressing detects category/subcategory level and adds <ul> tags as required; the top categories on your site are not getting the <ul> tags. Something about the information passed into tpl_categories.php is not meshing correctly.
Glen, could it be something as simple as this:Quote:
Originally Posted by gjh42
I changed all #categories to #chcategories and BINGO, 99% working.... what would I change .catBoxHeading1 and .catBoxHeading2 etc., to??
Those don't depend on the sidebox id at all. Theoretically, if someone used .catBoxHeading1 for some other page element, it would conflict... but I don't think that is likely enough to matter :)
The styling class/id tags are not directly connected with the creation of the HTML <ul> element tags.
Thank you for reply. I would like to test your solution but I can't see this code on tpl_categories.php file. Where I find this code?Quote:
Originally Posted by limelites
I realised that after asking the question, sorry.
What I don't understand is how your generic stylesheet is manipulating these top level categories when they're active categories. When I select for example, womenswear>tops, the top level, 'womenswear' goes bold and I can make the font size change or I can change alignment etc... this is from using:
If it's not getting the <ul> tags then how is #chcategories li a.cat-selected-text affecting it and is there perhaps a new tag I can ad for example #chcategories li a.cat-NOTselected-text?PHP Code:#chcategories li a.cat-selected-text {
list-style: square inside url(../images/bullet3.gif);/*change to list-style: none; to remove bullet*/
font-weight:bold;
Sorry, I'm an amateur and I do struggle with the basics at times :-)
This code would appear in tpl_categories.tpl if you install the modified version which ships with the categories dressing mod.Quote:
Originally Posted by notwist
Your top categories get <li> tags, but not the <ul> tags that should be containing them. The selector
#chcategories li a.cat-selected-text
doesn't specifically mention "ul", so it can apply even though the HTML is messed up. If it said
#chcategories ul li a.cat-selected-text
it would not work there.
I see, understood.
Where would I begin research into generating the containing <ul> tags for top categories?
I'm going to be doing that in the next few days, when I have time to compare the mod files' information handling.
Glen, you're a star.Quote:
Originally Posted by gjh42
As a workaround in the meantime, do you know what area of code in either your generic stylesheet, or the main stylesheet.css, is generating the grey bullet points on my top level categories?
If I knew that then I could just insert a list-style:none; and a position:relative; someplace.
Or, is it a case that since the <ul> tags are not being generated then no stylesheet can alter the top categories because of the missing <ul> tags?
In thiat case, is it maybe a case of WINMERGE onto the ch_categories.php into categories.php ?
Sorry if this is another dumb question :blush:
I'm new to Zen Cart and just installed the Category Dressings Mod. I originally wanted to add a rollover image in place of each sidebox heading and someone mentioned that this is the way to go. But OMG I'm lost! I need to make sure I understand what I need to edit. I already uploaded the files to my custom template but when I make the changes that I "think" need to be made nothing happens. Can someone check to make sure I have the right steps down? I would GREATLY appreciate it!
I would need to edit each category heading within the stylesheet_categories_dressing.css.
Example:
.catBoxHeading1 {
font-family: Verdana, Arial, georgia, serif;
font-weight: bold;
font-size: 16px;
color: #6d4925;
background-color: #ffffff;
background-image: url(../images/products.gif);
Question: the number 1 in .catBoxHeading1...that refers to the number in the admin panel next to that category...right? And the images are uploaded to the /my_template/button/english...correct?
Next I need to edit the categories_dressing_defines.php. This is where I get VERY confused. Within this files...
//example defines - copy & modify for each category desired
define ('CAT_BOX_HEADING_#','group|divider/class|[imgname]|[imgalt][|headcontent|headclass][|headcontent|headclass]...');
define ('CAT_BOX_HEADING_1','1|0||');//new list - no headings
define ('CAT_BOX_HEADING_3','1|0|products.gif|Products||');//new list - text headings - multiple levels - styles 1 & 2
define ('CAT_BOX_HEADING_23','0|1|||Another Heading|2');//no list break - divider and text heading - style 2
define ('CAT_BOX_HEADING_33_34','0|0|||Subcat Heading|3');//simple text heading - style 3
define ('CAT_BOX_HEADING_48','1|0|cathead48.gif|Cat 48 Heading|Buy Now...|3');//image heading and alt text - can be followed by text heading(s)
define ('CAT_BOX_HEADING_52','0|1||');//divider only - style 1
define ('CAT_BOX_HEADING_53','0|2||');//divider only - style 2
define ('CAT_BOX_HEADING_FEATURED','0|0|||Featured Heading|3');//no list break - text heading
define ('CAT_BOX_SUBTEXT_23','Subtext for cat 23 escape apostrophe\'s|1');//subtext - style 1
//
I'm assuming as stated at the beginning of this code that these are just examples. Would I just delete them and add my own? And to add my own would the correct code be...
define ('CAT_BOX_HEADING_1','1|0|products.gif|Products||');
and then add more for other categories???
THANK YOU FOR YOUR HELP!!!!
define ('CAT_BOX_HEADING_#',... is for defining the heading form & content for each category.
You would want one of these per category.
Best not to delete the examples, but comment out with //, as they show you how to do various kinds of headings.
.catBoxHeading1 { ... is for setting the style of text headings identified by "1" in the define - like |Subcat Heading|1');//simple text heading - style 1
This would be applied to all of the text headings with a particular style.
define ('CAT_BOX_HEADING_1','1|0|products.gif|Products||');
would give you an image heading using products.gif; however, I don't think you want to be using this part of the Categories Dressing code at all. This is for non-linked headings that appear above the category names, not for the category names themselves.
You would rename products.gif to catbg1.gif, with its rollover state version named catbg1_hover.gif. The code will automatically recognize that that image name goes to category 1, and use it instead of the category name text. You will also need to make stylesheet entries for a.catBg1 {} and a.catBg1:hover {}, referencing the respective background images.
I don't know what I'm doing wrong.
This is the site that I'm working on is http://www.zitabkids.com/ZitaStore
I'm wanting it to have the same button images as on http://www.zitabkids.com
I'm just wanting to replace the text of Products (in Zen Cart)with the button image on the other site. And leave the categories underneath the text Products as normal text links like they already are.
But I can't figure out how to do this with the category dressing mod. I'M SO LOST!!!
OK, so it's the sidebox headings you want to change, not the individual categories or category headings. Categories Dressing does not affect this at all. What you want is the Image Titles mod, which will allow you to replace sidebox header text with an image.