Category List

[aftabn10]

I was wondering if their is anyway I can use a background for the category list? So whenever a new category gets added in the admin section, it would show up with the background.

 

I have managed to add the following in my boxes/categories.php

 

<?php
/*
 $Id: categories.php,v 1.25 2003/07/09 01:13:58 hpdl Exp $

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 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 .= '<tr><td class="cat"><ul><li><a href="';

 

and the following in my stylesheet.

 

.cat{

background:url(images/categorybg.jpg) no-repeat;

}

 

The only problem is that the background image does show up, but seems like the height has been reduced for some reason.

 

Could somebody please tell me where i am going wrong?

 

Thanks in advance.

[jhande]

A background image will resize (actually get cut smaller) or repeat (bigger) to fit the container it is in (table <table> or table cell <td>).

 

So you will have to specify the height.

 

In your example:

 

boxes/categories.php

 

$categories_string .= '<tr><td height= "#" class="cat"><ul><li><a href="';

 

Replace the # with the height of your image.

[aftabn10]

A background image will resize (actually get cut smaller) or repeat (bigger) to fit the container it is in (table <table> or table cell <td>).

 

So you will have to specify the height.

 

In your example:

 

boxes/categories.php

 

$categories_string .= '<tr><td height= "#" class="cat"><ul><li><a href="';

 

Replace the # with the height of your image.

 

Thanks jhande, ill give that a go. I have also used an image for the category title, but their appears to be a gap between the header and the first category, how can i get rid of this gap?

[jhande]

Thanks jhande, ill give that a go. I have also used an image for the category title, but their appears to be a gap between the header and the first category, how can i get rid of this gap?

 

Without actually being able to see the code it's kind of difficult to say.

 

The standard osC for infoboxes uses a table for the header and nest a table within a table for the content. If you have any type of cellpadding or cellspacing within a table it can show as a gap.

 

Example:

<tr>

<td>

<table border="0" width="100%" cellspacing="0" cellpadding="0">

<tr>

<td height="18" class="infoBoxHeading"><img src="images/infobox/corner_left.gif" border="0" alt=""></td>

<td width="100%" height="18" class="infoBoxHeading">Categories</td>

<td height="18" class="infoBoxHeading" nowrap><img src="images/infobox/corner_right.gif" border="0" alt=""></td>

</tr>

</table>

<table border="0" width="100%" cellspacing="0" cellpadding="1" class="infoBox">

<tr>

<td>

<table border="0" width="100%" cellspacing="0" cellpadding="3" class="infoBoxContents">

<tr>

<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>

</tr>

<tr>

<td class="boxText"><a href="All the Category links"</a><br></td>

</tr>

<tr>

<td><img src="images/pixel_trans.gif" border="0" alt="" width="100%" height="1"></td>

</tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

 

The red table tags are for the header.

The blue table tags are the main "containing" table which is the one that gives the 1 pixel colored border.

The purple table tags are the nested table that actually holds the infobox contents with a 3 pixel padding (links and/or text).

The green row tags (<tr> </tr>) contain a 1 pixel height transparent gif to add blank space.

So as you can see, there is a 5 pixel spacing or gap between the header and the infobox contents.

 

To really get the best design possibilities, especially using graphics, is to remove the containing table and just use the nestled table. But that's something I haven't done yet and doesn't look too easy with osC.

 

If you open includes > classesboxes.php you will see -

function infoBoxContents($contents) {

$this->table_cellpadding = '3';

 

You can try changing the 3 to a smaller number. Just keep in mind that it will effect all sides of the box contents (top, bottom, left & right).

 

You can also try commenting out the line(s) for the transparent gifs.

From this:

$info_box_contents[] = array(array('text' => tep_draw_separator('pixel_trans.gif', '100%', '1')));

To this:

//$info_box_contents[] = array(array('text' => tep_draw_separator('pixel_trans.gif', '100%', '1')));

 

Hope that helps some! ;)

[jhande]

I just tried the above edits. It worked for most infoboxes BUT, somewhere else is over riding the categories and manufacturers infoboxes. I still ended up with the row for the transparent gif and a cellpadding of 3. Even though I gave a cellpadding of 1 and commented out the transparent gif row.

 

All the other infoboxes changed though. I'll have to dig a little deeper.

 

Sorry! :blush:

[aftabn10]

I just tried the above edits. It worked for most infoboxes BUT, somewhere else is over riding the categories and manufacturers infoboxes. I still ended up with the row for the transparent gif and a cellpadding of 3. Even though I gave a cellpadding of 1 and commented out the transparent gif row.

 

All the other infoboxes changed though. I'll have to dig a little deeper.

 

Sorry! :blush:

 

Thanks jhande. i tried the same and the gap still shows up. So i guess we're both stuck! :P

[aftabn10]

Thanks jhande. i tried the same and the gap still shows up. So i guess we're both stuck! :P

 

Any ideas? Any1?