New Zenner
- Join Date:
- Nov 2006
- Posts:
- 70
- Plugin Contributions:
- 0
Coding css changes into 2 category 3 subcategory tpl_categories.php
As seen in THIS thread, I've managed to get quite a nifty 2 category 3 subcategory sidebox going, thanks to the marvellous gjh (who I hope works for the zen team, because that's where the donation is going! :D). All the information about that work can be found in THIS thread. For perusal, the site in its current form is HERE.
I essentially need to do two things. Firstly, I need to implement some CSS styling to turn my current Categories - Tabs menu from THIS (links to the site, a standard setup categories-tabs header) currently, into THIS. I've been told that I can accomplish this using CSS alone, but I'm at a loss on how to achieve it. I know a small amount of CSS but not enough to get the job done. I would, of course, love to learn. I've experimented but to no avail on this topic.
As an aside that really isn't relevant for it to work, but hopefully as a piece of information that someone finds and puts to good use, the way I want the category-tabs header would work for these two categories, Headphones and Microphones, would be for the category to be a dark shade with the pink brackets next to it when the category is selected, and for the other category to be a lighter colour (I'm hoping to do all this through images in the current font). Then, when you hover over the other category, it turns dark as well. A consequence of this would be that troublesome flicker you see when you hover over most images on the Internet, but I found a neat trick to make the hover image pre-load in CSS:
a { background: url(image_hover.gif); }
a:link { background: url(image_default.gif); }
a:hover,
a:focus { background: url(image_hover.gif); }
The second aspect of the site that I'd like to get working is the main subcategory part. Basically what we managed to achieve in the last thread is to get some div tables happening. The relevant bit of PHP code in my tpl_categories.php is here:
$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n";
$content .= '<div id="catPrice">';//bof price box
for ($i=0;$i<sizeof($box_categories_array);$i++) {
switch(true) {
// to make a specific category stand out define a new class in the stylesheet example: A.category-holiday
// uncomment the select below and set the cPath=3 to the cPath= your_categories_id
// many variations of this can be done
// case ($box_categories_array[$i]['path'] == 'cPath=3'):
// $new_style = 'category-holiday';
// break;
case ($box_categories_array[$i]['top'] == 'true'):
$new_style = 'category-top';
break;
case ($box_categories_array[$i]['has_sub_cat']):
$new_style = 'category-subs';
break;
default:
$new_style = 'category-products';
}
$current_path = str_replace("cPath=","",$box_categories_array[$i]['path']);
if (zen_get_product_types_to_category($box_categories_array[$i]['path']) == 3 or ($box_categories_array[$i]['top'] != 'true' and SHOW_CATEGORIES_SUBCATEGORIES_ALWAYS != 1)) {
// skip if this is for the document box (==3)
} else {
// 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";
}
// categories dressing - add (divider and) heading above a cat
$disp_block_head = '';
//$disp_block_head = '<br />'; // for heading not block uncomment this line
switch ($current_path) {
case ('1_12'): //replace numbers with your desired cPaths
$content .= '</div><div id="catType" />' . "\n";
$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') . '</span>':'Heading 1</span>' . $disp_block_head) . "\n";
break;
case ('2_30'): //replace numbers with your desired cPaths
$content .= '</div><div id="catMType" />' . "\n";
$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') . '</span>':'Heading 1</span>' . $disp_block_head) . "\n";
break;
case ('1_16'): //replace numbers with your desired cPaths
$content .= '</div><div id="catBrand" />' . "\n";
$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') . '</span>':'Heading 1</span>' . $disp_block_head) . "\n";
break;
case ('2_34'): //replace numbers with your desired cPaths
$content .= '</div><div id="catMBrand" />' . "\n";
$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') . '</span>':'Heading 1</span>' . $disp_block_head) . "\n";
break;
}
So, basically what we've got is 5 different div id's, which, using CSS alone, we need to convert into a layout that looks like the 3 boxes at the bottom of THIS page. I've got 5 instead of 3, as the Types and Brands will be different for the Microphone category. (Perhaps this is unnecessary, I'm not sure).
I can explain how this works, but a pretty good rundown is HERE.
So, point me in the right direction, gods of zen!
