Categories Menu

[gaaalmp]

Hi all,

 

I was wondering if it is possible to change the default class in css used for Categories and sub-categories listed in the menu categories.php. I realise that infobox is used for the main box and infoboxheading is used for the heading. What I wanted is to know if it is possible to control each path, main categories and subcategories and control then individually via css to change their appearance from CSS.

 

Is this a viable solution and please advise if using css is a better way to control appearance rather than using a java menu or the like which from my understanding may break session id's and osC compatibility.

 

Would appreciate some help to steer me down the right track when it comes to osC menu's and the above question.

 

Feedback much appreciated.

 

Thanks in advance

George.

[morehawes]

Hi, have you checked the contributions? I know the CSS Infoboxes http://addons.oscommerce.com/info/6378 has a css alternative for the categories menu. Might be what you're looking for!

[gaaalmp]

Hi Joe,

 

Thanks for the feedback.

My understanding with this contribution is that you can only control all paths in the menu with the one css class.

I was wondering if it is possible to use a different css class for each category path and subcategory in the menu to change the appearance individualy for each. if that makes sence?

 

George

[morehawes]

Hi. Yes as far as I know that contribution gives a different class to parent/children categories. If i'm hearing you right and you want to give a different class (id) to each list element then thats pretty straight forward. Could you explain in a bit more detail what you are trying to achieve, a small example of a nested list with id tags assigned might help.

 

Cheers.

[gaaalmp]

Hey Joe,

 

 

- Category A

- Product A

- product B

- product C

- Category B

- Product A

- product B

- product C

- Category C

- Product A

- product B

- product C

 

/* new categories css menu apperance*/

 

.column {

padding: 0;

margin: 0;

font-size:10px;

font-family: Verdana, Arial, Helvetica, sans-serif;

}

 

.column_header {

height: 83px;

width: 140px;

margin: 0px 0px;

background: url(images/kids.png) no-repeat center;

}

 

.column ul { /* all lists */

list-style: none;

line-height: 35px;

width: 140px;

text-align: center;

background-image: url(images/infobox/cat.gif);

}

 

.column ul :hover{ /* all lists */

line-height: 35px;

width: 140px;

text-align: center;

color: #eb4a8b;

font-weight: bold;

font-size: 11px;

text-decoration: none;

background-image: url(images/infobox/cat_hov.gif);

}

 

.column li { /* all lists */

line-height: 18px;

width: 140px;

text-align: center;

color: #eb4a8b;

font-weight: bold;

text-decoration: none;

background-image: url(images/infobox/prod.gif);

}

 

.column li :hover { /* all lists */

line-height: 18px;

width: 140px;

text-align: center;

color: #eb4a8b;

font-weight: bold;

text-decoration: none;

background-image: url(images/infobox/prod_hov.gif);

}

 

I would like to be able to:

 

1) Apply a backgorund image to Category A, B, C to make them look like buttons (which I achieved using .column ul)

2) Apply a rollover image to Category A, B, C to make them change when hovered over (which I achieved using .column ul :hover)

3) Apply a backgorund image to Product A, B, C etc for each category to make them look like buttons (which I achieved using .column li) But my problem is that it does it for Categories A, B and C as well as the Product listings for each category.

4) Change the font and colour for each Category and its products when you hover over them. i.e pink for Category A, Green for Category B, and orange for Category C. At the moment it uses all the one .column ul settings in the CSS stylesheet. If I leave the .column li classes not commented out in the stylesheet then it uses their settings for everything.

 

I am not sure if I have to ammend or add <ul> and <li> tags in the categories.php file (from the contribution) to achieve the desired effect for my menu or leave as is and change the css references somehow.

I understand that I am fundamentaly doing something wrong just cant see it and understand how it pieces together.

 

Hope this makes more sence. Again thanks for taking the time to help me out.

 

Cheers

George

[morehawes]

3) Apply a backgorund image to Product A, B, C etc for each category to make them look like buttons (which I achieved using .column li) But my problem is that it does it for Categories A, B and C as well as the Product listings for each category.

Hi, I can't say for sure without looking at your HTML markup but if you are using well formed nested lists then you shuold be able to use

.column li

for the categories and

.column li ul li

for the products.

 

I am not sure if I have to ammend or add <ul> and <li> tags in the categories.php file (from the contribution) to achieve the desired effect for my menu or leave as is and change the css references somehow

You can probably get away with using the markup as it is, or add some id's to categories / products but if I remember the categories.php box code can take a while to work out what it is doing. If I was you I would assign an id to the whole categories div so you can reference it like so: #categories li which might be a bit cleaner and avoid problems with other info boxes.

 

If you're still stuck then show me the HTML for the categories box (indented correctly ideally) and i'll have a look.

[gaaalmp]

<?php
/*
 $Id: categories.php 1739 2007-12-20 00:52:16Z hpdl $

 osCommerce, Open Source E-Commerce Solutions
 [url="http://www.oscommerce.com"]http://www.oscommerce.com[/url]

 Copyright © 2003 osCommerce

 Released under the GNU General Public License
*/

 function tep_show_category($counter) {
   global $tree, $categories_string, $cPath_array;

   for ($i=0; $i<$tree[$counter]['level']; $i++) {
     $categories_string .= "";
   }

   $categories_string .= '<li><a href="';

   if ($tree[$counter]['parent'] == 0) {
     $cPath_new = 'cPath=' . $counter;
   } else {
     $cPath_new = 'cPath=' . $tree[$counter]['path'];
   }

   $categories_string .= tep_href_link(FILENAME_DEFAULT, $cPath_new) . '">';

   if (isset($cPath_array) && in_array($counter, $cPath_array)) {
     $categories_string .= '<b>';
   }

// display category name
   $categories_string .= $tree[$counter]['name'];

   if (isset($cPath_array) && in_array($counter, $cPath_array)) {
     $categories_string .= '</b>';
   }

   if (tep_has_category_subcategories($counter)) {
     $categories_string .= '';
   }

   $categories_string .= '</a>';

   if (SHOW_COUNTS == 'true') {
     $products_in_category = tep_count_products_in_category($counter);
     if ($products_in_category > 0) {
       $categories_string .= ' (' . $products_in_category . ')';
     }
   }

   $categories_string .= '</li>';

   if ($tree[$counter]['next_id'] != false) {
     tep_show_category($tree[$counter]['next_id']);
   }
 }
?>

<!-- categories //-->
     <div class="column">
       <div class="column_header"> 
      <!-- <div class="column_header_left"><h4><?php echo BOX_HEADING_CATEGORIES ;?></h4></div> //-->
       </div>
       <ul>
<?php
 $categories_string = '';
 $tree = array();

 $categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '0' and c.categories_id = cd.categories_id and cd.language_id='" . (int)$languages_id ."' order by sort_order, cd.categories_name");
 while ($categories = tep_db_fetch_array($categories_query))  {
   $tree[$categories['categories_id']] = array('name' => $categories['categories_name'],
                                               'parent' => $categories['parent_id'],
                                               'level' => 0,
                                               'path' => $categories['categories_id'],
                                               'next_id' => false);

   if (isset($parent_id)) {
     $tree[$parent_id]['next_id'] = $categories['categories_id'];
   }

   $parent_id = $categories['categories_id'];

   if (!isset($first_element)) {
     $first_element = $categories['categories_id'];
   }
 }

 //------------------------
 if (tep_not_null($cPath)) {
   $new_path = '';
   reset($cPath_array);
   while (list($key, $value) = each($cPath_array)) {
     unset($parent_id);
     unset($first_id);
     $categories_query = tep_db_query("select c.categories_id, cd.categories_name, c.parent_id from " . TABLE_CATEGORIES . " c, " . TABLE_CATEGORIES_DESCRIPTION . " cd where c.parent_id = '" . (int)$value . "' and c.categories_id = cd.categories_id and cd.language_id='" . (int)$languages_id ."' order by sort_order, cd.categories_name");
     if (tep_db_num_rows($categories_query)) {
       $new_path .= $value;
       while ($row = tep_db_fetch_array($categories_query)) {
         $tree[$row['categories_id']] = array('name' => $row['categories_name'],
                                              'parent' => $row['parent_id'],
                                              'level' => $key+1,
                                              'path' => $new_path . '_' . $row['categories_id'],
                                              'next_id' => false);

         if (isset($parent_id)) {
           $tree[$parent_id]['next_id'] = $row['categories_id'];
         }

         $parent_id = $row['categories_id'];

         if (!isset($first_id)) {
           $first_id = $row['categories_id'];
         }

         $last_id = $row['categories_id'];
       }
       $tree[$last_id]['next_id'] = $tree[$value]['next_id'];
       $tree[$value]['next_id'] = $first_id;
       $new_path .= '_';
     } else {
       break;
     }
   }
 }
 tep_show_category($first_element); 

 echo $categories_string;
?>
       </ul>
	<br>
     </div>
<!-- categories_eof //-->

 

Above is the categories file. The .column li ul li and .column li doesnt work with the current <ul> and <li> tags. It applies the settings to all categories and products. I tried with ID's and it still doesnt make a difference. I still can not segregate the categories with the products. I think I have the UL and LI tags incorrectly placed in the categories.php file.

 

Cheers

George

[morehawes]

Hi, I don't have the time at the moment to go through yuor script, but can you post the HTML is it producing? i.e. the categories info box with the nested list.

[gaaalmp]

<!-- categories //-->
     <div class="column">
       <div class="column_header"> 
      <!-- <div class="column_header_left"><h4>Categories</h4></div> //-->
       </div>
       <ul>
<li><a href="http://www.mysite.com.au/index.php?cPath=1">Hardware</a></li><li><a href="http://www.mysite.com.au/index.php?cPath=2">Software</a></li><li><a href="http://www.mysite.com.au/index.php?cPath=3">DVD Movies</a></li>        </ul>
	<br>
     </div>
<!-- categories_eof //-->

[gaaalmp]

Sorry I forgot to expand the categories in the previous post:

 

<!-- categories //-->
     <div class="column">
       <div class="column_header"> 
      <!-- <div class="column_header_left"><h4>Categories</h4></div> //-->
       </div>
       <ul>
<li><a href="http://www.mysite.com.au/index.php?cPath=1"><b>Hardware</b></a></li>
<li><a href="http://www.mysite.com.au/index.php?cPath=1_17">CDROM Drives</a></li>
<li><a href="http://www.mysite.com.au/index.php?cPath=1_4">Graphics Cards</a></li>
<li><a href="http://www.mysite.com.au/index.php?cPath=1_8">Keyboards</a></li>
<li><a href="http://www.mysite.com.au/index.php?cPath=1_16">Memory</a></li>
<li><a href="http://www.mysite.com.au/index.php?cPath=1_9">Mice</a></li>
<li><a href="http://www.mysite.com.au/index.php?cPath=1_6">Monitors</a></li>
<li><a href="http://www.mysite.com.au/index.php?cPath=1_5">Printers</a></li>
<li><a href="http://www.mysite.com.au/index.php?cPath=1_7">Speakers</a></li>
<li><a href="http://www.mysite.com.au/index.php?cPath=2">Software</a></li>
<li><a href="http://www.mysite.com.au/index.php?cPath=3">DVD Movies</a></li>
       </ul>
	<br>
     </div>
<!-- categories_eof //-->

[morehawes]

Hmmmm.... your list is not nested (see example here: http://www.w3schools.com/HTML/tryit.asp?fi...=tryhtml_lists2). My apologies, I was under the impression that the contribution I told you about did this. Perhaps have a look here : http://addons.oscommerce.com/info/4201

[gaaalmp]

I had a look at the mentioned contribution though it seems like it has the same limitations from what I can gather. The output shows that class="link_lev_0" is used for the categories and class="link_lev_1" used for the products under each category.

 

Is it possible to control each category and nested products seperately with a different class as per my original question?

 

  <tr>
   <td class="boxText"><ul id="nav"><li class="cat_lev_0"><a class="link_lev_0" href="http://www.mysite.com/index.php?cPath=1" class="daddy">Hardware
<ul><li class="cat_lev_1"><a class="link_lev_1" href="http://www.mysite.com/index.php?cPath=1_17">CDROM Drives</li>
<li class="cat_lev_1"><a class="link_lev_1" href="http://www.mysite.com/index.php?cPath=1_4">Graphics Cards</li>
<li class="cat_lev_1"><a class="link_lev_1" href="http://www.mysite.com/index.php?cPath=1_8">Keyboards</li>
<li class="cat_lev_1"><a class="link_lev_1" href="http://www.mysite.com/index.php?cPath=1_16">Memory</li>
<li class="cat_lev_1"><a class="link_lev_1" href="http://www.mysite.com/index.php?cPath=1_9">Mice</li>
<li class="cat_lev_1"><a class="link_lev_1" href="http://www.mysite.com/index.php?cPath=1_6">Monitors</li>
<li class="cat_lev_1"><a class="link_lev_1" href="http://www.mysite.com/index.php?cPath=1_5">Printers</li>
<li class="cat_lev_1"><a class="link_lev_1" href="http://www.mysite.com/index.php?cPath=1_7">Speakers</li>
</ul></li>
<li class="cat_lev_0"><a class="link_lev_0" href="http://www.mysite.com/index.php?cPath=2" class="daddy">Software
<ul><li class="cat_lev_1"><a class="link_lev_1" href="http://www.mysite.com/index.php?cPath=2_19">Action</li>
<li class="cat_lev_1"><a class="link_lev_1" href="http://www.mysite.com/index.php?cPath=2_18">Simulation</li>
<li class="cat_lev_1"><a class="link_lev_1" href="http://www.mysite.com/index.php?cPath=2_20">Strategy</li>
</ul></li>
<li class="cat_lev_0"><a class="link_lev_0" href="http://www.mysite.com/index.php?cPath=3" class="daddy">DVD Movies
<ul><li class="cat_lev_1"><a class="link_lev_1" href="http://www.mysite.com/index.php?cPath=3_10">Action</li>
<li class="cat_lev_1"><a class="link_lev_1" href="http://www.mysite.com/index.php?cPath=3_13">Cartoons</li>
<li class="cat_lev_1"><a class="link_lev_1" href="http://www.mysite.com/index.php?cPath=3_12">Comedy</li>
<li class="cat_lev_1"><a class="link_lev_1" href="http://www.mysite.com/index.php?cPath=3_15">Drama</li>
<li class="cat_lev_1"><a class="link_lev_1" href="http://www.mysite.com/index.php?cPath=3_11">Science Fiction</li>
<li class="cat_lev_1"><a class="link_lev_1" href="http://www.mysite.com/index.php?cPath=3_14">Thriller</li>
</ul></ul></td>
 </tr>

 

cheers

George

[gaaalmp]

If anyone is looking for a contribution to do what I was asking for in this topic please refer to http://addons.oscommerce.com/info/6886. I uploaded the solution.

 

Regards

George.