Categories Info Box

[Brunswick]

Hi,

 

In the documentation PDF there are instructions for replacing the heading text in the Categories box. One of the steps is to add the following code to the boxes.php file:

 

class infoBoxHeadingCategories extends tableBox {
function infoBoxHeadingCategories($contents) {
$this->table_cellpadding = '0';
$info_box_contents = array();
$info_box_contents[] = array(array('params' => 'width="100%" class="infoBoxHeadingCategories"',
'text' => $contents[0]['text']));
$this->tableBox($info_box_contents, true);
}
}

 

I'm looking for instructions to modify the link text appearance in the box itself. For example what would be the class name for the info box itself and what are the additional steps.

 

Thank you,

 

-Hank

[usernamenone]

If all you want to do is chang the text "Catagories" to Products or something else you open you catalog/includes/languages/english.php and find line 73

 

class infoBoxHeadingCategories extends tableBox {
function infoBoxHeadingCategories($contents) {
$this->table_cellpadding = '0';
$info_box_contents = array();
$info_box_contents[] = array(array('params' => 'width="100%" class="infoBoxHeadingCategories"',
'text' => $contents[0]['text']));
$this->tableBox($info_box_contents, true);
}
}

 

I'm looking for instructions to modify the link text appearance in the box itself. For example what would be the class name for the info box itself and what are the additional steps.

 

Thank you,

 

-Hank

[bkellum]

Hi,

 

I'm looking for instructions to modify the link text appearance in the box itself. For example what would be the class name for the info box itself and what are the additional steps.

 

Thank you,

 

-Hank

In stylesheet.css, look for

• .infoBox {
  background: #b6b7cb;
  }
  
• .infoBoxContents {
  background: #f8f8f9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  }
  
• .infoBoxNotice {
  background: #FF8E90;
  }
  
• .infoBoxNoticeContents {
  background: #FFE6E6;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  }
  
• TD.infoBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #bbc3d3;
  color: #ffffff;
  }
  
• TD.infoBox, SPAN.infoBox {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  }
  

Changing any of the above will allow you to style the appearance of your text in the various infoboxes.

 

Hope this helped,

[Brunswick]

If all you want to do is chang the text "Catagories" to Products or something else you open you catalog/includes/languages/english.php and find line 73

 

define('BOX_HEADING_CATEGORIES', 'Categories');

 

and change the Catagories to something else.

 

Well no, that wasn't my problem. I realize that you can simply change the heading text to something else. My reference to the code found on page 90 in the Documentation PDF has to do with somebody wanting to change the text in the heading to an image (of the heading) and of course you have to then specifically target that "box heading" data cell. What I want to do is change the font face and/or color and/or or boldness of the links that appear below the heading without affecting the text in the other boxes or, for that matter, the links elsewhere on the page.

 

My reasoning is that if it is possible to specifically target the heading part of that single box, it must also be possible through a style tag to target the links part of that particular (Categories) box as well. As noted in the Documentation PDF instructions, that seems to require modifcation to three (3) separate php files. What I need is a repeat of the instructions on page 90 but with the "infoBoxHeadingCategories" designation changed to the correct one for the "links" part in the lower part of the box. Maybe it's not as complicated as I think. In any event, right now I don't know where to start.

 

-Hank :)

[Brunswick]

In stylesheet.css, look for

• .infoBox {
  background: #b6b7cb;
  }
  
• .infoBoxContents {
  background: #f8f8f9;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  }
  
• .infoBoxNotice {
  background: #FF8E90;
  }
  
• .infoBoxNoticeContents {
  background: #FFE6E6;
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  }
  
• TD.infoBoxHeading {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  font-weight: bold;
  background: #bbc3d3;
  color: #ffffff;
  }
  
• TD.infoBox, SPAN.infoBox {
  font-family: Verdana, Arial, sans-serif;
  font-size: 10px;
  }
  

Changing any of the above will allow you to style the appearance of your text in the various infoboxes.

 

Hope this helped,

 

Thank you very much for your input. I'm not entirely sure, but I get the impression that making the change to the areas you suggest would affect text in all the boxes not just the "Categories" one by itself. Can you clarify this a bit. In my comments to "usernamenone" I've tried to explain what I think I need.

 

Look forward to your further input. Thanks,

 

-Hank :)

[bkellum]

Thank you very much for your input. I'm not entirely sure, but I get the impression that making the change to the areas you suggest would affect text in all the boxes not just the "Categories" one by itself. Can you clarify this a bit. In my comments to "usernamenone" I've tried to explain what I think I need.

 

Look forward to your further input. Thanks,

 

-Hank :)

Yes Hank, that is correct. The above effects ALL of the infoboxes.

In order to edit individual infoboxes separately, you would need to create a new style class in includes/classes/boxes.php as well as add the class in the Stylesheet.css and then link to it in the boxes/categories.php file.

 

The following contribution will give you an example of what I am referring to:

http://www.oscommerce.com/community/contributions,1261

 

I know, it's old, but the principal still applies.

Hope this helped you out.

[Brunswick]

Yes Hank, that is correct. The above effects ALL of the infoboxes.

In order to edit individual infoboxes separately, you would need to create a new style class in includes/classes/boxes.php as well as add the class in the Stylesheet.css and then link to it in the boxes/categories.php file.

 

The following contribution will give you an example of what I am referring to:

http://www.oscommerce.com/community/contributions,1261

 

I know, it's old, but the principal still applies.

Hope this helped you out.

 

Thank you very much for that one. I unpacked that particular contribution and managed to create specific controls for the Categories box, that don't affect the other boxes, which is exactly what I wanted to accomplish. Because it was an older contribution I did not follow the suggestion to simply replace all the files but modified the files in the current version as best I could. Anyway it appears to work because I can now manipulate text size and font face. :thumbsup:

 

A {
 color: #000000;
 text-decoration: none;
}

A:hover {
 color: #AABBDD;
 text-decoration: underline;
}

 

Because these are links, however, the A tag and A.hover tag (see above) in the stylesheet is overriding my color and text-decoration attributes here:

 

.CategoriesBox {
 background: #ffffff;
}
TD.CategoriesBoxHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 font-weight: bold;
 background: #b6b7cb;
 color: #ffffff;
}

.CategoriesBoxContents {
 background: #ffffff;
 font-family: Times, Verdana, Arial, sans-serif;
 font-size: 12px;
 color: green; text-decoration: none; font-weight: bold ;
}

 

I guess what I need is some code, specific to the CategoriesBoxContents which will control the link behavior in this specific box. I've tried any number of different ways to do this, but none seem to work.

 

Any suggestions on this? :)

 

-Hank

[bill110]

In catelog/includes/boxes/categories.php you could try to apply id selector to the anchor tag

and then assign the new stylesheet commands to that id

here is where it gets the category names and the a href tag

	$categories_string .= '<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) . '">';

You could change like this:

	$categories_string .= '<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) . '"ID="123">';

It is html 4 standard but not common.

[Brunswick]

In catelog/includes/boxes/categories.php you could try to apply id selector to the anchor tag

and then assign the new stylesheet commands to that id

here is where it gets the category names and the a href tag

A.headerNavigation { 
 color: #FFFFFF; 
}

A.headerNavigation:hover {
 color: #ffffff;
}

but then applying to the "CategoriesBoxContents". I'm thinking like "A.CategoriesBoxContents" or some such thing. As I see it, that has to be possible.

 

-Hank