HotDoodle Logo
Fancy Buttons

There are numerous places where a form button may be shown to the end user, something like
     <input  type="submit" value="Update" />

The problem is that there is little you can do to format these with CSS, you cannot make rounded edges, nice backgrounds, etc.

In some places in the generated HTML HotDoodle can instead of an <input> like the above generate something like

<table class='blueshiny' border='0' align='left' cellspacing='0' cellpadding='0'> 
    <td class='blueshiny_start'>&nbsp;</td>
    <td class='blueshiny_middle'><a href=' ... '>View Options</a></td>
    <td class='blueshiny_end'>&nbsp;</td>

where the various "blueshiny" CSS classes allow for the additons of rounded edges and such. The "blueshiny" name would change for different fancy button formatting.

There are 2 challenges to this approach:

  1. How to get the CSS for all of the "blueshiny" classes into the current theme
  2. How to get the HTML generator to generate the alternative button, and which class to use, and on which specific buttons?


Browsing the Library of Fancy Buttons

The HotDoodle looks directory, browseable at has a buttons directory with a library of fancy button styling.   Click into the styling you want to see how to include it.

Try Browsing Now

Getting the Fancy CSS into your Theme

The easiest way to get the fancy CSS into your own theme is to use an include file that has it. The HotDoodle looks directory (browseable at has a buttons directory with a library of fancy button styling to be included.   To include "blueshiny", for example, you would simply insert the following line where you want those declarations inserted:
    {include file='buttons/blueshiny/blueshiny.tpl'}

 You don't have to memorize this, it is listed when you browse into the fancy button directory.

If you are interested in the particulars for the CSS for a button, browse the .tpl file in the fancy button directory.

Don't load more than needed:
You may load as many buttons as you want into the TPL, but loading moe than needed slows the site.

Getting the Fancy CSS Used

You may have inserted into your custom theme the CSS for fancy buttons, but it will do no good unless the HTML generator constructs HTML that references those classes. Not every theme has fancy buttons, and different fancy stylings may be needed in different places.

HotDoodle has divided its buttons into various named groupings, and each grouping can be assigned a fancy button styling to be used.   For example, to use "blueshiny" for the quantity fields in a product catalog, you would include the following line in your look's .tpl file:
    {declare_theme_var var='button_prodcat_qnty_class' val='blueshiny'}

As before,  you don't have to memorize this, it is listed when you browse into the fancy button directory.


The custom theme screen has a "Browse Used Buttons" that will show all buttons loaded into the last saved TPL and how they are assigned to be used by the code.

If you do not see your button, the most common reason is getting the file path wrong on the {include ...} statement. To debug, examine the CSS and look for "Start buttons/NewClassName". You can also examine the expanded CSS that follows to verify that classnames and URLs came out OK.

If you see your button listed, but it is not properly drawn, try using "F5" to do a deep browser referesh.

Button assignments are cached by HotDoodle, so if you change the assignments in one browser another browser may not notice. To drop the cache, in the other browser open a new session, visit the site wuth ?hdsid=new appended to the URL -- this starts a new HotDoodle session.

List of Button Classes

The possible uses of fancy buttons is often growing. To see what can be set use the "Browse Used Buttons" link on the custom theme page.


The below declarations are an example where blueshiny buttons are used for product catalog quantities, and opshiny buttons are used for everything else.

   /* Enable smallblueshiny buttons */
   {include file='buttons/blueshiny/blueshiny.tpl'}
   {declare_theme_var var='button_prodcat_qnty_class' val='blueshiny'}

   /* Enable opshiny buttons */
   {include file='buttons/opshiny/opshiny.tpl'}
   {declare_theme_var var='button_unspecified_class' val='opshiny'}


Why Not A Bunch of Pre-Built Button Images?

We could have a library of button images pre-built with words included, but in many cases the button labels are user entered, or may be translated into an unexpected language. The tables we generate allow for flexible strings and string lengths.

Creating New Buttons

To create a new fancy button:

  1. Copy a button directory to NewClassName
  2. Rename the tpl file to NewClassName.tpl (case sensitive)
  3. Alter start.gif, middle.gif, and end.gif as desired.
    Resizing is fine, as long as the CSS works with it
    Using other image types is fine
    You may add images if needed by the CSS
  4. Edit NewClassName.tpl
  5. Make the second line read
      {assign var='buttonclass' value='NewClassName'}
  6. Modify the CSS as needed
  7. It is instantly available — you may need to use F5 to force a CSS browser refresh.

  8. Deploy it in a site, capture a sample image, and store in the NewClassName dir as An_Example.gif (case sensitive).

© 2006 - 2015 Metabyte, Inc., All Rights Reserved, Patents Pending, HotDoodle™ Custom Web Design and Quality Affordable Website Designers for Small Businesses and Professionals
Powered by, HotDoodle™ Custom Web Design and Quality Affordable Website Designers for Small Businesses and Professionals
Multilingual I18n website design Site Map