Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

TD.infoBoxHeading Colors


Avocet

Recommended Posts

I am having problems with the corners of the table headings remaining at the default color #bbc3d3 even though I have edited the css file to change the color to #42639c. The main portion is correct, it's just the corners that are incorrect. I'm stumped. Site can be seen at:

http://abwaterbeds.com/oscommerce/

TIA

Bill

 

Hi! Your corners are actually gif's located in images/infobox/corner_right.gif (rounded), corner_left.gif (rounded), and corner_right_left.gif (square) Edit these in your favorite paint program to match your background and heading color, then upload them and name to default style or new (like we did). The default size in 11x14, but you can change the size too, then modify the line height to match it. If you wish to change the size or the type you can modify the call in 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_left22.gif');

} else {

$left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_left22.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_right22.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="22" class="infoBoxHeading"',

'text' => $left_corner),

array('params' => 'width="100%" height="22" class="infoBoxHeading"',

'text' => $contents[0]['text']),

array('params' => 'height="22" class="infoBoxHeading" nowrap',

'text' => $right_corner));

 

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

}

}

 

class contentBox extends tableBox {

function contentBox($contents) {

$info_box_contents = array();

$info_box_contents[] = array('text' => $this->contentBoxContents($contents));

$this->table_cellpadding = '1';

$this->table_parameters = 'class="infoBox"';

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

}

 

function contentBoxContents($contents) {

$this->table_cellpadding = '4';

$this->table_parameters = 'class="infoBoxContents"';

return $this->tableBox($contents);

}

}

 

class contentBoxHeading extends tableBox {

function contentBoxHeading($contents) {

$this->table_width = '100%';

$this->table_cellpadding = '0';

 

$info_box_contents = array();

$info_box_contents[] = array(array('params' => 'height="22" class="infoBoxHeading"',

'text' => tep_image(DIR_WS_IMAGES . 'infobox/corner_left22.gif')),

array('params' => 'height="22" class="infoBoxHeading" width="100%"',

'text' => $contents[0]['text']),

array('params' => 'height="22" class="infoBoxHeading"',

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

 

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

 

Then in includes/boxes for each box you want to modify the corner image, you would change the true false statement accordingly if you want it or not.

 

BOX_HEADING_YOUR_BOX

);

new infoBoxHeading($info_box_contents, false, true);

 

In your catalog/stylesheet.css you can alter the color for the background, and if you wish create an image based box header like this:

 

TD.infoBoxHeading {

font-family: Verdana, Arial, sans-serif;

font-size: 10px;

font-weight: bold;

background: #9900CC; --behind the image--

background-image: url('images/infobox/bar22.gif'); --a 1x22 px gradient image--

background-attachment: fixed; --anchor--

background-repeat: repeat; --100% wide image--

color: #ffffff; --text color--

}

 

 

I hope this is of some help to you an/or anyone else that can benefit from it. You can take a look at our shoppe and see what we've done to the boxes. :rolleyes:

 

http://www.giftsyouwanttokeep.com/ecommerce/os/catalog/

We help each other, to help ourselves!

Aloha Allison!

 

Liken to wrinkles, the many paths of my life not only altered my destiny, but my appearance.

 

Poetry, the artistry of plying ones soul to the empty canvases of life. A vision without sight. A verse without darkness. Lighting each day with a prose of beauty and love.

Link to comment
Share on other sites

:angry:

Hi! Your corners are actually gif's located in images/infobox/corner_right.gif (rounded), corner_left.gif (rounded), and corner_right_left.gif (square)? Edit these in your favorite paint program to match your background and heading color, then upload them and name to default style or new (like we did). The default size in 11x14, but you can change the size too, then modify the line height to match it. If you wish to change the size or the type you can modify the call in 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_left22.gif');

? ? ? } else {

? ? ? ? $left_corner = tep_image(DIR_WS_IMAGES . 'infobox/corner_left22.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_right22.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="22" class="infoBoxHeading"',

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?  'text' => $left_corner),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?  array('params' => 'width="100%" height="22" class="infoBoxHeading"',

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?  'text' => $contents[0]['text']),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?  array('params' => 'height="22" class="infoBoxHeading" nowrap',

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?  'text' => $right_corner));

 

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

? ? }

? }

 

? class contentBox extends tableBox {

? ? function contentBox($contents) {

? ? ? $info_box_contents = array();

? ? ? $info_box_contents[] = array('text' => $this->contentBoxContents($contents));

? ? ? $this->table_cellpadding = '1';

? ? ? $this->table_parameters = 'class="infoBox"';

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

? ? }

 

? ? function contentBoxContents($contents) {

? ? ? $this->table_cellpadding = '4';

? ? ? $this->table_parameters = 'class="infoBoxContents"';

? ? ? return $this->tableBox($contents);

? ? }

? }

 

? class contentBoxHeading extends tableBox {

? ? function contentBoxHeading($contents) {

? ? ? $this->table_width = '100%';

? ? ? $this->table_cellpadding = '0';

 

? ? ? $info_box_contents = array();

? ? ? $info_box_contents[] = array(array('params' => 'height="22" class="infoBoxHeading"',

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?  'text' => tep_image(DIR_WS_IMAGES . 'infobox/corner_left22.gif')),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?  array('params' => 'height="22" class="infoBoxHeading" width="100%"',

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?  'text' => $contents[0]['text']),

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?  array('params' => 'height="22" class="infoBoxHeading"',

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

 

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

 

Then in includes/boxes for each box you want to modify the corner image, you would change the true false statement accordingly if you want it or not.

 

BOX_HEADING_YOUR_BOX

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? );

? new infoBoxHeading($info_box_contents, false, true);

 

In your catalog/stylesheet.css you can alter the color for the background, and if you wish create an image based box header like this:

 

TD.infoBoxHeading {

? font-family: Verdana, Arial, sans-serif;

? font-size: 10px;

? font-weight: bold;

? background: #9900CC; --behind the image--

? background-image: url('images/infobox/bar22.gif'); --a 1x22 px gradient image--

? background-attachment: fixed; --anchor--

? background-repeat: repeat; --100% wide image--

? color: #ffffff; --text color--

}

I hope this is of some help to you an/or anyone else that can benefit from it. You can take a look at our shoppe and see what we've done to the boxes.?  :rolleyes:

 

http://www.giftsyouwanttokeep.com/ecommerce/os/catalog/

 

what i do pixel_trans.gif file ?

 

my corners are not square because there is pixel_trans.gif file..

 

:angry:

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...