Zen Button Construction Kit

ZEN BUTTON CONSTRUCTION KIT

Written by Oliver Gumtau
http://www.mediakitchen.de

See the running online demo / button creation service tool here:
http://zen-bck.mediakitchen.de/

PURPOSE & AIM

To automatically create all shop buttons in one go by utilizing a button text file and button templates, for several languages if necessary.

FEATURES

Version 1.6.4

save/load preset system
different icon y offsets for big and small buttons
bug fix: all button texts in correct proportions now
bug fix: no buttons displayed distorted in IE anymore
bug fix: TellAFriend upper case button name preserved

Version 1.6.3

download as ZIP file feature
support for case conversions of unicode encoded characters
czech, dutch, polish, romanian, russian and slovak language support
minor bugfix when icons are switched off; minor cleanup

Version 1.6.2

fixed bug where PNG transparencies were incorrectly rendered on some GD version (thanks Jarsa!)
fixed small bug of inconsistent configuration settings
display generated buttons on the results page
small adjustment: bigger safety space to avoid extremely extended fonts to be cut off
Italian language support

Version 1.6

add icon overlays to visualize the function of the buttons!
button sizes are now defined separately from the text definitions

Version 1.5.3

fixed bug when converting special characters to upper/lower case
color picker and RGB to hex calculator for all color input fields
more input validations
French language support
easier encoding (HTML) of special characters in button text definitions

Version 1.5

visual control over layout parameters
preview of button results
automatic detection of installed templates and fonts

Version 1.0

button width adjusts to text length
multi-language button text definitions; pre-installed: English, German and Spanish
better text kerning and rendering by using a scaled up text work space; no need to recompile GD on your server
template system for different button layouts
text effects like drop shadow and outline
works on all shop background colors

REQUIREMENTS

a web server running PHP with GD (v2.0.12 or greater) and Freetype support
a TrueType font; HINT: if you want to output languages like Russian your font MUST support the full unicode character set to display something meaningful; this is usually the case with standard system fonts.

(for the visual parameter control your browser should have Javascript enabled and be able to display PNGs)

INSTALLATION

copy the folder 'zen_bck' complete with all files and subfolders to your server. DO NOT merge the content with your shop's folder structure. Your server must be capable of executing PHP scripts and PHP must support GD and Freetype.
copy the TrueType font(s) (*.ttf) that you want to use into the folder 'zen_bck/includes/fonts' or alternatively provide a full path to a TrueType font on your server later.
set the necessary write permissions for the language folders in the folder 'zen_bck/buttons' and for the folder 'zen_bck/presets'.
point your browser to the folder you installed Zen Button Construction Kit in, e.g. 'http://www.yourdomain.com/zen_bck/': you see button previews of the current selection and a form to change the layout settings
click the button 'Preview Button Layout' to update the preview using the current selections
correct the font sizes and the custom offset parameters for x/y-centering in the form if the text is not optimally placed on the buttons yet and try again.
press the button 'Create Buttons'; the full set of buttons for each language selected should be generated now in the folder(s) 'zen_bck/button/[language_name]'.
copy the resulting language button folders from the folder 'zen_bck/buttons/' to 'includes/templates/[YOUR_TEMPLATE]/buttons/' inside your shop's catalog folder

optional: store the resulting settings in a preset file for later use
optional: delete the folder zen_bck after the development phase of your shop has finished

Additional hints: Edit the button texts in the file 'zen_bck/includes/zen_bck_configure.php' if required, add further definitions for custom buttons or even add another language if there is need to. Define the button size version used for each button in the section 'button size definitions' of the file 'zen_bck/includes/zen_bck_configure.php'. Attention: the default definitions of this kit are based on the rationale behind the button set 'Dark Gray Aqua Buttons' by Jade True, which uses the 'small' version for most of the buttons and the big version for some 'eye catcher' buttons like 'Buy Now' and 'Add To Cart'. If you don't want that simply redefine the button size definitions.

Hints for the icon overlay feature: the icons are located in the folder 'zen_bck/images/icons'. You can change the images assigned to a certain button by editing the file 'zen_bck/includes/zen_bck_configure.php' in the section 'button icon defintions', specify the image's file name here. If you don't want to display an icon on a certain button just leave the string empty (''). The layout setting 'Icon space' in the form should define the space between the button text and the icon. You might have to center the overall result horizontally with the general x offsets again. 'Icon offset y' is for fine tuning the icon y position against the button/text. As the colors of the icons might not match your current button template you are always able to switch the icon feature off. Then you get the plain text buttons again. You should also switch them off in case the icons are too big for the buttons, this will go for the 'stylish_arrow' button templates or maybe other smaller sized templates provided by you. We do not scale the icon images down as they will look blurry and are optimized to look best with the current size. You can still deactivate the icons for all the small buttons for example by setting the respective icon definitions in the file 'zen_bck/includes/zen_bck_configure.php' to an empty string (''). Please take note that the text effects like drop shadow and outline will not affect the icons at all.

You can add your own button templates too. Just create a new folder with your template's name in the folder 'templates'. Put two PNG files into it, one for the big button version named 'btn_big.png', another one named 'btn_small.png' for the small version. Both should utilize PNG transparency to allow for all kinds of shop background colors. Place a copy of a file 'tpl_definitions.php' from another template into your template folder. Adjust the values to suit your button images: The variables '..._left_wd' and '..._right_wd' define the width of the end cap sections. These image sections will be copied to the target image without being stretched, so curved end caps for example won't get distorted. The remaining middle section is streched horizontally to fit the final button width based on the current text length, i.e. the middle section should be absolutely uniform in horizontal direction and be suited for that kind of operation. The distance from the end caps to the left and right end of the text should be mostly the same to achieve correct text centering. There are offset parameters to correct the automatic centering, as for example the actual button isn't always in the (vertical) middle of the image, especially when things like drop shadows behind the button were used. The border parameter defines how much space is placed between the left and right edge of the text and the end caps, this space gets filled with stretched middle section image content as well. You can additionally correct the offsets anytime with the form selections.

Additional design tip for creating your own templates: Of course the two button versions 'big' and 'small' don't actually have to differ in size. You might as well use this system to create 'hilited' versions for special 'action buttons', like 'buy now'.

OUTLOOK

this tool should basically be finished by now; all the essential add-ons are developed.
maybe this tool could be integrated into the shop's admin structure and the buttons created in the final shop directories; but maybe that's not a good idea: you will probably only need this tool during shop development once, there is the danger to overwrite exisitng shop buttons etc.
if anyone wants to improve this tool by providing a quality sans serif font that could be distributed along with this package or more quality button templates that would be appreciated.

CREDITS & HISTORY

This tool is based on the class 'Zen Buttons 1.0' by Rainer Langheiter (http://rainer.langheiter.com // www.FiloSoFisch.com) from 9th of July 2004, which featured automatic button creation based on a language definition file, using 2 button images with fixed width.

Further credits go to Mark Kahn for his marvellous tutorial "How to Create a Color Picker in JavaScript". ( http://www.webreference.com/programming/javascript/mk/column3/index.html )

A big thank you to Mark James for his beautiful, professionally looking "Silk" icon set used here. ( http://www.famfamfam.com/lab/icons/silk/ )

LICENSE

The Zen-Cart community has given me a lot, so I want to give something back: Zen Button Construction Kit is published as freeware and open source. You are allowed to use this tool for your private or commercial website, i.e. to create the buttons for your online shop. You are not allowed to distribute this development - neither in its existing nor in a modified form - in any package that aims for commercial profit though. You are not allowed to use this tool on public websites that advertise your services. I hope this little tool helped to make your life a bit easier. If you agree with that or want to encourage further development and support you might consider a small donation via PayPal to my email address og@mediakitchen.de. Thank you.