Tables and HTML editing... where & how?

[jhande]

It has been awhile since I edited any files within my osC install. I am now getting back to playing around with it and I'm going crazy, well... ok, I've always been a bit nuts LOL.

 

What I am trying to do is edit simple HTML code such as this example:

 

<table border="0" width="100%" cellspacing="0" cellpadding="0">
 <tr>
<td height="14" class="infoBoxHeading"><img src="images/infobox/corner_right_left.gif" border="0" alt=""></td>
<td width="100%" height="14" class="infoBoxHeading">Manufacturers</td>
<td height="14" class="infoBoxHeading" nowrap><img src="images/pixel_trans.gif" border="0" alt="" width="11" height="14"></td>
 </tr>

</table>

 

I want to change: images/pixel_trans.gif to something like - images/infobox/corner_right.gif but I can't seem to find where the HTML code is to edit.

 

I realize I can start editing the stylesheet and add classes for everything, I just thought it would be easier editing the HTML code. I would assume it is somewhere since the same stylesheet class is used for all three table cells - "infoBoxHeading".

 

Lost in searching for code... :'(

Jim

[jhande]

Before I add the contribution - Graphical Borders v2.1, I am wondering if there is still an answer to my question above.

 

I have done some more digging and reading and "think" this might be what needs editing but don't know how?? I mean, it looks like it should be giving me the results I am after but it is not.

 

File: catalog\includes\classes\boxes.php

 

class infoBoxHeading extends tableBox {
function infoBoxHeading($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 . 'infobox/corner_left.gif');
  } else {
	$left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif');
  }
  if ($right_arrow == true) {
	$right_arrow = '<a href="' . $right_arrow . '">' . tep_image(DIR_WS_IMAGES . 'infobox/arrow_right.gif', ICON_ARROW_RIGHT) . '</a>';
  } else {
	$right_arrow = '';
  }
  if ($right_corner == true) {
	$right_corner = $right_arrow . tep_image(DIR_WS_IMAGES . 'infobox/corner_right.gif');
  } else {
	$right_corner = $right_arrow . tep_draw_separator('pixel_trans.gif', '11', '14');
  }

 

The out come I am after is to have the "corner_left.gif | corner_right_left.gif | corner_right.gif" above all my info boxes. Then I can replace the default GIF's with my own.

 

What I have now is:

(left column top info box) "corner_left.gif | corner_right_left.gif | corner_right_left.gif"

(right column top info box) "corner_right_left.gif | corner_right_left.gif | corner_right.gif"

all other lower info boxes "corner_right_left.gif | corner_right_left.gif | corner_right_left.gif".

 

Any idea's or should I install the above contribution?

[jhande]

Well I figured it out if anyone cares. I'll post what I did in case someone would like to make such a small and easy modification to their design layout. You can see my results here - Hande's Hobbies, with some artistic ability and changing of the graphic sizes you can come up with some nicer looking results I am sure as I just played around with this for about 20 minutes.

 

Open file:

stylesheet.css

 

Under this heading:

TD.infoBoxHeading

 

Add This:

background: url(images/infobox/corner_right_left.gif) repeat;

 

Save and upload!

 

Open file:

includes\classes\boxes.php

 

Look for this code (line 100):

 

class infoBoxHeading extends tableBox {
function infoBoxHeading($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 . 'infobox/corner_left.gif');
  } else {
	$left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_left.gif');
  }

 

Add right after the above, this code:

 

if ($right_corner == true) {
	$right_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_right.gif');
  } else {
	$right_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_right.gif');
  }

 

Scroll down to line 166 to this code:

 

'text' => tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif')));

 

And change it to:

 

'text' => tep_image(DIR_WS_IMAGES . 'infobox/corner_right.gif')));

 

Now you can go to the images\infobox folder and edit the GIF graphics in there. I didn't have much luck saving the corner images with a transparency as it showed a funky cloud on the web site. So I used my background image to blend the corners.

 

I guess now that I hacked a little on my own, I'm ready to see what that Graphical Borders v2.1 contribution is all about. :P

[javari78]

Well I figured it out if anyone cares. I'll post what I did in case someone would like to make such a small and easy modification to their design layout. You can see my results here - Hande's Hobbies, with some artistic ability and changing of the graphic sizes you can come up with some nicer looking results I am sure as I just played around with this for about 20 minutes.

 

Open file:

stylesheet.css

 

Under this heading:

TD.infoBoxHeading

 

Add This:

background: url(images/infobox/corner_right_left.gif) repeat;

 

Save and upload!

 

Open file:

includes\classes\boxes.php

 

Look for this code (line 100):

 

class infoBoxHeading extends tableBox {
function infoBoxHeading($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 . 'infobox/corner_left.gif');
  } else {
	$left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_left.gif');
  }

 

Add right after the above, this code:

 

if ($right_corner == true) {
	$right_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_right.gif');
  } else {
	$right_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_right.gif');
  }

 

Scroll down to line 166 to this code:

 

'text' => tep_image(DIR_WS_IMAGES . 'infobox/corner_right_left.gif')));

 

And change it to:

 

'text' => tep_image(DIR_WS_IMAGES . 'infobox/corner_right.gif')));

 

Now you can go to the images\infobox folder and edit the GIF graphics in there. I didn't have much luck saving the corner images with a transparency as it showed a funky cloud on the web site. So I used my background image to blend the corners.

 

I guess now that I hacked a little on my own, I'm ready to see what that Graphical Borders v2.1 contribution is all about. :P

 

thanks this is what i was looking for

[jhande]

thanks this is what i was looking for

 

You are welcome Melvin :thumbsup:

 

Glad to see someone found my hacking a bit useful. :D

 

Now off to figure out how to lower some of the tables to the bottom of the page! :-"