|
|
Changing Buttons To Use Images
In this example we will be changing the store menu at the top right of the page to use images for the buttons instead of buttons styled purely with CSS.
1. Create the images you want to use for the buttons. Your image files may have an extension of .jpg, .gif or .png. When creating your images avoid saving them with file names that include spaces.
2. In admin under Home > ClickCartPro > Displays: Skins, Menus, XHTML Includes and Messages > Manage Display Skins click on Update next to the skin you are using for your site.
3. In the Functions Menu near the top click on Upload File: Click here to upload a file to be controlled by this skin.
4. Use the Browse button for the Skin Controlled File to locate the first button image file on your system. In the Skin Controlled Directory Selection field select /media as the directory for the button image files.
5. Repeat steps 3 and 4 above for each of your image files.
6. In admin under Home > ClickCartPro > Displays: Skins, Menus, XHTML Includes and Messages > Manage Display Skins click on Update next to the sking you are using for your site.
7. Click on Update next to File Name skin.php and locate the following code:
2. In admin under Home > ClickCartPro > Displays: Skins, Menus, XHTML Includes and Messages > Manage Display Skins click on Update next to the skin you are using for your site.
3. In the Functions Menu near the top click on Upload File: Click here to upload a file to be controlled by this skin.
4. Use the Browse button for the Skin Controlled File to locate the first button image file on your system. In the Skin Controlled Directory Selection field select /media as the directory for the button image files.
5. Repeat steps 3 and 4 above for each of your image files.
6. In admin under Home > ClickCartPro > Displays: Skins, Menus, XHTML Includes and Messages > Manage Display Skins click on Update next to the sking you are using for your site.
7. Click on Update next to File Name skin.php and locate the following code:
<td id="skin_ht_rcol"> <div class="skin_button"><a href="<?php print $link_contact; ?>" title="Contact">Contact</a></div> <div class="skin_button"><a href="<?php print $link_account; ?>" title="Your Account">Your Account</a></div> <div class="skin_button"><a href="<?php print $link_checkout; ?>" title="Checkout">Checkout</a></div> <div class="skin_button"><a href="<?php print $link_cart; ?>" title="Shopping Cart & Wish List">Shopping Cart & Wish List</a></div> <div class="skin_button"><a href="<?php print $link_home; ?>" title="Home">Home</a></div>
In case you experience problems with the remainder of this change you may want to save a copy of the above code on your machine as a backup.
8. For this example we will make the assumption that your skin name is MySkin (case matters), that the image for the Contact button is named ContactUs.gif (again, case matters) and that your images are 100 pixels wide and 22 pixels high. Adjust the number of pixels to match the size of the images you have created as needed. Your image files may have an extension of .jpg, .gif or .png.
Change the first line of code for the Contact button to:
<div class="skin_button"><a href="<?php print $link_contact; ?>"title="Contact"> <img src="<?php print $disp_baseurl; ?>/skins/MySkin/media/ContactUs.gif" width="100" alt="Contact" height="22" /> </a></div>
9. Repeat step 8 for the other 4 buttons changing the name of the image file, link variable name, title and alt value for each one.
ClickCartPro - Skinning (Changing The Look Of Your Site)