Changing Progress bar on checkout pages

[Guest]

On the bottom of the checkout pages, there is a progress bar which includes the following. Delivery information, Payment Information, Confirmation, Finished.

I would like to move this bar to the top of each page and add a graphic to each step.

Please could somebody tell me how to do this or at least where the files are that I need to edit.

Thankyou in advance

Mark

[Simmy]

On the bottom of the checkout pages, there is a progress bar which includes the following. Delivery information, Payment Information, Confirmation, Finished.

I would like to move this bar to the top of each page and add a graphic to each step.

Please could somebody tell me how to do this or at least where the files are that I need to edit.

Thankyou in advance

Mark

<{POST_SNAPBACK}>

 

 

The following chunk of code at the bottom of checkout_payment.php along with similar chunks at the bottom of checkout_shipping.php, checkout_confirmation.php and checkout_success.php controls the line and blob progressbar.

 

<td><table border="0" width="100%" cellspacing="0" cellpadding="0">
         <tr>
           <td width="25%"><table border="0" width="100%" cellspacing="0" cellpadding="0">
             <tr>
               <td width="50%" align="right"><?php echo tep_draw_separator('pixel_silver.gif', '1', '5'); ?></td>
               <td width="50%"><?php echo tep_draw_separator('pixel_silver.gif', '100%', '1'); ?></td>
             </tr>
           </table></td>
           <td width="25%"><table border="0" width="100%" cellspacing="0" cellpadding="0">
             <tr>
               <td width="50%"><?php echo tep_draw_separator('pixel_silver.gif', '100%', '1'); ?></td>
               <td><?php echo tep_image(DIR_WS_IMAGES . 'checkout_bullet.gif'); ?></td>
               <td width="50%"><?php echo tep_draw_separator('pixel_silver.gif', '100%', '1'); ?></td>
             </tr>
           </table></td>
           <td width="25%"><?php echo tep_draw_separator('pixel_silver.gif', '100%', '1'); ?></td>
           <td width="25%"><table border="0" width="100%" cellspacing="0" cellpadding="0">
             <tr>
               <td width="50%"><?php echo tep_draw_separator('pixel_silver.gif', '100%', '1'); ?></td>
               <td width="50%"><?php echo tep_draw_separator('pixel_silver.gif', '1', '5'); ?></td>
             </tr>
           </table></td>
         </tr>
         <tr>
           <td align="center" width="25%" class="checkoutBarFrom"><?php echo '<a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '" class="checkoutBarFrom">' . CHECKOUT_BAR_DELIVERY . '</a>'; ?></td>
           <td align="center" width="25%" class="checkoutBarCurrent"><?php echo CHECKOUT_BAR_PAYMENT; ?></td>
           <td align="center" width="25%" class="checkoutBarTo"><?php echo CHECKOUT_BAR_CONFIRMATION; ?></td>
           <td align="center" width="25%" class="checkoutBarTo"><?php echo CHECKOUT_BAR_FINISHED; ?></td>
         </tr>
       </table></td>

 

The line is made from the 'pixel_silver.gif' stretched out to form lines.

 

The blob is 'checkout_bullet.gif' and is moved along the line with each page. By moving this chunk of code and modifying it you should be able to achieve what you want with a bit of trial and error!

 

Good Luck

[Guest]

Many Thanks

I have found the code to modify. I was looking in the wrong place. It was in the content folder in the templates folder.

I am using the cre loaded version.

MarkS

[oldworldcharms]

Thanks this worked. I would like to put this in a table at the top, and need to add a class to the css file to put a black border around the table. I made several attempts but could not get the border. I dont know what I am doing wrong. Can someone tell me how to do this? <_<

 

Thanks