Customizing your Calculators

More information can be found at:

Features
General FAQ
Customize FAQ
Trouble Shooting FAQ

How do I change the default values for a calculator?
How do I change the background color of a calculator?
How do I change the foreground color of a calculator?
How can I change other applet's colors?
How can I change a graph's line or bar colors?
How do I change the background image of a graph?
How do I change the applet's fonts?
Can I change the applet border?
How can I change the main calculator page?
How do I change the report template?
Where should the report files be located?
How can I modify the reports?
How can I change the formatting on the banded report?
How can I change the banded report titles?
Can I add a logo within the applet itself?
Do you support currency other than dollars?
Do you support European number formats?
Do you support other languages?

How do I change the default values for a calculator?

All default values are sent to the calculator applet via parameters. These parameters are found in the calculator's HTML document inside the applet tag. To change a default value, simply edit the calculator's HTML document (with a text editor, or if you have an HTML editor that would be fine as well) and change the parameter's value.

For example, to change the income tax rate on the Mortgage Refinance calculator from 28% to 15% you would:

1. Open the file MortgageRefinance.html
2. Locate the APPLET section of the document (search on APPLET)
3. Change: <PARAM name="INCOME_TAX_RATE" value="28">
4. To: <PARAM name="INCOME_TAX_RATE" value="15">
5. Save MortgageRefinance.html

How do I change the background color of a calculator?

Like the default values, this requires a simple change to the calculator's HTML document. For example to change the background color of the Compound Interest calculator to white:

1. Open the file CompoundInterest.html
2. Locate the APPLET section of the document (search on APPLET)
3. Change: <PARAM name="BACKGROUND_COLOR" value="EEEECC">
4. To: <PARAM name="BACKGROUND_COLOR" value="FFFFFF">
5. Save CompoundInterest.html

Other interesting colors:

Yellow: FFFF00
Blue: 0000FF
Light blue: CCCCFF
Red: FF0000
Pink: FFCCCC
Green: 00FF00
Light green: CCFFCC
Teal: 00FFFF
Grey: DEDBBF

How do I change the foreground color of a calculator?

Like the background color, this requires a simple change to the calculator's HTML document. You will need to add the parameter FOREGROUND. By changing the foreground color, you change the color for all of the fonts, lines and controls. For example to change the foreground color of the Compound Interest calculator to red:

1. Open the file CompoundInterest.html
2. Locate the APPLET section of the document (search on APPLET)
3. Find the line with the background color (similar to this): <PARAM name="BACKGROUND_COLOR" value="EEEECC">
4. Add the line: <PARAM name="FOREGROUND_COLOR" value="FF0000">
5. Save CompoundInterest.html

How can I change other applet colors?

To change the other colors of your calculator applets, all you need to do is add a few additional parameters to define the new colors. Ten parameters can be used to define the main colors for an applet. They are:

1. COLOR1
2. COLOR2
3. COLOR3
4. COLOR4
5. COLOR5
6. COLOR6
7. COLOR7
8. COLOR8
9. COLOR9
10. COLOR10

Just like the other HTML color tags, the six letter code is a HEX RGB color. Where black is "000000" and white is "FFFFFF". To add a parameter to the HTML documents for a color, locate the APPLET tag. Add a new line after the last PARAM line and before the notice "this financial calculator requires ...". The param tag should look like:

<PARAM name="COLOR1" value="EEEECC">

Here are a few other important notes about using these parameters:

1. Each parameter corresponds with a color on the applet. For the mortgage calculators the colors will be for the backgrounds of the graphs. The order of the colors is the same order as the radio buttons (where a user selects a graph).

2. All parameters are optional, where a color is not provided the default will be used.

3. Not all of the parameters are used in each applet. For example, there are only four graphs in the Mortgage Qualifier applet. Only the first four parameters are used.

How can I change the graphs line or bar colors?

Graph line, bar and pie colors can be changed with the the following parameters:

GRAPHCOLOR1
GRAPHCOLOR2
GRAPHCOLOR3
GRAPHCOLOR4
GRAPHCOLOR5
GRAPHCOLOR6
GRAPHCOLOR7
GRAPHCOLOR8
GRAPHCOLOR9
GRAPHCOLOR10

These applet parameters work like the COLOR applet parameters - except that they allow you to define the specific color for the lines, bars and pie slices on the charts and graphs.

How do I change the applet's fonts?

There are four fonts that can be set through applet parameters:

TITLE: Large font for the title
BOLD: Bold font for sub-titles
PLAIN: Used as the primary font for labels
TINY: Small font, rarely used except as a spacer between rows
GRAPHTITLE: Font used on graphs for titles and axis labels

Each of these fonts has three applet parameters associated with the font that appears in the applet. The table below shows the parameters and the default values.

Applet Font	Default	Font Name Parameter	Font Style Parameter	Font Size Parameter
TITLE	Helvetica,BOLD,17	FONT_TITLE	FONTSTYLE_TITLE	FONTSIZE_TITLE
BOLD	Helvetica,BOLD,13	FONT_BOLD	FONTSTYLE_BOLD	FONTSIZE_BOLD
PLAIN	Helvetica,PLAIN,11	FONT_PLAIN	FONTSTYLE_PLAIN	FONTSIZE_PLAIN
TINY	Helvetica,PLAIN,2	FONT_TINY	FONTSTYLE_TINY	FONTSIZE_TINY
GRAPHTITLE	Helvetica,BOLD,13	FONT_GRAPHTITLE	FONTSTYLE_GRAPHTITLE	FONTSIZE_GRAPHTITLE

If these parameters are not defined the defaults are used. You do not need to include all of the parameters to change a font. For example to change the FONT SIZE but no other attribute for the title, simply include a parameter like:

<PARAM name="FONTSIZE_TITLE" value=28>

Any font name installed on your PC is valid, but if a font is not found the applet will default to the closest match. This usually is Helvetica. Good (and always valid options) include: "TimesRoman", "Helvetica", "Courier", "Dialog" and "DialogInput".

Valid styles include: "BOLD", "PLAIN", "ITALIC", "BOLDITALIC". (Any other value for a FONTSTYLE parameter is ignored.)

Example: Change the PLAIN font to TimesRoman, six point, BOLD
Add the following parameters to your applet:

<PARAM name="FONT_PLAIN" value="TimesRoman">
<PARAM name="FONTSTYLE_PLAIN" value="BOLD">
<PARAM name="FONTSIZE_PLAIN" value="6">

Can I change the applet border?

You can turn off the border, change it to a solid color, change the color and change the border's width. There are four applet parameters to change these settings. Please note, all of these are optional. If none of these parameters are present within your applet tags, the default 3D border will appear.

The border tags are:

1. "BORDER": this can be set to "NONE", "3D","ROUND" or "SOLID". "NONE" will have no border. "3D" is a border with a three dimensional effect. "SOLID" is a solid color, which defaults to black. "ROUND" is a solid color, which defaults to black with rounded corners.
2. "BORDER_COLOR": This is the color for the border. It is represented as a six digit RGB value. For example "FFFFFF" is white, and "000000" is black. This parameter is only used if the BORDER is set to solid or round.
3. "BORDER_WIDTH": This is an integer value for the width of the border.
4. "PAGEBACKGROUND_COLOR": This is the color for HTML page background. This is only used if the border type is set to round. This allows the applet to paint the correct color in the open space created by the rounded corners of the applet. The default value of is white (or "FFFFFF").

Example: Solid red border that is 2 pixels wide:
<PARAM name="BORDER" value="ROUND">
<PARAM name="BORDER_COLOR" value="FF0000">
<PARAM name="BORDER_WIDTH" value="2">

Example: Round red border that is 3 pixels wide, where the HTML background is green:
<PARAM name="BORDER" value="ROUND">
<PARAM name="BORDER_COLOR" value="FF0000">
<PARAM name="BORDER_WIDTH" value="2">
<PARAM name="PAGEBACKGROUND_COLOR" value="00FF00">

How do I change the background image of a graph?

You can change the background image of a graph to any GIF or JPG image. The image is always scaled to fit the graph's background size. Like most other applet values, this requires a simple change to the calculator's HTML document. For example to change the background image of the graphs in the Mortgage Qualifier calculator to house.gif:

1. Open the file MortgageQualifier.html
2. Locate the APPLET section of the document (search on APPLET)
3. Change: <PARAM name="BACKGROUND " value=" MortgageQualifier.jpg">
4. To: <PARAM name="BACKGROUND " value="house.gif">
5. Save MortgageQualifier.html

You will also need to make sure that house.gif is located in the same directory on your web server as MortgageQualifier.html. It is not recommended to have your background images in another directory.

How do I change the main calculator page?

Since the main calculator page is simply an HTML document, your modifications are almost limitless. There are only a few things that you will need to make sure are not missing from your modified calculator page. This includes:

1. The <APPLET> tag and all of its parameters
2. The javascript that launches the report (found in the header of the document)
3. The buttons under the <APPLET> that allow your users to calculate and view the report.

As long as these few items remain in place, your calculator page should work with almost any HTML modifications your site requires.

How do I change the generated report?

Reports are an HTML template. This template can be sent to the applet in one of two ways. The entire text for the report can be included in a parameter named TEXT_FOR_REPORT. Using this applet parameter is the default means to supply the report template to the applet. The content of this parameter starts with a quotation mark and ends with a quotation mark. No double quotation marks are allowed in the parameter.

The second way to change the report is to add the parameter FILE_FOR_TEMPLATE. This file is always named the same as the calculator's HTML file with the word "Calculation" or "Calc" added to distinguish it from the the HTML file with the applet. If you add this parameter to the applet a file is loaded by the applet instead of using the TEXT_FOR_REPORT parameter.

For example:
Mortgage Payoff!
HTML document with applet: MortgagePayoff.html
HTML report template: MortgagePayoffCalc.html

Roth IRA Transfer:
HTML document with applet: RothTransfer.html
HTML report template: RothTransferCalcualation.html

Compound Interest Calculator:
HTML document with applet: CompoundInterest.html
HTML report template: CompoundInteresteCalc.html

If I use report files, where should they be located?

The report files should always be in the same directory as the HTML document that contains the java applet. By default this is the /java directory. If you use the TEXT_FOR_REPORT parameter (the default) you do not need to have the report file on your server at all.

How can I modify the reports?

You can edit any of the report templates to change the layout, text, etc. All "report tags" in the templates will be replaced with their calculated value when the report is generated. Report tags are always all capital letters with underscores between words. For example, INCOME_TAX_RATE is the report tag for income tax rate. If the value for income tax is 28% then the tag INCOME_TAX_RATE would be replaced with 28% when a report is displayed to your web visitor.

Generally each calculator has its own set of reporting tags specific to its functionality. You do not have to include all report tags in your report template. Likewise, a specific report tag can be repeated more than once.

A special report tag: **REPEATING GROUP** indicates where a payment schedule or amortization schedule should appear. This special tag must remain on its only line, with no other text before or after it.

If you use the TEXT_FOR_REPORT parameter, remember that double quotation marks are not allowed! All supported browsers will accept single quotation marks.

How can I change the formatting on the banded report?

Most of our financial calculators have a banded report that displays an amortization, payment schedule or other information that repeats over time. The report can be changed by using the following applet parameters:

Cell header
parameter: CELL_HEADER
default: (empty string)

Cell footer
parameter: CELL_FOOTER
default: (empty string)

Report table header
parameter: TABLE_HEADER
default: <table border=0 cellpadding=0 cellspacing=0 width=100%>

Table top rows (usually contains the report column titles)
parameter: TABLE_TOP_ROW
default: <TR bgcolor=#CCCCCC>

Table even row
parameter: TABLE_EVEN_ROW
default: <TR>

Table odd rows
parameter: TABLE_ODD_ROW
default: <TR bgcolor=#CCCCCC>

Table footer
parameter: TABLE_FOOTER
default: </TABLE>

Row footer
parameter: TABLE_ROW_FOOTER
default: </TR>

Example:
To make the entire report have the background color of red, you would add the following parameters to the applet:
<PARAM name="TABLE_TOP_ROW" value="<TR bgcolor=#FF0000>">
<PARAM name="TABLE_EVEN_ROW" value="<TR bgcolor=#FF0000>">
<PARAM name="TABLE_ODD_ROW" value="<TR bgcolor=#FF0000>">

Example:
To change the font to ARIAL and make the size of the font smaller in the report cells you could add the following parameters:
<PARAM name="CELL_HEADER" value="<FONT FACE='ARIAL' SIZE=-1>">
<PARAM name="CELL_FOOTER" value="</FONT>">

How can I change the banded report titles?

The titles on the banded report can be changed by using the MSG_REPORT_COL parameters. These parameters are MSG_REPORT_COL1 through MSG_REPORT_COL15. Each MSG_REPORT_COL parameter represents the formatting for a column title in a report. For example, to change all of the column titles in the Amortizing Loan Calculator, you would add the following:

<PARAM name="MSG_REPORT_COL1" value="#">
<PARAM name="MSG_REPORT_COL2" value="Payment">
<PARAM name="MSG_REPORT_COL3" value="Principal">
<PARAM name="MSG_REPORT_COL4" value="Interest">
<PARAM name="MSG_REPORT_COL5" value="Loan balance">

Can I add a logo within the applet itself?

Yes! You can add a logo to the upper left of the applet. You do this by creating a small image file (either a gif or a jpg) and then defining the following two parameters.

1. LOGO_HEIGHT: This is the height of your logo. The applet uses this information to properly size the title section.
2. LOGO: This is the file that contains your logo. Like the background image for the graph, it should be in the same directory as your calculators.

For example, to add a 20 pixel high logo from the image file "logo.gif" you would add the following:
<PARAM name="LOGO" value="logo.gif">
<PARAM name="LOGO_HEIGHT" value=20>

Can I change the title that appears within the applet?

Yes! You can change the title that appears on the top of the applet with the MSG_TITLE_LBL parameter. For example, to change the title to "Fantastic Calculator" on one of you calculators, you would simply add the following parameter to the applet:

<PARAM name="MSG_TITLE_LBL" value="Fantastic Calculator">

Please note- many of our calculators have results that display in the title of the applet. If you decide to change the applet's title, these results will no longer appear (they will have been replace by your new title).

Do you support currency other than dollars?

Yes, you can change the currency formatting to work with just about any country. The following parameters can be used to make the modifications:

1. CURRENCY_PREFIX: The string that will appear before a currency value
2. CURRENCY_SUFFIX: The string that will appear after a currency value
3. EUROPE_DECIMALS: Special format for European numbers, please see FAQ below.
4. CURRENCY_LABEL: String used to describe the currency (for example, dollars or pounds)

For example, the following will set the calculators to U.S. currency:
<PARAM name="CURRENCY_PREFIX" value="$">
<PARAM name="CURRENCY_SUFFIX" value="">
<PARAM name="EUROPE_DECIMALS" value="FALSE">
<PARAM name="CURRENCY_LABEL" value="Dollars">

For pounds sterling you could us the following:
<PARAM name="CURRENCY_PREFIX" value="£">
<PARAM name="CURRENCY_SUFFIX" value="">
<PARAM name="EUROPE_DECIMALS" value="FALSE">
<PARAM name="CURRENCY_LABEL" value="Pounds">

For in Spain you would use:
<PARAM name="CURRENCY_PREFIX" value="">
<PARAM name="CURRENCY_SUFFIX" value="pts.">
<PARAM name="EUROPE_DECIMALS" value="TRUE">
<PARAM name="CURRENCY_LABEL" value="pts.">

Do you support European number formats?

The "EUROPE_DECIMALS" parameter is special parameter that affects all number input and output. The default value for this parameter is "FALSE" and numbers are formatted such as "1,000,000.00" for one million. When this parameter is set to "TRUE" numbers are formatted for Europe, with the commas and the period switched. For example, one million would appear as "1.000.000,00".

For example, to set this option on add the following parameter:
<PARAM name="EUROPE_DECIMALS" value="TRUE">

Do you support other languages?

Only a few of our current calculators are ready for translation to languages other than English. As mentioned in the currency FAQ above, all calculators have the core functionality to allow for complete translation to other languages. Please contact us if you have specific calculators you would like to translate.

All calculators support language translation of common error messages and labels this includes the following parameters (shown with their default values):
<PARAM name="MSG_YEARS_LBL" value="years">
<PARAM name="MSG_YES" value="yes">
<PARAM name="MSG_NO" value="no">
<PARAM name="SCALE_LABEL_3" value="Billions of">
<PARAM name="SCALE_LABEL_2" value="Millions of">
<PARAM name="SCALE_LABEL_1" value="Thousands of">
<PARAM name="INPUT_ERROR_MSG" value="Please enter a valid">
<PARAM name="RANGE_LOW_ERROR_MSG" value="must be greater than or equal to">
<PARAM name="RANGE_HIGH_ERROR_MSG" value="must be less than or equal to">
<PARAM name="PERCENT_PREFIX" value="">
<PARAM name="PERCENT_SUFFIX" value="%">