[Contribution] CSS Buttons Everywhere

[chooch]

hi

 

here is the text for the CCGV redeem gift voucher button on the checkout_payment page....

 

.... thisRedem button is the only one in my store that still shows the stock buttons and doesn't convert a to CSS button - please look at the text and advise me on what needs to be changed to get it working

 

 

$image_submit = '<input type="image" name="submit_redeem" onClick="submitFunction()" src="' . DIR_WS_LANGUAGES . $language . '/images/buttons/button_redeem.gif" border="0" alt="' . IMAGE_REDEEM_VOUCHER . '" title = "' . IMAGE_REDEEM_VOUCHER . '">';

 

 

please advice on what needs to be done to get rid of the stock image redeem button and replace it with the CSS button

 

thanks

[blasto]

I'm using css buttons but suffring from the inconsistencies of browsers. I'd like to just use default buttons (windows, osx etc), but can't figure out how to this. I'm sure this is going to be simple....

 

cheers

[blasto]

I'm using css buttons but suffring from the inconsistencies of browsers. I'd like to just use default buttons (windows, osx etc), but can't figure out how to this. I'm sure this is going to be simple....

 

cheers

 

Sorry - I realise i have been unclear abour what i want here - I've commented out the .cssbutton part of my style sheet but some buttons are not system, just plain text, such as reviews - what should I be looking for to fix these?

 

cheers

[Bigredman74]

Sorry - I realise i have been unclear abour what i want here - I've commented out the .cssbutton part of my style sheet but some buttons are not system, just plain text, such as reviews - what should I be looking for to fix these?

 

cheers

 

Hi Paul,

 

osCommerce uses a combination of system buttons and images. When you comment out the .cssbutton part of the style sheet you will see the alt text for the images or the un-styled system buttons that the CSS Buttons Everywhere replaces.

 

To achieve the look you desire you will need to either change the way the buttons looks via the style sheet or go with image based buttons. Good luck.

 

All the best,

Tim

[blasto]

osCommerce uses a combination of system buttons and images. When you comment out the .cssbutton part of the style sheet you will see the alt text for the images or the un-styled system buttons that the CSS Buttons Everywhere replaces.

 

To achieve the look you desire you will need to either change the way the buttons looks via the style sheet or go with image based buttons. Good luck.

 

 

Hi Tim

 

Thanks for getting back. I solved the problem by comparing the code for the two different style buttons, for example in product_info.php:

 

<td class="main"><?php echo '<a href="' . tep_href_link(FILENAME_PRODUCT_REVIEWS, tep_get_all_get_params()) . '">' . tep_image_button('button_reviews.gif', IMAGE_BUTTON_REVIEWS) . '</a>'; ?></td>

<td class="main" align="right"><?php echo tep_draw_hidden_field('products_id', $product_info['products_id']) . tep_image_submit('button_in_cart.gif', IMAGE_BUTTON_IN_CART); ?></td>

 

and changed the code to:

 

<td class="main"><?php echo '<a href="' . tep_href_link(FILENAME_PRODUCT_REVIEWS, tep_get_all_get_params()) . '">' . tep_image_submit('button_reviews.gif', IMAGE_BUTTON_REVIEWS) . '</a>'; ?></td>

<td class="main" align="right"><?php echo tep_draw_hidden_field('products_id', $product_info['products_id']) . tep_image_submit('button_in_cart.gif', IMAGE_BUTTON_IN_CART); ?></td>

 

and I have my browser generated buttons. Problem is they look amazing on OSX browsers like Safari but a bit dull on IE. At least they are now consistent. I guess the reverse should work to get them all css generated? Would there be issues with this?

 

Thanks again

Edited February 15, 2006 by blasto

[Bigredman74]

...

and I have my browser generated buttons. Problem is they look amazing on OSX browsers like Safari but a bit dull on IE.

...

 

Also, don't forget that the default buttons that IE displays will change as the system's theme and color scheme changes.

[blasto]

Would there be issues with this?

errmm... yes. it breaks the buttons. scrub previous post!

[Guest]

Hi

 

I have just installed this contrib and I am having a problem with the quick find button (ie the one that looked like a magnifying glass before the contrib was installed).

 

My problem is that the above icon has been replaced by a css buttion (as expected) but now the left hand info boxes are twice the width that they should be. It looks pretty ugly.

 

Does anyone have a solution for this?

 

Thanks

[Guest]

Hi

 

I have just installed this contrib and I am having a problem with the quick find button (ie the one that looked like a magnifying glass before the contrib was installed).

 

My problem is that the above icon has been replaced by a css buttion (as expected) but now the left hand info boxes are twice the width that they should be. It looks pretty ugly.

 

Does anyone have a solution for this?

 

Thanks

 

Hmm, no reply means no support. My guess is that this contrib is dead in the water.

[Bigredman74]

Hmm, no reply means no support. My guess is that this contrib is dead in the water.

 

Hmm, no it means it's the weekend! Your original post is less than 24 hours old. You sound very impatient and rude for someone who is asking for assistance.

[Guest]

Hmm, no it means it's the weekend! Your original post is less than 24 hours old. You sound very impatient and rude for someone who is asking for assistance.

Thank you for the solution to the problem, however I have now removed this contrib fron my site.

[aodfan]

I have installed this contribution, but it seems that when I try to change the button via CSS, ie. the color of the button, it does not change at all, also some buttons do not even appear it is just a hyperlink? Anyone know what is going on with this?

 

Thanks

[Bigredman74]

I have installed this contribution, but it seems that when I try to change the button via CSS, ie. the color of the button, it does not change at all, also some buttons do not even appear it is just a hyperlink? Anyone know what is going on with this?

 

Thanks

 

Hi James,

 

It sounds like you need to check the file "catalog/includes/functions/html_output.php" for proper installation. Look closely at Steps 2 & 3; these are the functions that will create the CSS Buttons.

 

Let me know how it works out.

 

All the best,

Tim

[aodfan]

Hi James,

 

It sounds like you need to check the file "catalog/includes/functions/html_output.php" for proper installation. Look closely at Steps 2 & 3; these are the functions that will create the CSS Buttons.

 

Let me know how it works out.

 

All the best,

Tim

 

I went back and reinstalled it, and same thing, the modifications to the css button, does not change it on the catalog side. Stays as the generic buttons.....

[aodfan]

Hmmm, its weird, I even tried just what you based your contrib on and it still doesnt work properly, I have no idea what is going wrong....:(

[Bigredman74]

Hmmm, its weird, I even tried just what you based your contrib on and it still doesnt work properly, I have no idea what is going wrong....:(

 

James,

 

Are you using osCommerces MS2, or an osC variant (i.e. CRE, Zen, etc.)?

 

Tim

[azer]

Bigredman74 what about doing the same for the admin , cold you give us any tips ?

do you think your code could be used easily to change the admin button to use css ? :thumbsup:

[azer]

Here is the code i changed in catalog\admin\includes\functions\html_output.php and it seems to work for me :

 

 

/* ISH 12/03/06 CSS BUTTON EVERYWHERE IN ADMIN  BOF ***********************************
---------------- Debut de code original ----------------------------------------------------------

 function tep_image_submit($image, $alt = '', $parameters = '') {
global $language;

$image_submit = '<input type="image" src="' . tep_output_string(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image) . '" border="0" alt="' . tep_output_string($alt) . '"';

if (tep_not_null($alt)) $image_submit .= ' title=" ' . tep_output_string($alt) . ' "';

if (tep_not_null($parameters)) $image_submit .= ' ' . $parameters;

$image_submit .= '>';

return $image_submit;
 }
// ---------------- fin de code original ----------------------------------------------------------
*/
// BEGIN: CSS Buttons Everywhere

function tep_image_submit($image, $value = '-AltValue-', $parameters = '') {
global $language;
$css_submit = '<input type="submit" class="cssButton" value="' . tep_output_string($value) . '" />';
return $css_submit;
}
// END: CSS Buttons Everywhere
// ISH 12/03/06 CSS BUTTON EVERYWHERE IN ADMIN  EOF #########################################

 

/* ISH 12/03/06 CSS BUTTON EVERYWHERE IN ADMIN  BOF ***********************************
---------------- Debut de code original ----------------------------------------------------------

 function tep_image_button($image, $alt = '', $params = '') {
global $language;

return tep_image(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image, $alt, '', '', $params);
 }
// ---------------- fin de code original ----------------------------------------------------------
*/
// BEGIN: CSS Buttons Everywhere
function tep_image_button($image, $value = '-AltValue-', $params = '') {
global $language;
$image = '<div class="cssButton"> ' . tep_output_string($value) . ' </div>';
return $image;
}
// END: CSS Buttons Everywhere
// ISH 12/03/06 CSS BUTTON EVERYWHERE IN ADMIN  EOF #########################################

 

 

then u put in the admin/includes/stylesheet.css

 

/* BEGIN: CSS Buttons Everywhere */
.cssButton {
 background: #f0f0ff;
 color: #000080;
 width: 150px;
 height: 20px;
 vertical-align: top;
 font-weight: normal;
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 cursor: pointer;
 text-align: center;
 text-decoration: none;
 border: 1px;
 border-style: solid;
 border-color: #000080;
 border-spacing: 1px;
}
/* END: CSS Buttons Everywhere */

 

what do u think guys ?

 

for the .cssButton:active tips in the contribution , doesnt sems to work for me any ideas ?

[aodfan]

James,

 

Are you using osCommerces MS2, or an osC variant (i.e. CRE, Zen, etc.)?

 

Tim

 

I am using OSC MS2

[aodfan]

Hello Again, I still have a problem with this contribution, it seems that when I try to change the button via CSS, ie. the color of the button, it does not change at all, also some buttons do not even appear it is just a hyperlink? Anyone know what is going on with this? Examples below....

 

Thanks

 

[Bigredman74]

Hello Again, I still have a problem with this contribution, it seems that when I try to change the button via CSS, ie. the color of the button, it does not change at all, also some buttons do not even appear it is just a hyperlink? Anyone know what is going on with this? Examples below....

 

Thanks

 

Hi James,

 

I've seen this before. First, make sure you are using Update 3. Then recheck the install for html_output.php and the stylesheet. If you think it is installed correctly and it's still not working, either post or email your catalog/includes/functions/html_output.php and catalog/stylesheet.css files.

 

All the best,

Tim

[aodfan]

Thanks for the reply!

 

html_output.php

<?php
/*
 $Id: html_output.php,v 1.56 2003/07/09 01:15:48 hpdl Exp $

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

 Copyright (c) 2003 osCommerce

 Released under the GNU General Public License
*/

////
// Ultimate SEO URLs v2.1
// The HTML href link wrapper function
if (SEO_ENABLED == 'true') { //run chemo's code
 function tep_href_link($page = '', $parameters = '', $connection = 'NONSSL', $add_session_id = true, $search_engine_safe = true) {
	global $seo_urls;
			if ( !is_object($seo_urls) ){
					if ( !class_exists('SEO_URL') ){
							include_once(DIR_WS_CLASSES . 'seo.class.php');
					}
					global $languages_id;
					$seo_urls = new SEO_URL($languages_id);
			}
	return $seo_urls->href_link($page, $parameters, $connection, $add_session_id);
 }
} else { //run original code
// The HTML href link wrapper function
 function tep_href_link($page = '', $parameters = '', $connection = 'NONSSL', $add_session_id = true, $search_engine_safe = true) {
global $request_type, $session_started, $SID;

if (!tep_not_null($page)) {
  die('<br><br><font color="#ff0000"><b>Error!</b></font><br><br><b>Unable to determine the page link!<br><br>');
}

if ($connection == 'NONSSL') {
  $link = HTTP_SERVER . DIR_WS_HTTP_CATALOG;
} elseif ($connection == 'SSL') {
  if (ENABLE_SSL == true) {
	$link = HTTPS_SERVER . DIR_WS_HTTPS_CATALOG;
  } else {
	$link = HTTP_SERVER . DIR_WS_HTTP_CATALOG;
  }
} else {
  die('<br><br><font color="#ff0000"><b>Error!</b></font><br><br><b>Unable to determine connection method on a link!<br><br>Known methods: NONSSL SSL</b><br><br>');
}

if (tep_not_null($parameters)) {
  $link .= $page . '?' . tep_output_string($parameters);
  $separator = '&';
} else {
  $link .= $page;
  $separator = '?';
}

while ( (substr($link, -1) == '&') || (substr($link, -1) == '?') ) $link = substr($link, 0, -1);

// Add the session ID when moving from different HTTP and HTTPS servers, or when SID is defined
if ( ($add_session_id == true) && ($session_started == true) && (SESSION_FORCE_COOKIE_USE == 'False') ) {
  if (tep_not_null($SID)) {
	$_sid = $SID;
  } elseif ( ( ($request_type == 'NONSSL') && ($connection == 'SSL') && (ENABLE_SSL == true) ) || ( ($request_type == 'SSL') && ($connection == 'NONSSL') ) ) {
	if (HTTP_COOKIE_DOMAIN != HTTPS_COOKIE_DOMAIN) {
	  $_sid = tep_session_name() . '=' . tep_session_id();
	}
  }
}

if ( (SEARCH_ENGINE_FRIENDLY_URLS == 'true') && ($search_engine_safe == true) ) {
  while (strstr($link, '&&')) $link = str_replace('&&', '&', $link);

  $link = str_replace('?', '/', $link);
  $link = str_replace('&', '/', $link);
  $link = str_replace('=', '/', $link);

  $separator = '?';
}

if (!tep_session_is_registered('customer_id') && ENABLE_PAGE_CACHE == 'true' && class_exists('page_cache')) {
  $link .= $separator . '<osCsid>';
  } elseif (isset($_sid)) {
  $link .= $separator . $_sid;
  }

return $link;
 }
}

//// Automatic image thumbnailer
// Bobby Easland, 28 November 2005
 function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '') {
if ( (empty($src) || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) {
  return false;
}
if ($image_size = @getimagesize($src)) {
  if ((CONFIG_CALCULATE_IMAGE_SIZE == 'true' && $src != DIR_WS_IMAGES . 'pixel_black.gif' && $src != DIR_WS_IMAGES . 'pixel_trans.gif' && $src != DIR_WS_IMAGES . 'pixel_silver.gif' )) {
	if ( ($width) || ($height) ) {
		if ( $width=="100%" ) {
		  $width = $image_size[0];
		} elseif ( $height=="100%" ) {
		  $height = $image_size[1];
		} elseif ( $width==0 ) {
		  unset($width);
		} elseif ( $height==0 ) {
		  unset($height);
		}
		$src=thumbimage(DIR_FS_CATALOG . '/' .$src, $width, $height, 1, 1, DIR_FS_CATALOG . '/' . DIR_WS_IMAGES . 'imagecache');
		if ((($image_size[1]/$height) > ($image_size[0]/$width) ) && $height>0){
			 $width=ceil(($image_size[0]/$image_size[1])* $height);
		} elseif ($width>0) {
			 $height=ceil($width/($image_size[0]/$image_size[1]));
		}
	}
   }
  } elseif (IMAGE_REQUIRED == 'false') {
	return '';
  }

// alt is added to the img tag even if it is null to prevent browsers from outputting
// the image filename as default
$image = '<img src="' . tep_output_string($src) . '" border="0" alt="' . tep_output_string($alt) . '"';

if (tep_not_null($alt)) {
  $image .= ' title=" ' . tep_output_string($alt) . ' "';
}

if (tep_not_null($width) && tep_not_null($height)) {
  $image .= ' width="' . tep_output_string($width) . '" height="' . tep_output_string($height) . '"';
}

if (tep_not_null($parameters)) $image .= ' ' . $parameters;

$image .= '>';

return $image;
 }

//// Automatic image thumbnailer code
// Works with all images except animated GIF's
// Bobby Easland, 28 November 2005
function thumbimage ($image, $x, $y, $aspectratio, $resize, $cachedir){
 error_reporting(0);
 $types = array (1 => "gif", "jpeg", "png", "swf", "psd", "wbmp");
 $not_supported_formats = array (""); // Write in capital Letters!!
 umask(0);

   (!isset ($x) || ereg ('^[0-9]{1,}$', $x, $regs)) &&
   (!isset ($y) || ereg ('^[0-9]{1,}$', $y, $regs)) &&
   (isset ($x) || isset ($y))
		? true
	  : die ('Parameters are not set or are not numberic');

 !isset ($resize) || !ereg ('^[0|1]$', $resize, $regs)
	  ? $resize = 0
	  : $resize;

 !isset ($aspectratio) || !ereg ('^[0|1]$', $aspectratio, $regs)
	  ? isset ($x) && isset ($y)
			 ? $aspectratio = 1
			 : $aspectratio = 0
	  : $aspectratio;

 !isset ($image)
	  ? die ('Image is not set')
	  : !file_exists($image)
		   ? die ('The image does not exist')
		   : false;

 $imagedata = getimagesize($image);

 !$imagedata[2] || $imagedata[2] == 4 || $imagedata[2] == 5
	  ? die ('File is not a valid image file')
	  : false;

 $imgtype="!(ImageTypes() & IMG_" . strtoupper($types[$imagedata[2]]) . ")";
 if ((eval($imgtype)) || (in_array(strtoupper(array_pop(explode('.', basename($image)))),$not_supported_formats))) {
	 $image = substr ($image, (strrpos (DIR_FS_CATALOG . '/', '/'))+1);
	 return $image;

 }

 if (!isset ($x)) $x = floor ($y * $imagedata[0] / $imagedata[1]);
 if (!isset ($y)) $y = floor ($x * $imagedata[1] / $imagedata[0]);

 if ($aspectratio && isset ($x) && isset ($y)) {
	if ((($imagedata[1]/$y) > ($imagedata[0]/$x) )){
		 $x = ceil(($imagedata[0]/$imagedata[1])* $y);
	} else {
		 $y = ceil($x/($imagedata[0]/$imagedata[1]));
	}
 }

 $thumbfile =  '/' . $x . '-' . $y . '-' . basename($image);
 if (file_exists ($cachedir.$thumbfile)) {
	  $thumbdata = getimagesize ($cachedir.$thumbfile);
	  $thumbdata[0] == $x && $thumbdata[1] == $y
		   ? $iscached = true
		   : $iscached = false;
 } else {
	  $iscached = false;
 }

 if (!$iscached) {
	  ($imagedata[0] > $x || $imagedata[1] > $y) || (($imagedata[0] < $x || $imagedata[1] < $y) && $resize)
		   ? $makethumb = true
		   : $makethumb = false;
 } else {
	  $makethumb = false;
 }

 if ($makethumb) {
	  $image = call_user_func("imagecreatefrom".$types[$imagedata[2]], $image);
	  if (function_exists("imagecreatetruecolor") && ($thumb = imagecreatetruecolor ($x, $y))) {
		$bg = imagecolorallocatealpha($thumb, 255, 255, 255, 127);				
		imagefill($thumb, 0, 0, $bg);
		imagecolortransparent($thumb, $bg);
		imagecopyresampled ($thumb, $image, 0, 0, 0, 0, $x, $y, $imagedata[0], $imagedata[1]);
	  } else {
		$thumb = imagecreate ($x, $y);
		imagecopyresized ($thumb, $image, 0, 0, 0, 0, $x, $y, $imagedata[0], $imagedata[1]);
	  }
	  call_user_func("image".$types[$imagedata[2]], $thumb, $cachedir.$thumbfile);
	  imagedestroy ($image);
	  imagedestroy ($thumb);
	  $image = DIR_WS_IMAGES . 'imagecache' . $thumbfile;
 } else {
	  $iscached
		   ? $image = DIR_WS_IMAGES . 'imagecache' . $thumbfile
		   : $image = substr ($image, (strrpos (DIR_FS_CATALOG . '/', '/'))+1);
 }
return $image;
} # end function


////
// The HTML image wrapper function
// modified: Eric Covert, 2005
// version: 1.2
/* 
Modified to allow calls to this function to determine whether or not to allow images to stretch. Original modification was designed to force images to maintain their aspect ratio when being resized. Subsequent modifications include changing the default of the stretch variable to "false" and making smaller images not expand. Thus, if an images dimensions are both smaller than the passed in width and height variables, the original dimensions will be used.
*/
 function tep_image_old($src, $alt = '', $width = '', $height = '', $parameters = '', $stretch='false') {
if ( (empty($src) || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) {
  return false;
}
// alt is added to the img tag even if it is null to prevent browsers from outputting
// the image filename as default
$image = '<img src="' . tep_output_string($src) . '" border="0" alt="' . tep_output_string($alt) . '"';

if (tep_not_null($alt)) {
  $image .= ' title=" ' . tep_output_string($alt) . ' "';
}

if ( (CONFIG_CALCULATE_IMAGE_SIZE == 'true') )
	{
		if ($image_size = @getimagesize($src))
		{
			if (empty($width) && tep_not_null($height))
			{
				if (($image_size[1] < $height) && ($stretch=='false'))
				{
					// EC - if width hasn't been passed in, the image height is smaller than the setting, and stretch is false, use original dimensions
					$width=$image_size[0];
					$height=$image_size[1];
				}
				else
				{
					// EC - if width hasn't been passed, and the image height is larger than the setting, height ends up as the setting and width is modified to suit
				  $ratio = $height / $image_size[1];
				  $width = $image_size[0] * $ratio;
				}
			}
			elseif (tep_not_null($width) && empty($height))
			{
					// EC - if height hasn't been passed in, the image width is smaller than the setting, and stretch is false, use original dimensions
				if (($image_size[0] < $width) && ($stretch=='false'))
				{
					$width=$image_size[0];
					$height=$image_size[1];
				}
				else
				{
					// EC - if height hasn't been passed, and the image width is larger than the setting, width ends up as the setting and height is modified to suit
				  $ratio = $width / $image_size[0];
				  $height = $image_size[1] * $ratio;
				}
			}
			elseif (empty($width) && empty($height))
			{
				// EC - if neither height nor width are passed in, just use the original dimensions
			  $width = $image_size[0];
			  $height = $image_size[1];
			}
			//EC - added the following elseif for calculating based on stretch/no-stretch
			elseif (tep_not_null($width) && tep_not_null($height))
			{
				if ((($image_size[0] > $width) || ($image_size[1] > $height)) && ($stretch=='false'))
				{
					// EC - if width and height are both passed in, either original height or width are larger than the setting, and stretch is false, resize both dimensions to suit
					$new_ratio=$height / $width;
					$image_ratio=$image_size[1] / $image_size[0];
					if ($new_ratio >= $image_ratio)
					{
						$height=$image_size[1]*($width/$image_size[0]);
					}
					else
					{
						$width=$image_size[0]*($height/$image_size[1]);
					}
				}
				elseif ($stretch=='false')
				{
					// EC - if we got here, both width and height have been passed in, both original height and width are smaller than setting, and stretch is set to false. So just use original dimensions.
					$width=$image_size[0];
					$height=$image_size[1];
				}
			}
		}
		elseif (IMAGE_REQUIRED == 'false')
		{
			return false;
		}
	}

if (tep_not_null($width) && tep_not_null($height)) {
  $image .= ' width="' . tep_output_string($width) . '" height="' . tep_output_string($height) . '"';
}

if (tep_not_null($parameters)) $image .= ' ' . $parameters;

$image .= '>';

return $image;
 }

////
// The HTML form submit button wrapper function
// Outputs a button in the selected language
// BEGIN: CSS Buttons Everywhere
function tep_image_submit($image, $value = '-AltValue-', $parameters = '') {
global $language;
$css_submit = '<input type="submit" class="cssButton" value="' . tep_output_string($value) . '" />';
return $css_submit;
}
// END: CSS Buttons Everywhere

////
// Output a function button in the selected language
// BEGIN: CSS Buttons Everywhere
function tep_image_button($image, $value = '-AltValue-', $parameters = '') {
global $language;
$image = '<div class="cssButton"> ' . tep_output_string($value) . ' </div>';
return $image;
}
// END: CSS Buttons Everywhere

////
// Output a separator either through whitespace, or with an image
 function tep_draw_separator($image = 'pixel_black.gif', $width = '100%', $height = '1') {
return tep_image(DIR_WS_IMAGES . $image, '', $width, $height);
 }

////
// Output a form
 function tep_draw_form($name, $action, $method = 'post', $parameters = '') {
$form = '<form name="' . tep_output_string($name) . '" action="' . tep_output_string($action) . '" method="' . tep_output_string($method) . '"';

if (tep_not_null($parameters)) $form .= ' ' . $parameters;

$form .= '>';

return $form;
 }

////
// Output a form input field
 function tep_draw_input_field($name, $value = '', $parameters = '', $type = 'text', $reinsert_value = true) {
$field = '<input type="' . tep_output_string($type) . '" name="' . tep_output_string($name) . '"';

if ( (isset($GLOBALS[$name])) && ($reinsert_value == true) ) {
  $field .= ' value="' . tep_output_string(stripslashes($GLOBALS[$name])) . '"';
} elseif (tep_not_null($value)) {
  $field .= ' value="' . tep_output_string($value) . '"';
}

if (tep_not_null($parameters)) $field .= ' ' . $parameters;

$field .= '>';

return $field;
 }

////
// Output a form password field
 function tep_draw_password_field($name, $value = '', $parameters = 'maxlength="40"') {
return tep_draw_input_field($name, $value, $parameters, 'password', false);
 }

////
// Output a selection field - alias function for tep_draw_checkbox_field() and tep_draw_radio_field()
 function tep_draw_selection_field($name, $type, $value = '', $checked = false, $parameters = '') {
$selection = '<input type="' . tep_output_string($type) . '" name="' . tep_output_string($name) . '"';

if (tep_not_null($value)) $selection .= ' value="' . tep_output_string($value) . '"';

if ( ($checked == true) || ( isset($GLOBALS[$name]) && is_string($GLOBALS[$name]) && ( ($GLOBALS[$name] == 'on') || (isset($value) && (stripslashes($GLOBALS[$name]) == $value)) ) ) ) {
 $selection .= '';
}

if (tep_not_null($parameters)) $selection .= ' ' . $parameters;

$selection .= '>';

return $selection;
 }

////
// Output a form checkbox field
 function tep_draw_checkbox_field($name, $value = '', $checked = false, $parameters = '') {
return tep_draw_selection_field($name, 'checkbox', $value, $checked, $parameters);
 }

////
// Output a form radio field
 function tep_draw_radio_field($name, $value = '', $checked = false, $parameters = '') {
return tep_draw_selection_field($name, 'radio', $value, $checked, $parameters);
 }

////
// Output a form textarea field
 function tep_draw_textarea_field($name, $wrap, $width, $height, $text = '', $parameters = '', $reinsert_value = true) {
$field = '<textarea name="' . tep_output_string($name) . '" wrap="' . tep_output_string($wrap) . '" cols="' . tep_output_string($width) . '" rows="' . tep_output_string($height) . '"';

if (tep_not_null($parameters)) $field .= ' ' . $parameters;

$field .= '>';

if ( (isset($GLOBALS[$name])) && ($reinsert_value == true) ) {
  $field .= stripslashes($GLOBALS[$name]);
} elseif (tep_not_null($text)) {
  $field .= $text;
}

$field .= '</textarea>';

return $field;
 }

////
// Output a form hidden field
 function tep_draw_hidden_field($name, $value = '', $parameters = '') {
$field = '<input type="hidden" name="' . tep_output_string($name) . '"';

if (tep_not_null($value)) {
  $field .= ' value="' . tep_output_string($value) . '"';
} elseif (isset($GLOBALS[$name])) {
  $field .= ' value="' . tep_output_string(stripslashes($GLOBALS[$name])) . '"';
}

if (tep_not_null($parameters)) $field .= ' ' . $parameters;

$field .= '>';

return $field;
 }

////
// Hide form elements
 function tep_hide_session_id() {
global $session_started, $SID;

if (($session_started == true) && tep_not_null($SID)) {
  return tep_draw_hidden_field(tep_session_name(), tep_session_id());
}
 }

////
// Output a form pull down menu
 function tep_draw_pull_down_menu($name, $values, $default = '', $parameters = '', $required = false) {
$field = '<select name="' . tep_output_string($name) . '"';

if (tep_not_null($parameters)) $field .= ' ' . $parameters;

$field .= '>';

if (empty($default) && isset($GLOBALS[$name])) $default = stripslashes($GLOBALS[$name]);

for ($i=0, $n=sizeof($values); $i<$n; $i++) {
  $field .= '<option value="' . tep_output_string($values[$i]['id']) . '"';
  if ($default == $values[$i]['id']) {
	$field .= ' SELECTED';
  }

  $field .= '>' . tep_output_string($values[$i]['text'], array('"' => '"', '\'' => ''', '<' => '<', '>' => '>')) . '</option>';
}
$field .= '</select>';

if ($required == true) $field .= TEXT_FIELD_REQUIRED;

return $field;
 }

////
// Creates a pull-down list of countries
 function tep_get_country_list($name, $selected = '', $parameters = '') {
$countries_array = array(array('id' => '', 'text' => PULL_DOWN_DEFAULT));
$countries = tep_get_countries();

for ($i=0, $n=sizeof($countries); $i<$n; $i++) {
  $countries_array[] = array('id' => $countries[$i]['countries_id'], 'text' => $countries[$i]['countries_name']);
}

return tep_draw_pull_down_menu($name, $countries_array, $selected, $parameters);
 }
////

// Returns a drop-down list of active countries

 function tep_get_country_active_list($name, $selected = '', $parameters = '') {

// Return the pulldown populated with active countries

$countries_array = tep_get_active_countries();

if( count($countries_array) > 1 ) {

  return tep_draw_pull_down_menu($name, $countries_array, $selected, $parameters);

} else {

  return $countries_array[0]['text'];

}

 }
////rmh referral
// Creates a pull-down list of sources
 function tep_get_source_list($name, $show_other = false, $selected = '', $parameters = '') {
$sources_array = array(array('id' => '', 'text' => PULL_DOWN_DEFAULT));
$sources = tep_get_sources();

for ($i=0, $n=sizeof($sources); $i<$n; $i++) {
  $sources_array[] = array('id' => $sources[$i]['sources_id'], 'text' => $sources[$i]['sources_name']);
}

if ($show_other == 'true') {
  $sources_array[] = array('id' => '9999', 'text' => PULL_DOWN_OTHER);
}

return tep_draw_pull_down_menu($name, $sources_array, $selected, $parameters);
 }
?>

 

stylesheet.css

/*
 $Id: stylesheet.css,v 1.56 2003/06/30 20:04:02 hpdl Exp $

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

 Copyright (c) 2003 osCommerce

 Released under the GNU General Public License
*/

.boxText { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.errorBox { font-family : Verdana, Arial, sans-serif; font-size : 10px; background: #ffb3b5; font-weight: bold; }
.stockWarning { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #cc0033; }
.productsNotifications { background: #f2fff7; }
.orderEdit { font-family : Verdana, Arial, sans-serif; font-size : 10px; color: #70d250; text-decoration: underline; }

BODY {
 background: #ffffff;
 color: #000000;
 margin: 0px;
}

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

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

FORM {
display: inline;
}

TR.header {
 background: #ffffff;
}

TR.headerNavigation {
 background: #3366CC;
}

TD.headerNavigation {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background: #3366CC;
 color: #ffffff;
 font-weight : bold;
}

A.headerNavigation { 
 color: #FFFFFF; 
}

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

TR.headerError {
 background: #ff0000;
}

TD.headerError {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 background: #ff0000;
 color: #ffffff;
 font-weight : bold;
 text-align : center;
}

TR.headerInfo {
 background: #00ff00;
}

TD.headerInfo {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 background: #00ff00;
 color: #ffffff;
 font-weight: bold;
 text-align: center;
}

TR.footer {
 background: #3366CC;
}

TD.footer {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background: #3366CC;
 color: #ffffff;
 font-weight: bold;
}

.infoBox {
 background: #3366CC;
}

.infoBoxContents {
 background: #ffffff;
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

.infoBoxNotice {
 background: #FF8E90;
}

.infoBoxNoticeContents {
 background: #FFE6E6;
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

A.infoBoxHeading, TD.infoBoxHeading {

 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 font-weight: bold;
 background: #3366CC;
 color: #ffffff;
}

TD.infoBox, SPAN.infoBox {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

TR.accountHistory-odd, TR.addressBook-odd, TR.alsoPurchased-odd, TR.payment-odd, TR.productListing-odd, TR.productReviews-odd, TR.upcomingProducts-odd, TR.shippingOptions-odd {
 background: #f8f8f9;
}

TR.accountHistory-even, TR.addressBook-even, TR.alsoPurchased-even, TR.payment-even, TR.productListing-even, TR.productReviews-even, TR.upcomingProducts-even, TR.shippingOptions-even {
 background: #f8f8f9;
}

TABLE.productListing {
 border: 2px;
 border-style: solid;
 border-color: #3366CC;
 border-spacing: 1px;
}

.productListing-heading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 background: #3366CC;
 color: #FFFFFF;
 font-weight: bold;
}

TD.productListing-data {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

A.pageResults {
 color: #0000FF;
}

A.pageResults:hover {
 color: #0000FF;
 background: #FFFF33;
}

TD.pageHeading, DIV.pageHeading {
 font-family: Arial, sans-serif;
 font-size: 18px;
 font-weight: bold;
 color: #000000;
}

TR.subBar {
 background: #f4f7fd;
}

TD.subBar {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 color: #000000;
}

TD.main, P.main {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
 line-height: 1.5;
}

TD.smallText, SPAN.smallText, P.smallText {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
}

TD.accountCategory {
 font-family: Verdana, Arial, sans-serif;
 font-size: 13px;
 color: #aabbdd;
}

TD.fieldKey {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
}

TD.fieldValue {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
}

TD.tableHeading {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
}

SPAN.newItemInCart {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 color: #ff0000;
}

CHECKBOX, INPUT, RADIO, SELECT {
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
}

TEXTAREA {
 width: 100%;
 font-family: Verdana, Arial, sans-serif;
 font-size: 11px;
}

SPAN.greetUser {
 font-family: Verdana, Arial, sans-serif;
 font-size: 12px;
 color: #f0a480;
 font-weight: bold;
}

TABLE.formArea {
 background: #f1f9fe;
 border-color: #7b9ebd;
 border-style: solid;
 border-width: 1px;
}

TD.formAreaTitle {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 font-weight: bold;
}

SPAN.markProductOutOfStock {
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 color: #c76170;
 font-weight: bold;
}

SPAN.productSpecialPrice {
 font-family: Arial, sans-serif;
 color: #ff0000;
 font-size: 22px;
 font-weight: bold;
}

SPAN.errorText {
 font-family: Verdana, Arial, sans-serif;
 color: #ff0000;
}

.moduleRow { }
.moduleRowOver { background-color: #D7E9F7; cursor: pointer; cursor: hand; }
.moduleRowSelected { background-color: #E9F4FC; }

.checkoutBarFrom, .checkoutBarTo { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #8c8c8c; }
.checkoutBarCurrent { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }

/* message box */

.messageBox { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.messageStackError, .messageStackWarning { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #ffb3b5; }
.messageStackSuccess { font-family: Verdana, Arial, sans-serif; font-size: 10px; background-color: #99ff00; }

/* input requirement */

.inputRequirement { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ff0000; }

/* BEGIN Fancier Invoice and Packingslip */
.dataTableHeadingContent_INVOICE { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ffffff; font-weight: bold; }
.dataTableHeadingRow_INVOICE { background-color: #C9C9C9; }
.dataTableRow_INVOICE { background-color: #F0F1F1; }
.dataTableContent_INVOICE { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }
.order_history_top { color : #006699; font-weight: bold; font-family: Verdana; font-size: 13px; }
.order_infobox_heading { color : #000000; font-weight: bold; font-family: Verdana; font-size: 12px; }
.order_infobox_data { color : #000000; font-family: Verdana; font-size: 12px; }
.product_infobox_heading_row { background-color: #C9C9C9; }
.product_infobox_heading { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ffffff; font-weight: bold; }
.product_infobox_data_row { background-color: #F0F1F1; }
.product_infobox_data { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }
.order_history_top_INVOICE { color : #006699; font-weight: bold; font-family: Verdana; font-size: 13px; }
.order_infobox_heading_INVOICE { color : #000000; font-weight: bold; font-family: Verdana; font-size: 12px; }
.order_infobox_data_INVOICE { color : #000000; font-family: Verdana; font-size: 12px; }
.product_infobox_heading_row_INVOICE { background-color: #C9C9C9; }
.product_infobox_heading_INVOICE { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #ffffff; font-weight: bold; }
.product_infobox_data_row_INVOICE { background-color: #F0F1F1; }
.product_infobox_data_INVOICE { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #000000; }
.smallText_INVOIVE { font-family: Verdana, Arial, sans-serif; font-size: 10px; }
.smallTextBlue_INVOICE { font-family: Verdana, Arial, sans-serif; font-size: 10px; color: #006699; }
.smallAddressBlue_INVOICE { font-family: Arial; font-size: 9px; color: #006699; }
.main_INVOICE { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
.pageHeading_INVOICE { font-family: Verdana, Arial, sans-serif; font-size: 18px; color: #727272; font-weight: bold; }
/* END Fancier Invoice and Packingslip */

a.textbox {
 color: #ffffff;
}
SPAN.removeProduct {
 font-family: Verdana, Arial, sans-serif;
 font-size: 9px;
 color: #3366FF;
 font-weight: normal;
}

INPUT.quantitybox {
 border: 1px;
 border-style: solid;
 border-color: #000000;
font-size: 12px;
 width: 20px;
 height: 22px;
 border-spacing: 0px;
 background: #F8f8f9;
}

TD.pollBoxRow {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 border-color: #eeeeee;
 border-style: solid;
 border-width: 1px; 
}
TD.pollBoxText {
 font-family: Verdana, Arial, sans-serif;
 font-size: 10px;
 border-color: #eeeeee;
 border-style: solid;
 border-width: 1px; 
}
TR.pollOptRow {
 background: #f1f9fe;
}
TR.pollFooter {
 background: #f1f9fe;
}
h1 { 
font-family: Verdana, Arial, sans-serif;
font-size: 20px;
font-weight: bold;
}

h2 { 
font-family: Verdana, Arial, sans-serif;
font-size: 14px;
}
IMG.sort
{
border: 0;
height: 9;
width: 16;
margin-bottom: -2;
}
a.textbox {
color: #ffffff;
}
a.textbox:hover {
color: #ffffff;		  (you can put any colour you want here)

/* BEGIN: CSS Buttons Everywhere */
.cssButton {
 background: #f0f0ff;
 color: #000080;
 width: 100px;
 height: 20px;
 vertical-align: top;
 font-weight: normal;
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 cursor: pointer;
 text-align: center;
 text-decoration: none;
 border: 1px;
 border-style: solid;
 border-color: #000080;
 border-spacing: 1px;
}
/* END: CSS Buttons Everywhere */

[Bigredman74]

Thanks for the reply!

 

html_output.php

(not quoted)

 

stylesheet.css

(good until here)

a.textbox:hover {
color: #ffffff;		  (you can put any colour you want here)

/* BEGIN: CSS Buttons Everywhere */
.cssButton {
 background: #f0f0ff;
 color: #000080;
 width: 100px;
 height: 20px;
 vertical-align: top;
 font-weight: normal;
 font-family: Tahoma, Verdana, Arial, sans-serif;
 font-size: 12px;
 cursor: pointer;
 text-align: center;
 text-decoration: none;
 border: 1px;
 border-style: solid;
 border-color: #000080;
 border-spacing: 1px;
}
/* END: CSS Buttons Everywhere */

 

Hi James,

 

Sorry for the delay in responding. In your stylesheet.css the closing } for a.textbox:hover is missing. Add the closing and let me know if it works or not.

 

Best of luck,

Tim

[aodfan]

Yes, that worked! Thanks alot, one last thing I ask, is the "click to enlarge" under the product image, is there a way to keep the image for that instead of css, as I prefered the image myself

 

Thanks again.

[Bigredman74]

Yes, that worked! Thanks alot, one last thing I ask, is the "click to enlarge" under the product image, is there a way to keep the image for that instead of css, as I prefered the image myself

 

Thanks again.

 

On the product_info.php page, the default is text, "Click to enlarge", not an image or button. Is this the page in reference, and if so, have you modified this page to display an image button for "Click to enlarge"?