Thinking outside of the, em Boxes?

[JohnnyQ]

Hi,

 

I want to change the look of the categories box.

 

In particular, the following things:

1) Change the background colour to white

2) Remove the "Categories" title

3) Remove the "corner_left.gif" image

4) Remove the "number of products & brackets" after each category and sub category

 

I'm think some of it is controlled via the stylesheet, but am desperate to get the answers.

 

Thanks. :)

[241]

and so here is a start

 

HOW TO: give more functionality to the categories box

 

catalog/includes/classes/boxes.php add this code

 

  
//New CategoriesBox Class
class CategoriesBox extends tableBox {
  function CategoriesBox($contents) {
    $info_box_contents = array();
    $info_box_contents[] = array('text' => $this->CategoriesBoxContents($contents));
    $this->table_cellpadding = '1';
    $this->table_parameters = 'class="CategoriesBox"';
    $this->tableBox($info_box_contents, true);
  }

  function CategoriesBoxContents($contents) {
    $this->table_cellpadding = '3';
    $this->table_parameters = 'class="CategoriesBoxContents"';
    $info_box_contents = array();
    $info_box_contents[] = array(array('text' => tep_draw_separator('pixel_trans.gif', '100%', '1')));
    for ($i=0, $n=sizeof($contents); $i<$n; $i++) {
      $info_box_contents[] = array(array('align' => (isset($contents[$i]['align']) ? $contents[$i]['align'] : ''),
                                         'form' => (isset($contents[$i]['form']) ? $contents[$i]['form'] : ''),
                                         'params' => 'class="CategoriesBoxContents"',
                                         'text' => (isset($contents[$i]['text']) ? $contents[$i]['text'] : '')));
    }
    $info_box_contents[] = array(array('text' => tep_draw_separator('pixel_trans.gif', '100%', '1')));
    return $this->tableBox($info_box_contents);
  }
}

class CategoriesBoxHeading extends tableBox {
  function CategoriesBoxHeading($contents, $left_corner = true, $right_corner = true, $right_arrow = false) {
    $this->table_cellpadding = '0';

    if ($left_corner == true) {
      $left_corner = tep_image(DIR_WS_IMAGES . 'CategoriesBox/corner_left.gif');
    } else {
      $left_corner = tep_image(DIR_WS_IMAGES . 'CategoriesBox/corner_right_left.gif');
    }
    if ($right_arrow == true) {
      $right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . 'CategoriesBox/arrow_right.gif', ICON_ARROW_RIGHT) . '</a>';
    } else {
      $right_arrow = '';
    }
    if ($right_corner == true) {
      $right_corner = $right_arrow . tep_image(DIR_WS_IMAGES . 'CategoriesBox/corner_right.gif');
    } else {
      $right_corner = $right_arrow . tep_draw_separator('pixel_trans.gif', '11', '14');
    }

    $info_box_contents = array();
    $info_box_contents[] = array(array('params' => 'height="14" class="CategoriesBoxHeading"',
                                       'text' => $left_corner),
                                 array('params' => 'width="100%" height="14" class="CategoriesBoxHeading"',
                                       'text' => $contents[0]['text']),
                                 array('params' => 'height="14" class="CategoriesBoxHeading" nowrap',
                                       'text' => $right_corner));

    $this->tableBox($info_box_contents, true);
  }
}

 

then in catalog/includes/boxes/categories.php change this code

new infoBoxHeading($info_box_contents, true, false);

 

to this

 

new CategoriesBoxHeading($info_box_contents, true, false);

 

and this

 

new infoBox($info_box_contents);

 

to this

 

new CategoriesBox($info_box_contents);

 

then in the stylesheet.css add this

 

 
.CategoriesBox {
background: #b6b7cb;
}
TD.CategoriesBoxHeading {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
font-weight: bold;
background: #570000;
color: #ffffff;
}
.CategoriesBoxContents {
background: #f8f8f9;
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}
A.CategoriesBoxContents:hover {
font-family: Verdana, Arial, sans-serif;
font-style: normal;
font-weight: bold;
font-size: 10px;
color: #FFA500;
text-decoration: none;
}

 

 

make a directory in catalog/images/ called CategoriesBox and copy the images from catalog/images/infobox/ to the new directory catalog/images/CategoriesBox/

 

you now have full control over your categories box, remember to change the colours and fonts to what you want and if you want a different colour of hyperlink then call the class for hover

[241]

2) Remove the "Categories" title

catalog/includes/boxes/categories.php

 

$info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);

change to

// $info_box_contents[] = array('text' => BOX_HEADING_CATEGORIES);

[JohnnyQ]

241 - thanks for the input. You da man!!

 

I managed to get all the stuff above, so I'm well chuffed.

 

In the categories box, I want to display the text of all the parent categories in bold format from the outset (i.e. not just when they are clicked).

 

I think I've located the code that does the current job, which is in "catalog/includes/boxes/categories.php"

 

$categories_string .= '</b>';

 

Do you or any other osC guru know what code I need to manipulate to achieve the following:

1) Show all the text of the parent categories in 'Bold' text format (even when not clicked)

2) Show all the text of the sub-categories in 'Plain' text format (even when clicked)

 

Thanks in advance,

[Jamesface]

I have a related question. I would like to avoid using the tables altogether and simply pass a text string back consisting of the links (or whatever other content) with a class attribute, with a <br> separating each element. This will then be styled entirely in CSS.

 

I'm using categories.php as my guinea pig for this but I don't understand enough of the logic that categories.php and boxes.php use to get any meaningful output.

 

Can anyone help me please?

[gmsi]

[you now have full control over your categories box, remember to change the colours and fonts to what you want and if you want a different colour of hyperlink then call the class for hover]

 

Hi 241

 

Hmm.. I tried and tried , but for some reason i couldnot change the hyper link, it always use the A. class instead of A.CategoriesBoxContents.

Can you tell me by " call the class for hover"

 

http://server10.com/store2/index.php

it suppose to be red and yellow on over but...

 

would you tell me where do i made the changes for the hyperlink?

 

 

Thanks in advance,

 

regards

Asha

[goginan]

One of the weaknesses of CSS is that 'A.CategoriesBoxContents:hover' will work until the link is clicked then it becomes a:visited so won't display the hover effect, don't know of any work round. Don't know if this sheds light or not. ;)

[paulm2003]

One of the weaknesses of CSS is that 'A.CategoriesBoxContents:hover' will work until the link is clicked then it becomes a:visited so won't display the hover effect

a weakness of CSS? I'm afraid the weakness must be somewhere else ;)

I'm using CSS hovers all the time and the hovers work on visited and "normal" links without any problem. Do you have an example?

[edtiger]

not sure why this is but it might be the answer to goginan's question.

 

I was having problems getting the stylesheet properties for links for classes other than the default links. so I changed any code formatted similar to this:

 

A.CategoriesBoxContents:hover {

 

into this code

.CategoriesBoxContents a:hover {

 

and now all my links work like a beauty.

[paulm2003]

http://server10.com/store2/index.php

it suppose to be red and yellow on over but...

there are some errrors in your stylesheet, and there's one just before your hover so it might be the cause

.CategoriesBoxContents {
font-family: Verdana, Arial, sans-serif;
font-weight:;
BACKGROUND-IMAGE:url('images/CategoriesBox/.gif');
color: #FF6600;
FONT-SIZE: 10px;
height: 18px;
padding-left: px;
line-height:18px;}
}
A.CategoriesBoxContents:hover {
 color: #000000;
}

or more specific, there's a bracket to much here:

	line-height:18px;}
}

 

hth