Categories Styling - problems

[Shane78]

Hi...

another question from me which will no doubt have a stupidly easy answer.. i just couldnt figure it out on my own.


i have a site, i want to style the links in the 'Categories' sidebox to look like the Categories sidebox from this demo site http://demo.zen-cart-power.com/electronics/

i have been trying for two days but i have had no success.. as it either doesnt work right or buggers something else style wise on the site.

here is my test site: hyzen.co.uk/zen

i just want a simple dotted line between links and a little arrow to the left of the links. Ideally via CSS only.

Cheers
Martin

[stevesh]

I don't know about stupidly easy, but the easy way is to open that site in Firefox, open the editor in the Web Developer plugin, and see how he did it in the stylesheet (looks pretty easy).

[Shane78]

lol.. i tried...

they have free download versions where the side boxes are the same as the one i listed to show the style..

been pulling their work apart for two days but i just seem to make a mess.

From what i can work out, they have changed (i believe) the tpl_categories.php file. I have used winmerge and the changes are minor.. but when i apply to mine, including the CSS and images to my own test site it just becomes a car crash of a site! haha

I have also tried recreating via CSS but i can never get it quite right.

Its a scratchy head moment (for me anyway)

[gjh42]

Rather than doing the PHP coding yourself, you can use Categories Dressing which will allow you to specify those properties.

[Shane78]

Thank you gjh42... i shall give it a bash and post my progress

[Shane78]

good mod,,, but i think i will just stick with CSS styling to make the cat-sidebox appear like the others...

it made the cat-sidebox appear way outside of the left column and didnt really work for me (but i can see what it is meant to do, no doubt i have not installed it right.. but its a bit too much effort to go thru to get the style i am after..

thank you tho!!

[Shane78]

hello hello...

i have worked it out.. in case anyone is interested or for people to look at in the future...

simply...

use the ZC overide system and have the following (or create) file structure...

includes > templates > CUSTOM > sideboxes

- create a new file called tpl_categories.php
- copy and paste the following into this file and save

<?php
/**
* Side Box Template
* @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 $
*/
  $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 {

      /*#### Wel*/
      if ($i == 0) { $top = 'no-dots'; } else { $top = ''; }
/*      $content .= '<div class="categories-top-list">';*/
      if ($new_style == 'category-products' || $new_style == 'category-subs') { $open_tag = '<div class="subcategory">'; } else { $open_tag = '<div class="categories-top-list ' . $top . '">'; };
      /*#### /Wel*/

      $content .= $open_tag . '<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']/* . 'top down'*/;
      }

      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 .= '<span class="sub-count">' . CATEGORIES_COUNT_PREFIX . $box_categories_array[$i]['count'] . CATEGORIES_COUNT_SUFFIX . '</span>';
        }
      }
      /*#### Wel*/
      if ($new_style == 'category-products' || $new_style == 'category-subs') { $close_tag = '</div>'; } else { $close_tag = '</div>'; };
      /*#### /Wel*/

      $content .= $close_tag . "\n";
    }
  }

  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') {
      $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>' . '<br />' . "\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 .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>' . '<br />' . "\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 .= '<a class="category-links" href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a>' . '<br />' . "\n";
      }
    }
    if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') {
      $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a>' . "\n";
    }
  }
  $content .= '</div>';
?>

Then.. open your CSS file in relevent CUSTOM folder and add the following... (you will need to add the custom image to your images folder...) to give you your bullet point image

---
A.category-top, A.category-top:visited {

font-family: arial;

font-style: normal;

font-variant: normal;

font-weight: normal;

font-size: 12px;

line-height: normal;

font-size-adjust: none;

font-stretch: normal;

-x-system-font: none;

text-decoration: none;

padding-top: 0pt;

padding-right: 0pt;

padding-bottom: 0pt;

padding-left: 9px;

background-color: transparent;

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

background-repeat: no-repeat;

background-attachment: scroll;

background-position: 0pt 4px;

}
---
and
----

.categories-top-list {

padding-top: 4px;

padding-right: 0pt;

padding-bottom: 4px;

padding-left: 0pt;

background-color: transparent;

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

background-repeat: repeat-x;

background-attachment: scroll;

background-position: 0pt top;

}

---
to add and line under the link,, again creating your own CUSTOM2.gif in the images folder

sorry if the info here is a bit unclear.. i have had 4 pints of Thwaites Century Ale.. so a bit drunk

x

[gjh42]

Yes, that is a good way to do it. It could also be done by just removing the . '<br />' from this line as you have done:

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

and then making

a.category-top {
    display: list-item;
    list-style: disc inside url(../images/your_arrow.gif);
    border-top: 1px dotted #aaaaaa;
    }
a.category-first {
    display: list-item;
    list-style: disc inside url(../images/your_arrow.gif);
    }

a.category-subs, a.category-products {
    display: block; /*or list-item with another arrow type if desired*/
    }

You would need to follow the commented example and make the first category custom-tagged with a
$new_style = 'category-first';

This part can be accomplished with CSS alone in modern browsers, but IE6 does not recognize the "first-child" operator in CSS.


And hooray for good ale ;)

[Shane78]

Thanks gjh42..

i hardly remember making that post last night, lol,, strong beer!

trust me to make it overly complicated...