• Lesson Index:
• Overview
• Yahoo Stores
• Signing Up
• Granting FTP access
• Granting Store Access
• Security Key
• Yahoo ID Password
• Using PayPal
• Changing PayPal
• YStore UPS Tools
• Process Orders
• Yahoo Store Notes
• ZenCart for Merchants
• Open Close Store
• Update Products
• Customer Welcome
• Order Confirmation
• Fulfilling Orders
• Statistics Reports
• Database Backup
• Backup Plugin
• Clean Admin Log
• Tasklist Summary
• ZenCart for Developers
• Sideboxes and EZ Pages
• Editing EZ Pages
• Template Overrides
• Suggestive Sell
• Graphical CSS Buttons
• Configure Shipping
• Sales Tax
• Installing PayPal IPN
• Email Notifications
• Patching ZenCart
• ZenCart Notes

ZenCart Graphical CSS Buttons

If you want to use graphical CSS buttons, you have to turn that on in the administrative panel by ...

Configuration -> Layout Setting -> CSS Buttons -> Yes.

And then re-code the templates with some like ...

<a class="btnContinue" onmouseover="this.className='btnContinue_hover'" onmouseout="this.className='btnContinue'" href="javascript:document.checkout_address.submit();">&nbsp;</a>

where those class names are defined in the CSS file such as ...

.btnContinue {
width: 80px;
height: 23px;
display: block;
font-size: 10px;
text-decoration: none;
background-repeat:no-repeat;
background-image:url(../../../../images/btn_continue.png);
}

.btnContinue_hover {
width: 80px;
height: 23px;
display:block;
font-size: 10px;
text-decoration: none;
background-repeat:no-repeat;
background-image:url(../../../../images/btn_continue_hover.png);
}

You would then have to create the graphics for those buttons.

Next Lesson: