CSS Buttons for OSCommerce 2.2RC2a or OSC to CSS

Change the buttons in OSCommerce to CSS. By making simple changes in the functions that generate the buttons it’s easy to add a class to the buttons and style as desired in the stylesheet. By adding span brackets to the buttons as you go through the shop and add the class you also add the option of using the ‘sliding doors’ technique of adding images to the buttons that resize with the length of the button text.

  1. Add a class to the submit buttons. Add span tags if you want the option of using the sliding door technique. Open catalog/includes/html_output.php and change:// The HTML form submit button wrapper function
    // Outputs a button in the selected language
    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;
    }

    to://The HTML form submit button wrapper function
    // Outputs a button in the selected language
    function tep_image_submit($image, $value='', $class, $alt = '', $parameters = '') {
    global $language;
    $image_submit = '<span><input type="submit" value="' . tep_output_string($value) . '" class="button" 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 .= ' ></span>';
    return $image_submit;
    }
  2. That takes care of the submit buttons.

  3. Now change the regular buttons. Add the class ‘button’ to every button in the all the catalog pages. Add span tags to have the option of using the sliding doors technique. Here is the example of the continue button:
    change:<?php echo '<a href="' . tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL') . '">' . tep_image_button('button_continue.gif', IMAGE_BUTTON_CONTINUE) . '</a>'; ?>
    to: <?php echo '<a href="' . tep_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL') . '" class="button"><span>' . tep_image_button('button_continue.gif', IMAGE_BUTTON_CONTINUE) . '</span></a>'; ?>
  4. Finish by styling the buttons by adding this to the stylesheet:
    .button{margin-bottom:10px;}
    a.button{display:inline-block !important;border:dotted 1px !important;padding:0px 1em;font-weight:bold;font-size:100%;text-align:center;cursor:pointer;}

    This is just an example of the infinite ways you can use CSS to style the buttons.
  5. Note that the submit buttons are also going to be picking up the styling from any existing ‘input’ or ‘input [submit ]’ selectors in the stylesheet.