Zen Button Construction Kit

LICENSE

The Zen Button Construction Kit v1.6.x is released under the General Public License (see LICENSE.txt)

Important note:
The Zen Button Construction Kit v2.0 (found here: http://zen-bck.mediakitchen.de/) is a completely new development branch (separate from the v1.6.x versions) of the Zen Button Construction Kit

The author has made it clear that he has no plans to release the Zen Button Construction Kit v2.0 to the Zen-Cart community. He is also not accepting any feature requests for the 1.6.x versions of the Zen Button Construction Kit or for the Zen Button Construction Kit v2.0.

However, the thanks to the work of other fellow Zenners, beginning with v1.6.5, the v1.6.x releases of the Zen Button Construction Kit provides ALL of the features offered in the Zen Button Construction Kit v2.0 with improvements not offered in the Zen Button Construction Kit v2.0 including:

PHP 5.3 compatibility
Custom button generation
Admin button generation
Cross browser compatibility

PURPOSE & AIM

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

REQUIREMENTS

A web server running PHP with GD (v2.0.12 or greater) and Freetype support
A TrueType font - Just drop your chosen font into the fonts folder. Included are some open source ones to avoid errors due to an empty fonts directory

Red Hat's Liberation Open Source fonts - An additional set fonts packaged for this contribution is available for download here: http://overthehillweb.com/free-downloads/. You can download the pacakge and copy the folder 'zen_bck' complete with all files and subfolders to your server.
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: these files have nothing to do with Zen Cart files, it is an independent program and so can be located anywhere on your server.
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 later provide a full path to a TrueType font on your server.

Red Hat's Liberation Open Source fonts - An additional set fonts packaged for this contribution is available for download here: http://overthehillweb.com/free-downloads/. You can download the pacakge and copy the folder 'zen_bck' complete with all files and subfolders to your server.
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 will see button previews of the current selection and a form to change the layout settings
Change the layout as you wish and click the button 'Preview Button Layout' to update the preview using the current parameters.
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 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.
The calalog button definitions are contained in the file /zen_bck/includes/zen_bck_config_cat.php.
The admin button definitions are contained in the file /zen_bck/includes/zen_bck_config_admin.php.

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.

Definitions for the admin side buttons for PDF Invoice and Super Order modules are already included. To use them you will need to un-comment all the definitions for these buttons

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.

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 definitions', specifying 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 stretched 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 could use this system to create 'highlighted' versions for special 'action' buttons, like 'buy now'.

Languages:
If you have done a translation for your language of the buttons for either admin or the catalog and would like it included, please PM nigelt74 and he will include it for the next version.

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.

BIG thanks to Nigelt74 (http://webzings.com) & Torvista for reviving, updating, and IMPROVING this almost forgotten and useful Zen Cart tool
Thanks to C Jones (http://overthehillweb.com) for the UI facelift
Thanks to Oliver Gumtau (http://www.mediakitchen.de) for his fantastic work on versions 1.5.0 - 1.6.4 of the Zen Button Construction Kit
Thanks to Mark James for his beautiful, professionally looking "Silk" icon set used here.
http://www.famfamfam.com/lab/icons/silk
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

Version History

Version 1.6.8 - torvista, nigel74, & C Jones

Improved user interface (module & readme) -- new tabbed layout courtesy of the Tabbed Products Pro module (C Jones -- http://overthehillweb.com)
Squashing various layout and functional bugs (nigelt74 -- http://webzings.com)
Improved button template layout (nigelt74 -- http://webzings.com)
Added custom button creation functionality including the ability to choose the icon to be used on your custom button (nigelt74 -- http://webzings.com)
Javascripts and CSS files moved to the "includes" folder (C Jones -- http://overthehillweb.com)
Updated icon overlay definitions for admin buttons. Each admin button now has a defined icon--added additional silk icons to support the updated icons (C Jones -- http://overthehillweb.com)
Addition of more Droid Open Source fonts (C Jones -- http://overthehillweb.com)
Formatting changes for 100% html validation (C Jones -- http://overthehillweb.com)
W3C validation icon added to app main page and readme (torvista)
Updates to readme (including moving the readme file to it's own directory) (torvista & C Jones -- http://overthehillweb.com)

Version 1.6.7 - torvista & nigel74

Added button/catalog and button/admin directories so each type of button gets saved to a separate directory. Variable added to button config files to steer this. (torvista)
Missing swedish folder added to enable error-free generation (torvista)
Cleanup of button definition file (removal of non-standard Zen Cart buttons) to avoid errors (torvista)
Additions to readme concerning font useage (torvista)
Non-free fonts removed and a free one included to avoid disconcerting error on first run (torvista)
Added transparent png support (nigelt74 -- http://webzings.com)
Added ability to select admin or catalog button generation from front end (nigelt74 -- http://webzings.com)
Added catalan support from forum post (nigelt74 -- http://webzings.com)

Version 1.6.6 - torvista

Deprecated functions replaced for compatibility with PHP 5.3
Replaced <?= to <? php echo for compatibility with PHP 5.3
Encoding of special characters in the catalog buttons file was changed to html entities for compatibility with PHP 5.3 (thanks to nigelt74 -- http://webzings.com). Admin only done for spanish.
Changed _default_preset so it would load all languages instead of causing an error
<? added php to config file
Corrected path error in pngbehaviour.htc to use /images/blank.gif for IE6 png transparency
Correction of multiple html errors (table/form errors etc.) for validation - "Save Preset" is part of the same form as the Button Layout table but was maintained with (ugly) css hacks on the same line as the Load Default preset option.
Addition of "Product Details" to spanish button definitions, previously not translated

Version 1.6.5 - torvista

Minor cosmetic changes
Created new zen_bck_config ADMIN.php file for the Admin buttons in English and Spanish
Bug fix: main page gave an error on load due to missing font in font folder
"Bug fix": last two versions offered for download were incomplete

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