Forums / Templates, Stylesheets, Page Layout / Nonstandard 2 category 3 subcategory navigation design

Nonstandard 2 category 3 subcategory navigation design

Locked

Views: 3,207

Results 1 to 15 of 15
This thread is locked. New replies are disabled.
14 Jul 2007, 6:44 AM
#1
dvasdekis avatar

dvasdekis

New Zenner

Join Date:
Nov 2006
Posts:
70
Plugin Contributions:
0

Nonstandard 2 category 3 subcategory navigation design

Perhaps a picture would explain what I'm trying to achieve better than words will, but I'll try with both anyway.
http://files.headsonic.com/files/1/layout01.gif

On the main index of the site I want the two categories (Headphones and Microphones) displayed as images directly below the logo, and for the main page to be on the headphone category by default. When one of these two main categories is selected, the pink bracket appears next to it.

Below this, I'm looking to the these 3 subcategory boxes to appear, with each one displaying the complete selection from the catalog that accords to the particular criteria selected. For instance, if you hit $0-50, you would get every single model of headphone in the catalog that is between $0 and $50.

I'm happy to do this catalog arranging myself by hand for each product in the backend (putting each product into 3 subcategories perhaps, given that each product will have a price, type and brand attribute), but I have no idea how I would go about beginning to work with this.

Thanks in advance!

Headsonic.com.au - Headphones and Microphones for Australians

14 Jul 2007, 7:06 AM
#2
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Nonstandard 2 category 3 subcategory navigation design

Interesting challenge.
You might start with the categories-tabs menu for headphones and microphones - that would require only styling to look and function as you want.

THe three submenus could be done a few ways.
There have been instructions posted for using the documents menu as a second categories menu, and you may be able to tweak the manufacturers sidebox to look and function like the others.

You could have one big categories menu and use some divs worked into tpl_categories.php to get it separated into sections and arranged horizontally.

Or you could clone the categories box twice and have three separate boxes, each showing the desired portion of the whole set.

The code for discriminating among the categories to be displayed is worked out in the Parent Categories Separated in Three Sideboxes thread, as are some clues for cloning the sideboxes.

14 Jul 2007, 9:57 AM
#3
dvasdekis avatar

dvasdekis

New Zenner

Join Date:
Nov 2006
Posts:
70
Plugin Contributions:
0

Re: Nonstandard 2 category 3 subcategory navigation design

Alright then. Looks like I'll be needing to learn PHP. :D

Headsonic.com.au - Headphones and Microphones for Australians

14 Jul 2007, 1:28 PM
#4
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Nonstandard 2 category 3 subcategory navigation design

The second method would probably be simplest overall.
The first and third will require the discrimination code applied and maintained, and the third will require several new files to be copied and modified.

The second will require only the standard admin settings to arrange the order of cats, and some relatively simple PHP in tpl_categories.php to add the <div id="price">, </div><div id="type">, </div><div id="brand"> and </div> tags in the appropriate places. The rest is styling in your stylesheet.

16 Jul 2007, 11:33 AM
#5
dvasdekis avatar

dvasdekis

New Zenner

Join Date:
Nov 2006
Posts:
70
Plugin Contributions:
0

Re: Nonstandard 2 category 3 subcategory navigation design

Alright. I take it that this is the relevant part of the tpl_categories.php code:

*/

  $content = "";

  

  $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n";

  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';

      }

     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 {

      $content .= '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">';



      if ($box_categories_array[$i]['current']) {

        if ($box_categories_array[$i]['has_sub_cat']) {

          $content .= '<span class="category-subs-parent">' . $box_categories_array[$i]['name'] . '</span>';

        } else {

          $content .= '<span class="category-subs-selected">' . $box_categories_array[$i]['name'] . '</span>';

        }

      } else {

        $content .= $box_categories_array[$i]['name'];

      }



      if ($box_categories_array[$i]['has_sub_cat']) {

        $content .= CATEGORIES_SEPARATOR;

      }

      $content .= '</a>';



      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;

        }

      }



      $content .= '<br />' . "\n";

    }

  }

I take it that I would do much as the commented section at the top says, and go through category by category and make a new style for each subcategory within price, type and brand, linking it all to new styles in the main stylesheet in each case?

Thankyou very very much!

Headsonic.com.au - Headphones and Microphones for Australians

16 Jul 2007, 12:04 PM
#6
dvasdekis avatar

dvasdekis

New Zenner

Join Date:
Nov 2006
Posts:
70
Plugin Contributions:
0

Re: Nonstandard 2 category 3 subcategory navigation design

With a bit more thinking, I think I've figured out what you're saying I should do.

You're saying that I should order the subcategories in the boxes all just in one giant list under my main headphone category in the admin, and specify the appearance order so that they're sequentially going through from top to bottom of the left column, then top to bottom of the middle, then top to bottom of the right. Then, I would add a new <div> bit at the end of each column?

I'm still just not sure on where I would add the <div> bit in this tpl PHP file. Should I be defining every single subcategory using that commented method?

Headsonic.com.au - Headphones and Microphones for Australians

16 Jul 2007, 1:38 PM
#7
dvasdekis avatar

dvasdekis

New Zenner

Join Date:
Nov 2006
Posts:
70
Plugin Contributions:
0

Re: Nonstandard 2 category 3 subcategory navigation design

Gjh, shouldn't your categories dressing mod make the work easier on some of this? It looks like it should, particularly with the
"- You can add dividers and/or non-linked headings in any desired locations.

  • You can add images to these headings." part.

Also, if any future generations are looking at this thread, my work in progress site is at http://test.headsonic.com

Headsonic.com.au - Headphones and Microphones for Australians

16 Jul 2007, 5:43 PM
#8
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Nonstandard 2 category 3 subcategory navigation design

You certainly could use Cat Dressing to style your boxes, but it wouldn't actually have anything to do with the basic task of getting three boxes, except for an example of how to decide when to insert the <div> bits. Looking at your proposed layout graphic, you could appropriately use the heading/image function, so I will proceed on that basis.

This snippet can be modified to do what you need:```php
// 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 '23': //replace number with your desired cPath
//$content .= '<hr class="catBoxDivider" />' . "\n"; // to add divider uncomment this line
$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;
}


First, the rationale: you will want the price/type/brand subcats under their respective top cats, headphones or microphones, so only the relevant set of subcats shows. All those subcats should be equally located under the top cat, not separated under price/type/brand subcats, and you should give them the correct sort order in admin when you create them (use 10, 20, 30 instead of 1, 2, 3 so you can easily insert others later without disturbing the original numbers). 

When you select a top cat, the subcats for it should appear in the boxes. The top cats themselves should never display in the boxes. There is code for that in another thread, which I can dig out later. Actually, for this case, it may be even simpler - use the stylesheet to specify 
#categories a.category-top { display: none;}
and don't worry about eliminating them from the output.

Start by opening the first div above the category loop, and then inside the loop, test for the occurrence of the subcat you want at the top of each section. When that comes around, insert the </div><div id="xxx"> for the section above the actual subcat name. Below the loop, close the last div.

Using the Cat Dressing version of tpl_categories.php, find this near the top:```php
  
  $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n";
  for ($i=0;$i<sizeof($box_categories_array);$i++) {
    switch(true) {

Add
$content .= '<div id="catPrice">';//bof price box
to get this```php

$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) {

Find this:```php
      // 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 '23': //replace number with your desired cPath
        //$content .= '<hr class="catBoxDivider" />' . "\n";  // to add divider uncomment this line
        $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;
      }  
```Duplicate the case...break; block and add this

        $content .= '</div><div id="catType" />' . "\n";

and this

        $content .= '</div><div id="catBrand" />' . "\n";
to get this:```php
      // 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 ('23' or '24'): //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 ('33' or '34'): //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;
      }  
```I haven't tested the 
case ('23' or '24'):
so am not sure it will function as intended; if it does not, you will need to duplicate each of those case...break blocks and use a single number in each.

Replace 23 and 24 with the subcat cPaths at the top of the "type" sections in headphones and microphones, and the same for 33 and 34.

Finally, find```php
  $content .= '</div>';
?>
```at the very end of the file, and add to it to get:```php
  $content .= '</div>/*eof brand box*/</div>';
?>

Styling to arrange the boxes is a whole other post, which will have to wait until later, as will the whole subject of general page layout.

16 Jul 2007, 6:07 PM
#9
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Nonstandard 2 category 3 subcategory navigation design

I just tested the
case ('23' or '24'):
and it doesn't work as shown. You will need four case...break blocks, one for each subcat (unless I can work out the correct way of stating the "or").

18 Jul 2007, 10:41 AM
#10
dvasdekis avatar

dvasdekis

New Zenner

Join Date:
Nov 2006
Posts:
70
Plugin Contributions:
0

Re: Nonstandard 2 category 3 subcategory navigation design

So far it's working amazingly well!! I was going to try holding off posting before I'd templated some of it in CSS, but so far, so very very good!

For those who aren't familiar with PHP, I'd like to try and explain how I figured out Glenn's code was working. What it does is it reads through the URL's that the categories mod produces, and every time it comes across a URL that is the same as the cPath URL listed in the case...break codes, it sticks in a bit of div code into the HTML.

With that div code, the CSS can pick up on it and puts all the categories following it into the table created by the div. Then, when it's time for the next subset of boxes to come along, a new case...break piece puts a new bit of div code into the HTML. This then lets you work with it again, with a new div layout.

So, basically what it's doing is it's saying that everything in the first subactegory under Headphones is in the price column. Then, it overrides it when it hits the first 'type' cpath, and says everything under this is in the 'type' column. Then, it overrides it again when it gets down to the 'brand' items.

Thank you Glenn! It would've taken months for me to figure that out on my own (If I had ever managed it at all)!

Headsonic.com.au - Headphones and Microphones for Australians

18 Jul 2007, 11:12 AM
#11
dvasdekis avatar

dvasdekis

New Zenner

Join Date:
Nov 2006
Posts:
70
Plugin Contributions:
0

Re: Nonstandard 2 category 3 subcategory navigation design

:D Found a problem, perhaps with my implementation.

use the stylesheet to specify
#categories a.category-top { display: none;}This is one aspect of the code that indeed does not look like it's working. Adding it does not seem to make a difference.

My css:

/**
 * Main CSS Stylesheet
 *
 * @package templateSystem
 * @copyright Copyright 2003-2005 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: stylesheet.css 5347 2006-12-22 20:26:09Z birdbrain $
 */

body {
    margin: 0;
    font-family: verdana, arial, helvetica, sans-serif;
    font-size: 62.5%;
    color: #000000;
    background-color: #ffffff;
    }

a img {border: none; }

a:link, #navEZPagesTOC ul li a {
    color: #3300FF;
    text-decoration: none;
    }
 
a:visited {
    color: #3300FF;
    text-decoration: none;
    }

a:hover, #navEZPagesTOC ul li a:hover, #navMain ul li a:hover, #navSupp ul li a:hover, #navCatTabs ul li a:hover {
    color: #FF0000;
    }

a:active {
    color: #0000FF;
    }

h1 {
    font-size: 1.5em;
    }

h2 {
    font-size: 1.4em;
    }

h3 {
    font-size: 1.3em;
    }

h4, h5, h6, LABEL, h4.optionName, LEGEND, ADDRESS, .sideBoxContent, .larger{
    font-size: 1.1em;
    }

.biggerText {
    font-size: 1.2em;
    }

h1, h2, h3, h4, h5, h6 {

    margin: 0.3em 3px;

}

CODE {
    font-family: arial, verdana, helvetica, sans-serif;
    font-size: 1em;
    }

FORM, SELECT, INPUT {
    display: inline;
    font-size: 1em;
    margin: 0.1em;
    }

TEXTAREA {
/*    float: left;*/
    margin: auto;
    display: block;
    width: 95%;
    }

input:focus, select:focus, textarea:focus {
    background: #F0F8FF;
    }

FIELDSET {
    padding: 0.5em;
    margin: 0.5em 0em;
    border: 1px solid #cccccc;
    }

LEGEND {
    font-weight: bold;
    padding: 0.3em;
    }

LABEL, h4.optionName {
    line-height: 1.5em;
    padding: 0.2em;
    }

LABEL.checkboxLabel, LABEL.radioButtonLabel {
    margin: 0.5em 0.3em;
    }

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
    float: left;
    }

LABEL.inputLabel {
    width: 11em;
    float: left;
    }

LABEL.inputLabelPayment {
    width: 15em;
    float: left;
    }

LABEL.selectLabel, LABEL.switchedLabel, LABEL.uploadsLabel  {
    width: 12em;
    float: left;
    }

P, ADDRESS {
    padding: 0.5em;
    }

ADDRESS {
    font-style: normal;
    }

.clearBoth {
    clear: both;
    }

HR {
    height: 1px;
    margin-top: 0.5em;
    border: none;
    border-bottom: 1px solid #9a9a9a;
    }

/*warnings, errors, messages*/
.messageStackWarning, .messageStackError, .messageStackSuccess, .messageStackCaution {
    line-height: 1.8em;
    padding: 0.2em;
    border: 1px solid #000000;
    }

.messageStackWarning, .messageStackError {
    background-color: #ff0000;
    color: #ffffff;
    }

.messageStackSuccess {
    background-color: #99FF99;
    color: #000000;
    }

.messageStackCaution {
    background-color: #FFFF66;
    color: #000000;
    }

/*wrappers - page or section containers*/
#mainWrapper {
    background-color: #ffffff;
    text-align: left;
    width: 100%;
    vertical-align: top;
    }

#headerWrapper, #contentMainWrapper, #logoWrapper, #cartBoxListWrapper, #ezPageBoxList, #cartBoxListWrapper ul, #ezPageBoxList ul, #mainWrapper, #popupAdditionalImage, #popupImage {
    margin: 0em;
    padding: 0em;
    }

#navColumnOneWrapper, #navColumnTwoWrapper, #mainWrapper {
    margin: auto;
    } 

#tagline {
    display: none;
    }

#sendSpendWrapper {
    border: 1px solid #cacaca;
    float: right;
    margin: 0em 0em 1em 1em;
    }

.floatingBox, #accountLinksWrapper, #sendSpendWrapper, #checkoutShipto, #checkoutBillto, #navEZPagesTOCWrapper {
    margin: 0;
    width: 47%;
    }

.wrapperAttribsOptions {
    margin: 0.3em 0em;
    }

/*navigation*/

.navSplitPagesResult {}
.navSplitPagesLinks {}
.navNextPrevCounter {
    margin: 0em;
    font-size: 0.9em;
    }
.navNextPrevList {
    display: inline;
    white-space: nowrap;
    margin: 0;
    padding:  0.5em 0em;
    list-style-type: none;
    }

#navMainWrapper, #navCatTabsWrapper {
    margin: 0em;
    background-image: url(../images/topbarbackground.png);
    font-weight: bold;
    color: #ffffff;
    height: 1%;
    width: 100%;
    }

#navSuppWrapper {
    display: none;
    }

#navMain ul, #navSupp ul, #navCatTabs ul  {
    margin: 0;
    padding:  0.5em 0em;
    list-style-type: none;
    text-align: center;
    line-height: 1.5em;
    }

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
    display: inline;
    }

#navMain ul li a, #navSupp ul li a, #navCatTabs ul li a {
    text-decoration: none;
    padding: 0em 0.5em;
    margin: 0;
    color: #ffffff;
    white-space: nowrap;
    }

#navEZPagesTOCWrapper {
    font-weight: bold;
    float: right;
    height: 1%;
    border: 1px solid #000000;
    }

#navEZPagesTOC ul {
    margin: 0;
    padding:  0.5em 0em;
    list-style-type: none;
    line-height: 1.5em;
    }

#navEZPagesTOC ul li {
    white-space: nowrap;
    }

#navEZPagesTOC ul li a {
    padding: 0em 0.5em;
    margin: 0;
    }

#navCategoryIcon, .buttonRow, #indexProductListCatDescription {
    margin: 0.5em;
    }

#navMainSearch {
    float: right
    }

#navBreadCrumb {
    background-color: #cc9900;
    }

#navEZPagesTop {
    background-color: #ffff33;
    }

#navBreadCrumb, #navEZPagesTop {
    font-size: 0.95em;
    font-weight: bold;
    margin: 0em;
    padding: 0.5em;
    }

#navColumnOne {
    background-color: #FFCC99;
    }

#navColumnTwo {
    background-color: #00BFBF;
    }

/*The main content classes*/
#contentColumnMain, #navColumnOne, #navColumnTwo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .alert {
    vertical-align: top;
    }

/*.content,*/ #productDescription, .shippingEstimatorWrapper {
    /*font-size: 1.2em;*/
    padding: 0.5em;
    }

.alert {
    color: #FF0000;
    margin-left: 0.5em;
    }
.advisory {}
.important {
    font-weight: bold;
    }
.notice {}
.rating{}
.gvBal {
    float: right;
    }
.centerColumn, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix {
    padding: 0.8em;
    }

.smallText, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP {
    display: none;
    }

/*Shopping Cart Display*/
#cartAdd {
    float: right;
    text-align: center;
    margin: 1em;
    border: 1px solid #000000;
    padding: 1em;
    }

.tableHeading TH {
    border-bottom: 1px solid #cccccc;
    }

.tableHeading, #cartSubTotal {
    background-color: #e9e9e9;
     }

#cartSubTotal {
    border-top: 1px solid #cccccc;
    font-weight: bold;
    text-align: right;
    line-height: 2.2em;
    padding-right: 2.5em;
    }

.tableRow, .tableHeading, #cartSubTotal {
    height: 2.2em;
    }

.cartProductDisplay, .cartUnitDisplay, .cartTotalDisplay, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, #cartInstructionsDisplay, .cartTotalsDisplay   {
    padding: 0.5em 0em;
    }

.cartUnitDisplay, .cartTotalDisplay {
    text-align: right;
    padding-right: 0.2em;
    }

#scUpdateQuantity {
    width: 2em;
    }

.cartQuantity {
    width: 4.7em;
    }

.cartNewItem {
    color: #33CC33;
    position: relative;  /*do not remove-fixes stupid IEbug*/
    }

.cartOldItem {
    color: #660099;
    position: relative;   /*do not remove-fixes stupid IEbug*/
    }

.cartBoxTotal {
    text-align: right;
    font-weight: bold;
    }

.cartRemoveItemDisplay {
    width: 3.5em;
    }

.cartAttribsList {
    margin-left: 1em;
    }

#mediaManager {
  width: 50%; 
  margin: 0.2em;
  padding: 0.5em;
  }

.normalprice, .productSpecialPriceSale {
    text-decoration: line-through;
    }

.productSpecialPrice, .productSalePrice, .productSpecialPriceSale, .productPriceDiscount {
    color: #ff0000;
    }

.orderHistList {
    margin: 1em;
    padding: 0.2em 0em;
    } 

#cartBoxListWrapper ul, #ezPageBoxList ul {
    list-style-type: none;
    }

#cartBoxListWrapper li, #ezPageBoxList li, .cartBoxTotal {
    margin: 0;
    padding: 0.2em 0em;
    } 

#cartBoxEmpty, #cartBoxVoucherBalance {
  font-weight: bold;
  }

.totalBox {
    width: 5.5em;
    text-align: right;
    padding: 0.2em;
    }

.lineTitle, .amount {
    text-align: right;
    padding: 0.2em;
    }

.amount {
    width: 5.5em;
    }

/*Image Display*/
#productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage {
    margin: 0em 1em 1em 0em ;
    }

.categoryIcon {}

#cartImage {
    margin: 0.5em 1em;
    }

/*Attributes*/
.attribImg {
    width: 20%;
    margin: 0.3em 0em;
}

.attributesComments {}

/*list box contents*/
.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew {
    margin: 1em 0em;
    }

/*sideboxes*/

#categories a.category-top {
    display:none;
    }


.columnLeft {}

h3.leftBoxHeading, h3.leftBoxHeading a {
    font-size: 1em;
    color: #ffffff;
    }

.leftBoxHeading, .centerBoxHeading {
    margin: 0em;
    background-color: #FF6699;
    padding: 0.5em 0.2em;
    }

.leftBoxContainer {
    border: 1px solid #ffffff;
    margin-top: 1.5em;
    }

.sideBoxContent {
    background-color: #ffffff;
    padding: 0.4em;
    }

h3.rightBoxHeading, h3.rightBoxHeading a {
    font-size: 1.1em;
    color: #FFFF00;
    }

.rightBoxHeading {
    margin: 0em;
    background-color: #663366;
    padding: 0.2em 0em;
    }

h3.leftBoxHeading a:hover {
    color: #FFFF33;
    text-decoration: none;
    } 

h3.rightBoxHeading a:hover {
    color: #FF0000;
    text-decoration: none;
    }

.rightBoxContent {
    background-color: #ffffff;
    margin-bottom: 1em;
    }

.centeredContent, TH, #cartEmptyText, #cartBoxGVButton, #cartBoxEmpty, #cartBoxVoucherBalance, #navCatTabsWrapper, #navEZPageNextPrev, #bannerOne, #bannerTwo,  #bannerThree,  #bannerFour,  #bannerFive,  #bannerSix, #siteinfoLegal, #siteinfoCredits, #siteinfoStatus, #siteinfoIP, .center, .cartRemoveItemDisplay, .cartQuantityUpdate, .cartQuantity, .cartTotalsDisplay, #cartBoxGVBalance, .leftBoxHeading, .centerBoxHeading,.rightBoxHeading, .productListing-data, .accountQuantityDisplay, .ratingRow, LABEL#textAreaReviews, #productMainImage, #reviewsInfoDefaultProductImage, #productReviewsDefaultProductImage, #reviewWriteMainImage, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .additionalImages, .centerBoxContentsSpecials, .centerBoxContentsAlsoPurch, .centerBoxContentsFeatured, .centerBoxContentsNew, .gvBal, .attribImg {
    text-align: center;
    }

#bestsellers .wrapper {
    margin: 0em 0em 0em 1.5em;
    }

#bestsellers ol {
    padding: 0;
    margin-left: 1.1em;
    }

#bestsellers li {
    padding: 0;
    margin: 0.3em 0em 0.3em 0em;
    }

#bannerboxHeading {
    background-color: #0000CC;
}

#upProductsHeading {
    text-align: left;
    }

#upDateHeading {
    text-align: right;
    }

/*misc*/
.back {
    float: left;
    }

.forward, #shoppingCartDefault #PPECbutton {
    float: right;
    }

.bold {
    font-weight: bold;
    }

.rowOdd {
    background-color: #E8E8E8;
    height: 1.5em;
    vertical-align: top;
    }

.rowEven {
    background-color: #F0F0F0;
    height: 1.5em;
    vertical-align: top;
    }

.hiddenField {
    display: none;
}
.visibleField {
    display: inline;
}

CAPTION {
    /*display: none;*/
    }

#myAccountGen li, #myAccountNotify li {
    margin: 0;
    } 

.accountTotalDisplay, .accountTaxDisplay {
    width: 20%;
    text-align: right;
    /*vertical-align: top*/
    }

.accountQuantityDisplay {
    width: 10%;
    vertical-align: top
    }

TR.tableHeading {
    background-color: #cacaca;
    height: 2em;
    }

#siteMapList {
    width: 90%;
    float: right;
    }

.ratingRow {
    margin: 1em 0em 1.5em 0em;
    }

LABEL#textAreaReviews {
    font-weight: normal;
    margin: 1em 0em;
    }

#popupShippingEstimator, #popupSearchHelp, #popupAdditionalImage, #popupImage, #popupCVVHelp, #popupCouponHelp, #popupAtrribsQuantityPricesHelp, #infoShoppingCart {
    background-color: #ffffff;
    }
.information {padding: 10px 3px; line-height: 150%;}
```Secondly, the /*eof brand box*/ comment seemed to be in the incorrect place for a comment (assuming that's what it was, it was popping out in the output html, and so I popped it to the end of the line instead.

Headsonic.com.au - Headphones and Microphones for Australians

18 Jul 2007, 11:13 AM
#12
dvasdekis avatar

dvasdekis

New Zenner

Join Date:
Nov 2006
Posts:
70
Plugin Contributions:
0

Re: Nonstandard 2 category 3 subcategory navigation design

My final tpl_categories.php

<?php
/**
 * Side Box Template
 *
 * @package templateSystem
 * @copyright Copyright 2003-2006 Zen Cart Development Team
 * @copyright Portions Copyright 2003 osCommerce
 * @license http://www.zen-cart.com/license/2_0.txt GNU Public License V2.0
 * @version $Id: tpl_categories.php 4162 2006-08-17 03:55:02Z ajeh $
 * Modified for Categories Dressing v2.0  by Glenn Herbert (gjh42)  2007-07-13
 */
  $disp_block = '';
  //$disp_block = '<br />'; //if not using display: block; in stylesheet, uncomment  this line
  $content = "";
  
  $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 ('2_26'): //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_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;
          }  
      // categories dressing - category name mods
      $cat_name_display = $box_categories_array[$i]['name'];
      $cat_img_bg = '';
      // categories dressing - display image if exists for category name
      if (file_exists(DIR_WS_TEMPLATE_IMAGES . 'catimg' . $current_path . '.gif')) {
        $cat_name_display = zen_image(DIR_WS_TEMPLATE_IMAGES . 'catimg' . $current_path . '.gif');
      // categories dressing - display background image if exists for category name
      } elseif (file_exists(DIR_WS_TEMPLATE_IMAGES . 'catbg' . $current_path . '.gif')) {
        $cat_name_display = '';
        $cat_img_bg = ' catBg' . $current_path;
      } else {
        $cat_img_bg = '-text';//append to main classname
      }
      $content .= '<a class="' . $new_style . $cat_img_bg . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">';
      if ($box_categories_array[$i]['current']) {
        if ($box_categories_array[$i]['has_sub_cat']) {
          $content .= '<span class="category-subs-parent">' . $cat_name_display . '</span>';
        } else {
          $content .= '<span class="category-subs-selected">' . $cat_name_display . '</span>';
        }
      } else {
        $content .= '<span class="category-not-selected">' . $cat_name_display . '</span>';
      } // category name mods

      if ($box_categories_array[$i]['has_sub_cat']) {
        $content .= CATEGORIES_SEPARATOR;
      }
      $content .= '</a>';

      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;
        }
      }

      $content .= $disp_block . "\n";

      // categories dressing - add subtext below a cat
      switch ($current_path) {
      case '23': //replace number with your desired cPath
        $content .= '<span class="catBoxSubtext">Subtext for cat 23 escape apostrophe\'s</span>' . $disp_block . "\n";
      break;
      } // subtext
    }
  }

  if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true' or SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
// display a separator between categories and links
    if (SHOW_CATEGORIES_SEPARATOR_LINK == '1') {
      $content .= '<hr id="catBoxDivider" />' . "\n";
    }
    if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') {
      //$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-specials.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-specials.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link
      $show_this = $db->Execute("select s.products_id from " . TABLE_SPECIALS . " s where s.status= 1 limit 1");
      if ($show_this->RecordCount() > 0) {
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>' . $disp_block . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
      // display limits
//      $display_limit = zen_get_products_new_timelimit();
      $display_limit = zen_get_new_date_range();

      $show_this = $db->Execute("select p.products_id
                                 from " . TABLE_PRODUCTS . " p
                                 where p.products_status = 1 " . $display_limit . " limit 1");
      if ($show_this->RecordCount() > 0) {
        //$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-new.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-new.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>' . $disp_block . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true') {
      $show_this = $db->Execute("select products_id from " . TABLE_FEATURED . " where status= 1 limit 1");
      if ($show_this->RecordCount() > 0) {
        //$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-featured.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-featured.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link
        $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a>' . $disp_block . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
      $content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-all.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-all.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link
      $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a>' . "\n";
    }
  }
  $content .= '</div></div>';/*eof brand box*/
?>  

I'll be going through and experimenting with some div tags myself shortly!

Headsonic.com.au - Headphones and Microphones for Australians

18 Jul 2007, 5:43 PM
#13
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Nonstandard 2 category 3 subcategory navigation design

"the /eof brand box/ comment seemed to be in the incorrect place for a comment"

Caught me there - in that location, it should have been an <!--HTML comment--> instead of a /PHP comment/.

18 Jul 2007, 5:50 PM
#14
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Nonstandard 2 category 3 subcategory navigation design

"Found a problem, perhaps with my implementation.

Quote:
use the stylesheet to specify
#categories a.category-top { display: none;}
This is one aspect of the code that indeed does not look like it's working. Adding it does not seem to make a difference."

It wasn't your implementation.
That bit of styling would work for the stock categories, but Cat Dressing uses an added bit for extra distinctions, so it needs to be

#categories a.category-top-text { display: none;}

19 Jul 2007, 11:54 AM
#15
dvasdekis avatar

dvasdekis

New Zenner

Join Date:
Nov 2006
Posts:
70
Plugin Contributions:
0

Re: Nonstandard 2 category 3 subcategory navigation design

Posted a new thread about customising the stylesheet HERE. Thanks for all the help!

Headsonic.com.au - Headphones and Microphones for Australians