php shopping cart
free shopping cart   shopping cart software

Free Shopping Cart PHP Software

AFCommerce Template Tutorial

Graphics Adding a right hand column

Changing the Graphics

First you will need to install AFCommerce and create a few categories and products so that we can see how our design is moving along. If you have not installed AFCommerce you can download a copy here. It is also a good idea to read our 'Files to Customize for The Look And Design Of Your Store' tutorial so that you are familiar with the files that we will be working with.


Step One: Changing The Banner

1)

To change the default banner you need to edit the bannerinclude.php file. Open up the file in the HTML editor of your choice, below is an example of the default code.


<?php

/*

File Name: bannerinclude.php, v 2.5

Author: Paul Crinigan, AmazingFlash.com

AFCommerce, Amazing Flash Commerce Solutions

http://www.afcommerce.com

Copyright (c) 2004 - 2006 AFCommerce

AFCommerce is Released under the AFCommerce Free Public License Agreement

*/

?>

<IMG SRC="images/mainsite/mainimage.gif" ALT="Amazing Flash Commerce Solutions - AFCommerce.com">


2)


As you can see there is not much to this file and it is very easy to replace the default AFCommerce banner with your banner. Change mainimage.gif to the name of your banner image and upload your image to the images/mainsite/ directory.

*note you should add a width and height attribute to the image tag

Step Two: Changing The Top Navigation

1)

By Default AFCommerce comes with four buttons Home, About Us, Resources, and Contact Us across the top of the page underneath the banner. The HTML code for these buttons is in the toplayout.php file. Below is the HTML code in toplayout.php that can be changed to edit the top menu.


<!-- The following links are optional. You may delete them or change them any way you like. The menu appears under the banner by default unless you move them. -->

<BR><TABLE bgcolor='#ffffff' WIDTH='100%' BORDER='0' CELLSPACING='0' CELLPADDING='0'><TR><TD WIDTH='25%' ALIGN='CENTER' VALIGN='MIDDLE'><A onMouseOver="changeimage('a3001','lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/home-roll.gif');"

onMouseOut="changeimage('a3001','lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/home.gif');" HREF='index.php'><IMG name='a3001' SRC='lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/home.gif' border='0' alt='Home'></A></TD><TD WIDTH='25%' ALIGN='CENTER' VALIGN='MIDDLE'><A onMouseOver="changeimage('a3002','lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/aboutus-roll.gif');"

onMouseOut="changeimage('a3002','lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/aboutus.gif');" HREF='about.php'><IMG name='a3002' SRC='lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/aboutus.gif' border='0' alt='About Us'></A></TD><TD WIDTH='25%' ALIGN='CENTER' VALIGN='MIDDLE'><A onMouseOver="changeimage('a3003','lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/resources-roll.gif');"

onMouseOut="changeimage('a3003','lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/resources.gif');" HREF='resources.php'><IMG name='a3003' SRC='lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/resources.gif' border='0' alt='Resources'></A></TD><TD WIDTH='25%' ALIGN='CENTER' VALIGN='MIDDLE'><A onMouseOver="changeimage('a3004','lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/contactus-roll.gif');"

onMouseOut="changeimage('a3004','lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/contactus.gif');" HREF='contact.php'><IMG name='a3004' SRC='lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/contactus.gif' border='0' alt='Contact Us'></A></TD></tr></TABLE><BR>


2)


The section of code above can be completely removed or replaced with the code of your choice.


Step Three: Changing the Rounded Corners


1)


The default look of AFCommerce has a boreder with rounded corners at the top of the left side navigation and the main body of content.

2)

You can create your own corner images following these guidelines

  1. The image must be a gif file type
  2. The image must be a 5 pixel width
  3. The image must be a 22 pixel height
  4. The left side corner image must be named leftmenu_topleft.gif
  5. The right side corner image must be named leftmenu_topright.gif

Once you have created your images following these guide lines, upload them to the images/mainsite directory to replace the old corners with your new one.

You can also remove these images by editing the toplayout.php file. Below is the entire code for toplayout.php, You can remove the yellow highlighted portions of code to remove the rounded corner images.


<?php
/*
File Name: toplayout.php, v 2.5
Author: Paul Crinigan, AmazingFlash.com

AFCommerce, Amazing Flash Commerce Solutions
http://www.afcommerce.com

Copyright (c) 2004 - 2006 AFCommerce

AFCommerce is Released under the AFCommerce Free Public License Agreement
*/

//
the ending table tags below close the table for your banner
//
that is opened in header.php
?
>
</TD></TR></TABLE>

<!-- The following links are optional. You may delete them or change them any way you like. The menu appears under the banner by default unless you move them. -->
<BR><TABLE bgcolor='#ffffff' WIDTH='100%' BORDER='0' CELLSPACING='0' CELLPADDING='0'><TR><TD WIDTH='25%' ALIGN='CENTER' VALIGN='MIDDLE'><A onMouseOver="changeimage('a3001','lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/home-roll.gif');"
onMouseOut="changeimage('a3001','lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/home.gif');" HREF='index.php'><IMG name='a3001' SRC='lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/home.gif' border='0' alt='Home'></A></TD><TD WIDTH='25%' ALIGN='CENTER' VALIGN='MIDDLE'><A onMouseOver="changeimage('a3002','lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/aboutus-roll.gif');"
onMouseOut="changeimage('a3002','lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/aboutus.gif');" HREF='about.php'><IMG name='a3002' SRC='lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/aboutus.gif' border='0' alt='About Us'></A></TD><TD WIDTH='25%' ALIGN='CENTER' VALIGN='MIDDLE'><A onMouseOver="changeimage('a3003','lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/resources-roll.gif');"
onMouseOut="changeimage('a3003','lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/resources.gif');" HREF='resources.php'><IMG name='a3003' SRC='lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/resources.gif' border='0' alt='Resources'></A></TD><TD WIDTH='25%' ALIGN='CENTER' VALIGN='MIDDLE'><A onMouseOver="changeimage('a3004','lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/contactus-roll.gif');"
onMouseOut="changeimage('a3004','lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/contactus.gif');" HREF='contact.php'><IMG name='a3004' SRC='lang/<?php echo $langid; ?>/<?php echo $buttontemp; ?>/contactus.gif' border='0' alt='Contact Us'></A></TD></tr></TABLE><BR>


<!-- Left hand column to your website begins here, this is where your categories and shopping links begin. -->
<TABLE WIDTH='100%'><TR ALIGN='CENTER' VALIGN='TOP'><TD WIDTH='*' ALIGN='left' VALIGN='TOP'><TABLE WIDTH='100%'><TR ALIGN='CENTER' VALIGN='TOP'><?php $fontstring = "<font size='3' face='Arial'><b>";
$
l = "$langid";
?
><TD class='categories' WIDTH='20%' ALIGN='left' VALIGN='TOP'><?php
//
Live Support Code Begins Here
echo get_config_value("livesupportcode"); ?>

<TABLE WIDTH='100%' cellpadding='0' cellspacing='0'><TR ALIGN='CENTER' VALIGN='TOP'> <td align='left'><IMG SRC="images/mainsite/leftmenu_topleft.gif" WIDTH="5" HEIGHT="22" ALT=""></td> <td align='center' HEIGHT="22" width='100%' valign='middle' class='headline1'><?php echo MENU_CATEGORIES; ?></td> <td align='right'><IMG SRC="images/mainsite/leftmenu_topright.gif" WIDTH="5" HEIGHT="22" ALT=""></td> </tr>
<TR ALIGN='CENTER' VALIGN='TOP'><TD colspan='3' width='100%' class='menu' ALIGN='left' VALIGN='TOP'><?php require ('categories.php');

if (get_config_value("quicksearch") == "1") { ?>
<form action='search.php' method='post'><div class='headline2' align='center'><?php echo MENU_QUICKSEARCH; ?></div><table width='100%'><tr><td><input size='14' type='text' name='keywords'></td><td><input type='submit' class='searchbutton' value='<?php echo MENU_QUICKSEARCHBUTTON; ?>'></td></tr></table></form><?php
} //
ends quick search

if (get_config_value("manufactures_on_menu") == "1") {
echo "<div class='headline2'><CENTER>" . MENU_MANUFACTURES . "</CENTER></div>";
require ('manufactures.php'); }

require ('translatelist.php'); ?>

<div class='headline2'><CENTER><?php echo MENU_STOREOPTIONS; ?></CENTER></div>
<?php
$
bn = 'button_viewcart';
include('lang/printcartlink.php'); ?><?php
$
bn = 'button_checkout';
include('lang/printcartlink.php'); ?><?php
$
bn = 'button_myaccount';
include('lang/printcartlink.php'); ?><?php
$
bn = 'button_search';
include('lang/printcartlink.php'); ?>
<?php if ($bestsellers == '1') { ?>
<?php
$
bn = 'button_bestsellers';
include('lang/printcartlink.php'); ?>
<?php } ?>
<?php if ($whatsnew == '1') { ?>
<?php
$
bn = 'button_whatsnew';
include('lang/printcartlink.php'); ?>
<?php } ?>
<?php if ($productreviews == '1') { ?>
<?php
$
bn = 'button_reviews';
include('lang/printcartlink.php'); ?>
<?php } ?><?php if ($displaylegalnotices == '1') { ?>
<div class='headline2'><CENTER><?php echo MENU_LEGALNOTICES; ?></CENTER></div>
<?php } ?><?php if ($displayprivacypolicy == '1') { ?>
<?php
$
bn = 'button_privacy';
include('lang/printcartlink.php'); ?>
<?php } ?><?php if ($displayshipandrefunds == '1') { ?>
<?php
$
bn = 'button_shipandrefund';
include('lang/printcartlink.php'); ?>
<?php } ?></td></tr></table>

</TD><TD WIDTH='*' height='100%' ALIGN='left' VALIGN='TOP'><TABLE WIDTH='100%' cellpadding='0' cellspacing='0'><TR ALIGN='CENTER' VALIGN='TOP'> <td align='left'><IMG SRC="images/mainsite/leftmenu_topleft.gif" WIDTH="5" HEIGHT="22" ALT=""></td> <td valign='middle' align='left' HEIGHT="22" width='100%' class='headline1'> ;  ;
<?php
if ($breadcrumbfeature == "1") {
$
catid = afc_secure_number_GET ("cat");
$
breadcrumbstring = afc_get_breadcrumb_string ($catid, $pid, $langid);
if ($breadcrumbstring != "") {
echo "<!-- Begin Breadcrumb -->" . MENU_BREADCRUMBTITLE . ":  " . $breadcrumbstring . "<!-- Ends Breadcrumb -->"; } }
?
>

</td> <td align='right'><IMG SRC="images/mainsite/leftmenu_topright.gif" WIDTH="5" HEIGHT="22" ALT=""></td> </tr><tr><TD colspan='3' WIDTH='100%' height='100%' class='bodyframe' ALIGN='left' VALIGN='TOP'>


Copyright 2004 - 2011
www.afcommerce.com


Powered by AFCommerce.com