Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

make boxes slightly opaque


Iniquityclothing

Recommended Posts

hi folks,

is it possible to make infoboxes etc have an opaque background? so for example if the BG colour was red i could set the opacity so that the site's BG image was almost visible through the infobox causing the background colour to appear pink with the sites background showing through?

also how can i encapulate the text from /languages/english/index.php inside a box (wich i also want opaque)?

 

cheers folks :thumbsup:

View recent 'helpfull' threads:

 

403 Error problems | Ultimate SEO (contribution support)

Link to comment
Share on other sites

:-)

Monika

 

addicted to writing code ... can't get enough of databases either, LOL!

 

my toolbox: Textpad - Compare and Merge - phpMyAdmin - WS_FTP - Photoshop - How to search the forum

 

Interactive Media Award July 2007 ~ category E-Commerce

my advice on the forum is for free, PMs where you send me work are considered consultation which I charge for ...

Link to comment
Share on other sites

WAIT!!!!

 

 

i think you're gonna run headlong into the shop's inferior html source...

 

one of the first posts i placed at this forum was a comment on the incredible attention to the php but incredible lack of attention to the html it generates...

 

i believe you're going to be running into this - particularly how the boxes are rendered - specifically their borders -- for they aren't borders at all!!!!

 

the "borders" are really made by containing tables with bg color and padding of 1px - hence an illusion of a border...

 

what you'll want to do is pop all tables you want transparent out of its containing tables (delete surrounding tables) and add you borders the proper way > directly to the table...

 

then you can play around with transparencies - else you will just be making a transparency to the "fake border" containing table - yes there is some really lousy default html in osc....

Link to comment
Share on other sites

thanks for the heads up, so how would i start?? I want the text which is displayed when you enter the site to be inside of a box (with rounded edge) that is see through so the bg image of my site is still visible?

View recent 'helpfull' threads:

 

403 Error problems | Ultimate SEO (contribution support)

Link to comment
Share on other sites

ha - tricky you got it (some posting while i wasn't looking)

 

i'm darned surprised -

 

however, what i mention still holds true (i believe) --

 

is their actually a justification to the borders fake like the method in osc???

please let me know...

 

i do know missing tags in the osc default html is plain wrong -- the table in table to create a border works, but i am under the impression such is very undesired...

 

 

 

 

ahh - you keep posting when i'm not lookin.... :D

 

ok - give me a moment to supply answer...

Link to comment
Share on other sites

ok, of course, you got to edit

- images/infobox/corner_left.gif

- images/infobox/corner_right.gif

to be transparent gif's so that desired transparent part is indeed transparent...

 

then open includes/classes/boxes.php for editing

- (little past halfway down) change

  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');
  }

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

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

the last part of quoted code to

  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');
  }

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

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

then make same changes for the class contentBoxHeading (a little lower)

 

this ends step one - let me know what the result is...

 

---------------------

hmmm..

are your

- images/infobox/corner_left.gif

- images/infobox/corner_right.gif

already transparent??

Link to comment
Share on other sites

step two - optional...

define TD.infoBoxCorner in your css..

 

 

TD.infoBoxCorner {

background: none;

}

 

notes:

- i mispelled infoBoxCorner in previous post as "infoBoxCourner" - not that it matters - but officially what you edit in the boxes.php should have the same spelling in your css

 

- also - an edit option might sinply remove class="infoBoxHeading" instead of changin it - then you wouldn't have to edit the css (as if you do in this case, anyway)

 

example:

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

Link to comment
Share on other sites

that should take care of the rounded corner for box headings....

 

concerning what i was saying earlier about the table in table to create a fake border

 

the content of these boxes appear in a table of the css class "infoBoxContents" - all well and good - BUT to make the border for these boxes they place that table in another table of the css class "infoBox"

 

resulting html is:

 

........

<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>

........

 

 

AND in the stylesheet.css "infoBox" is defined as:

 

.infoBox {

background: #b6b7cb;

}

 

SO..

if you make the css class "infoBoxContents" transparent then you'll only see through to the containing "infoBox" table...

 

-----------------------------------------------

 

merely establishing a border should not require a whole containing table when you can simply css it like so...

 

.infoBoxContents {

background: #f8f8f9;

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

font-size: 10px;

border: 1px solid #b6b7cb;

}

 

 

................................

Iniquityclothing, can you follow me - how you making out?

Link to comment
Share on other sites

WAIT!!!!

i think you're gonna run headlong into the shop's inferior html source...

 

one of the first posts i placed at this forum was a comment on the incredible attention to the php but incredible lack of attention to the html it generates...

 

i believe you're going to be running into this - particularly how the boxes are rendered - specifically their borders -- for they aren't borders at all!!!!

 

the "borders" are really made by containing tables with bg color and padding of 1px - hence an illusion of a border...

 

what you'll want to do is pop all tables you want transparent out of its containing tables (delete surrounding tables) and add you borders the proper way > directly to the table...

 

then you can play around with transparencies - else you will just be making a transparency to the "fake border" containing table - yes there is some really lousy default html in osc....

 

god, i just had to second this post. i remember going quite mad when i first got into osC and started trying to do what i thought should be simple CSS formatting, and almost nothing behaved as i thought it should. since then, i've done exactly what squeekit suggested, and where possible, lifted out as many of the tables as i could. i've often been puzzled about how the brains of the programmers must work when i see things nested 7 tables deep. i'll use a nested table myself, anytime i need to for layout, but only when i need to, and i try to not go more than 2 or 3 levels deep. so many of the tables in osC just seem gratuitous to me.

Link to comment
Share on other sites

  • 4 months later...

hi

 

If i name my boxes with multiple words the box title stretches to accomodate the name but the corner gif does not go in the corner (so i have no rounded boxes). Is this problem because of my modifications or is it applicable to the default install ?

 

 

Also, how do we add rounded corners without the use of gifs ?

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...