I'm trying to customize the categories listing to include a banner between the links, I posted my question here. So far I haven't received any info.. I really hope you can help me with this issue!
Printable View
I'm trying to customize the categories listing to include a banner between the links, I posted my question here. So far I haven't received any info.. I really hope you can help me with this issue!
For the "categories always expanded" feature you want, try the Uncollapsed Categories Tree mod recently released by fragfutter. I haven't tested it, but the description is exactly what you asked for.
For the styling and banners, Categories Dressing can provide the framework to accomplish this. FInd this sectionUncomment the catBoxDivider line to get the black line above your banner, and replace the text Heading 1 with the code for your specials banner.PHP Code:
}
// categories dressing - add (divider and) heading above a cat
if ($box_categories_array[$i]['path'] == 'cPath=23') { //replace number with your desired cPath
/*$content .= '<hr class="catBoxDivider" />' . "\n";*/ // to add divider uncomment this line
$content .= '<span class="catBoxHeading1">Heading 1</span><br />' . "\n"; //to display image replace >Heading 1< with: ><img src="' . HTTP_SERVER . DIR_WS_CATALOG . DIR_WS_TEMPLATE . 'images/your_image.gif"><
}
Replace the 23 with the cPath of the category you want just below the banner.
Repeat this process for the second banner - although since the method puts the content above the specified category, you will have to rearrange the location of the code for the second one. Put it immediately after this sectionand use the cPath of the category you want just above the banner.PHP Code:
if (SHOW_COUNTS == 'true') {
if ((CATEGORIES_COUNT_ZERO == '1' and $box_categories_array[$i]['count'] == 0) or $box_categories_array[$i]['count'] >= 1) {
$content .= CATEGORIES_COUNT_PREFIX . $box_categories_array[$i]['count'] . CATEGORIES_COUNT_SUFFIX;
}
}
You will have to find the code for the banners. I suggest to start in Tools > Layout Boxes Controller and see the filename for the specials sidebox, and search from there.
For the general styling, read the section at the bottom of the readme about styling a.category-top. You might want to style the subcategories withadjusting/adding properties as required.Code:#categories a (
background-color: #xxxxxx; (whatever for orange)
margin-top: 0;
margin-bottom: 0;
}
and the top cats with
#categories a.category-top {
font-size: 1.6em;
padding: 5px;
margin-top: 3px;
}
Thanks a lot for your help, I finally managed to get started on this...
First off, I've implemented the Uncollapsed Categories Tree and it works great.
I've also set up your contribution. I followed your instructions on changing the divider and heading, but couldn't get it right.
Let's keep it more simple for now, forget the styling and say I just want to add this image anywhere at the end of a category. After I accomplish this I can replace the <img> tag with the code that displays the "specials".
The code I modified so far in the "active_cat_tree_tpl_categories.php":
The site I'm working on and my current progress is here.PHP Code:
// categories dressing - add (divider and) heading above a cat
if ($box_categories_array[$i]['path'] == 'cPath=10') { //replace number with your desired cPath
$content .= '<hr class="catBoxDivider" />' . "\n";*/ // to add divider uncomment this line
$content .= '<span class="catBoxHeading1"><img src="' . HTTP_SERVER . DIR_WS_CATALOG . DIR_WS_TEMPLATE . 'images/specials-img.jpg"></span><br />' . "\n"; //to display image replace >Heading 1< with: ><img src="' . HTTP_SERVER . DIR_WS_CATALOG . DIR_WS_TEMPLATE . 'images/your_image.gif"><
}
As you can see I the image is not displayed.
There is also an extra space between these two categories: "Test 10%" & "Free Call Stuff".
Any suggestions?
"image is not displayed" - Where do you have the image file located? It needs to be in /your_template/images/.
The space after "Test 10%" is supposed to be "Test 10% by Attrib", which the example sets up as a background image display and turns off the foreground text. It is not finding the background image, and you do not have the "display: block;" styling active, so there is nothing to click on, only the <br /> at the end of that cat display. Without display: block or text output, I don't think there is anything to apply a background to, so finding the image may not be the issue.
Also, if the uncollapsed cat tree mod affects tpl_categories.php, there might need to be some special integration - or have you already done that?
More comments:
The "Category 3" in the display is the "image not found" alt text for the "DVD Movies" demo category, so the example images are not in the right place.
Your code snippet shows you applying the heading image to category 10, but the demo store has no cPath = 10, so your code will not be applied to anything. You need to verify the cPath of the category you want to test with the URL in the address bar at the top of the screen.
Ok, I've moved the image files in the images folders of both "template_default" folder and in the "classic" folder. It appears that the right folder was "classic/images". Now, as you can see the image for category3 is showing... I also moved the specials image to those folders, but it still doesn't show up.
Also when I do a search in the source code of the generated page, I can't find the text "specials-img.jpg" anywhere... Any ideas?
See my post above (posted seconds before yours showed up:)
I've set the cPath to 2, which surely is valid, but the image still doesn't show and I still can't find the image name in the page's source code...
What could be wrong?
I guess I need to ask what folder the copy of tpl_categories.php that you have been editing is in.
You have the Classic template active, so all modifications and additions need to go under that. Change "your_template" to "classic" when placing files in this case, as the readme instructs.
You will also need to learn about the template override system (see FAQ/tutorials) and set up your own template.
Wouldn't you know it, two days after I released v1.1 with coded bullets, I realized the full power of the "display: list-item;" CSS property.
Version 1.2 is now available in Downloads, featuring pure CSS custom category bullets (simpler, more flexible and more powerful) as well as a number of improvements to other coding, and the new improved readme to replace the one I inadvertently left out of the zip for v1.1.
The examples are configured to display with Zen Cart demo products to quickly illustrate their use. A sample stylesheet is included, from which to copy CSS code for your main stylesheet.