Dinkytown V3 Customizing FAQ

This FAQ includes some of the common questions about customizing our V3 financial calculators. Note that this FAQ doesn't apply to using the financial calculators on dinkytown.net, only to licensed websites that have deployed our V3 software.

Please contact support with any questions when deploying or using the calculators. Reach us by email at or by phone at (612) 331-2291.

More information can be found at:

• V3 General FAQ
• V3 Deployment FAQ
• V3 Trouble Shooting FAQ
• V3 Features
• Update Instructions 3/31/2026

Dinkytown V3 Customization: An Overview

Watch our customization overview video (definitely worth your 2 minutes)!

Frequently Asked Questions:

• What CSS files are used by the calculator?
• How can I customize the calculator's CSS?
• How can I change the color of the slider “thumb”?
• How can I change the hover text in tables and on the amortization schedules?
• How do I edit a JS file?
• How do I add my logo and information to the printed report?
• How do I change default values for a specific calculator?
• How can I change global defaults and what are the global defaults that are available?
• How do I change the background colors on the input sections?
• How do I default a graph to be open (or closed)?
• How do I default an input section to be open (or closed)?
• How can I change the graph colors and fonts?
• How can I change the graph size, colors and fonts?
• Can I hide the definitions?
• How can I change definitions?
• How can I put the definitions in a different location on the page?
• Can I save the user inputs on my server?
• How can I save calculator values?
• How can I pass values to a calculator?

Dinkytown V3 Customization: An Overview

What CSS files are used by the calculator?

Your calculator package will contain two CSS files:

1. KJE.css — CSS file used by all calculators. Do not edit.
2. KJESiteSpecific.css — CSS file used by all calculators, designed to hold site-specific CSS changes. You can edit and change the CSS in this file freely, including adding new classes and attributes.

All style sheet changes for the calculators should be made in the KJESiteSpecific.css file. Never modify KJE.css directly — it defines all styles required by the calculators and changes to it will be wiped out when you apply update packages. The KJESiteSpecific.css file is loaded after KJE.css, allowing you to override virtually any CSS attribute. When an update package is applied, KJESiteSpecific.css is not replaced — all of your custom changes remain intact.

How can I customize the calculator's CSS?

You can edit the KJESiteSpecific.css file to change any of the predefined fonts, colors and styles. For example, to change the color of headings:

.KJEFontHeading {
    color:#000000;
}

To change the font used on the calculator, edit the #KJEAllContent class:

#KJEAllContent {
    font: normal 100% Arial, sans-serif;
    background: #FFFFFF;
    color: #000000;
    padding: 30px 0 0 0;
}

If you have some CSS experience you can also cut and paste classes out of KJE.css into KJESiteSpecific.css to override default values. A great way to experiment is to use Chrome's browser inspector:

1. Right-click on something in your browser and select “Inspect.” For example, right-click on the “View Report” button to see its CSS.
2. Uncheck lines to see what happens if a line is removed.
3. Edit the values of lines.
4. Add new lines.

Note that changes you make within the browser disappear when you leave that page. Copy your finalized changes into KJESiteSpecific.css. A few hints:

1. Only include the lines you changed — let KJE.css continue to define the other attributes.
2. You can only add or override lines, not delete them. CSS will override only the specific attributes that are defined and leave all others alone.
3. When changing fonts, define the size in em to remain consistent with all other font sizing CSS.

How can I change the color of the blue “?” button?

The default blue “?” button for definitions/help can be changed by adding the code below to your KJESiteSpecific.css file. The example below makes the button red with white text that inverts when active:

/* Change the color of the definition/help "?" button */
button.KJEDefinitionIcon:active,
button.KJEDefinitionIcon:focus,
button.KJEDefinitionIcon:hover,
button.KJECloseButton:active,
button.KJECloseButton:focus,
button.KJECloseButton:hover {
    color:#D40000;
    background:#fff;
}

button.KJEDefinitionIcon {
    color:#fff;
    background:#D40000;
}

button.KJECloseButton {
    color:#fff;
    background:#D40000;
}

How can I change the color of the slider “thumb”?

The default blue slider thumb can be changed by adding code to KJESiteSpecific.css. Our sliders need to support four different browser types that each use slightly different coding. The example below makes sliders red — replace 212,0,0 with the RGB color you wish to use.

/* Colors for Slider Thumb - Changes in three places: */

/* WebKit Browsers */
.KJEInputContainer input[type=range]::-webkit-slider-thumb {
    border-bottom: 12px solid rgba(212,0,0, 0.6);
    -webkit-box-shadow: 0 2px rgba(212,0,0, 0.3);
}
.KJEInputContainer input[type=range]:active::-webkit-slider-thumb {
    border-bottom: 12px solid rgba(212,0,0, 1);
    -webkit-box-shadow: 0 2px rgba(212,0,0, 0.6);
    box-shadow: 0 2px rgba(212,0,0, 0.6);
}

/* Mozilla Browsers */
.KJEInputContainer input[type=range]::-moz-range-thumb {
    border-bottom: 12px solid rgba(212,0,0, 0.6);
    -moz-box-shadow: 0 2px rgba(212,0,0, 0.3);
    box-shadow: 0 2px rgba(212,0,0, 0.3);
}
.KJEInputContainer input[type=range]:active::-moz-range-thumb {
    border-bottom: 12px solid rgba(212,0,0, 1);
    -moz-box-shadow: 0 2px rgba(212,0,0, 0.6);
    box-shadow: 0 2px rgba(212,0,0, 0.6);
}

/* Microsoft Browsers */
.KJEInputContainer input[type=range]::-ms-thumb {
    border-bottom: 12px solid rgba(212,0,0, 0.6);
    box-shadow: 0 2px 0 rgba(212,0,0, 0.3);
}
.KJEInputContainer input[type=range]:active::-ms-thumb {
    border-bottom: 12px solid rgba(212,0,0, 1);
    -webkit-box-shadow: 0 2px rgba(212,0,0, 0.6);
    box-shadow: 0 2px rgba(212,0,0, 0.6);
}

.KJEInputContainer .KJEArrow {
    border-bottom: 12px solid rgba(212,0,0, 0.6);
    box-shadow: 0 2px 0 rgba(212,0,0, 0.3);
    -webkit-box-shadow: 0 2px rgba(212,0,0, 0.3);
    -moz-box-shadow: 0 2px rgba(212,0,0, 0.3);
}
.KJEInputContainer .KJEArrow.active {
    border-bottom: 12px solid rgba(212,0,0, 0.5);
}

How can I change the hover colors in tables and on the amortization schedules?

The default blue hover colors of all tables can be changed by adding code to KJESiteSpecific.css. The example below makes hover colors red and also sets the Definition and close button to match.

table.KJEScheduleTable tr.KJEScheduleOddRow:hover,
table.KJEScheduleTable tr.KJEScheduleEvenRow:hover,
table.KJEScheduleTable thead.KJEScheduleTHeader tr.KJEScheduleHeaderRow:hover,
table.KJEScheduleTable tr.KJEScheduleFooterRow:hover,
table.KJEReportTable tr.KJEHeaderRow:hover,
table.KJEReportTable tr.KJEFooterRow:hover,
table.KJEReportTable tr.KJEEvenRow:hover,
table.KJEReportTable tr.KJEOddRow:hover {
    background-color: #9F3351;
}

table.KJEScheduleTable td.KJEScheduleCell:hover,
table.KJEScheduleTable th.KJEScheduleCell:hover,
table.KJEScheduleTable thead.KJEScheduleTHeader th.KJEScheduleHeading:hover,
table.KJEScheduleTable td.KJEScheduleCellSpecial:hover,
table.KJEScheduleTable td.KJEScheduleCellStrong:hover,
table.KJEReportTable th.KJEHeading:hover,
table.KJEReportTable td.KJECell:hover,
table.KJEReportTable th.KJELabel:hover,
table.KJEReportTable a.KJELabel:hover,
table.KJEReportTable td.KJECellStrong:hover,
table.KJEReportTable td.KJECellSpecial:hover,
button.KJEDefinitionIcon,
button.KJECloseButton {
    background: #900028;
}

How do I edit a JS file?

Only edit JS files that are designed to be edited: the PARAMS files and KJESiteSpecific.js. No other JS files should be modified. Any changes to other JS files will be wiped out by future updates.

To edit, open the file in any text editor and make your changes. We recommend WebStorm, though any free JavaScript editor will work. When editing JS files, follow these rules:

1. Make a backup first (or be able to re-download your original package).
2. JS files execute top to bottom. If an error is introduced, all code below it will stop executing. If a change at the bottom of a file doesn't seem to take effect, check for errors above it.
3. All lines must end with a ; and should not contain line breaks. Long strings inside quotation marks must be on a single line.
4. When in doubt, contact us — we are happy to help with code examples and troubleshooting.

How do I add my logo and information to the printed report?

Normally your logo is added to your calculator package before delivery. To change the logo, replace logo.png in your calculator package with the new logo you wish to use.

To add the logo yourself or make other changes to the report header, modify the following in KJESiteSpecific.js:

KJE.ReportHeader="<div style='text-align:center; width:100%'></div>";

KJE.ReportFooter="<div class=KJECenter><p class='KJEReportFooter KJECenter'>Information and interactive calculators are made available to you as self-help tools for your independent use and are not intended to provide investment advice. We cannot and do not guarantee their applicability or accuracy in regards to your individual circumstances. All examples are hypothetical and are for illustrative purposes. We encourage you to seek personalized advice from qualified professionals regarding all personal finance issues.</p></div>";

ReportHeader appears at the top and ReportFooter at the bottom of printed reports. These variables affect printed reports only, not the main calculator page. Changes in KJESiteSpecific.js apply to all calculators.

How do I change default values for a specific calculator?

Edit the calculator's specific PARAMS file (the file ending in Params.js). For example, the Mortgage Loan Calculator uses MortgageLoanParams.js. The file will start with parameter definitions like these:

KJE.parameters.set("INTEREST_RATE",KJE.Default.RateFix30);
KJE.parameters.set("LOAN_AMOUNT",KJE.Default.MortgageAmt);
KJE.parameters.set("PREPAY_TYPE",KJE.MortgageLoanCalculation.PREPAY_NONE);
KJE.parameters.set("PREPAY_STARTS_WITH",1);
KJE.parameters.set("PREPAY_AMOUNT","0");
KJE.parameters.set("TERM",15);

To change the default term from 15 to 30, replace KJE.parameters.set("TERM",15); with KJE.parameters.set("TERM",30);

To change the default loan amount to $100,000, replace KJE.parameters.set("LOAN_AMOUNT",KJE.Default.MortgageAmt); with KJE.parameters.set("LOAN_AMOUNT",100000);

Do not include dollar signs or commas in large numbers. Decimals are acceptable where appropriate. Any changes you make to a Params file are retained when you apply updates.

How can I change global defaults and what are the global defaults that are available?

All global default value changes are made in KJESiteSpecific.js, which overrides settings defined in KJE.js. Not all defaults are used by all calculators. To change a global default, copy the appropriate line below into your KJESiteSpecific.js file.

// Rate of return defaults:
KJE.Default.RORMarket = 7.0;
KJE.Default.RORRetire = 4.0;
KJE.Default.RORSave   = 0.25;

// Interest rate defaults:
KJE.Default.RateCard     = 16.00;
KJE.Default.RatePersonal = 7.50;
KJE.Default.RateFix15    = 4.00;
KJE.Default.RateFix30    = 4.50;
KJE.Default.RateAdj      = 4.00;
KJE.Default.RateAuto     = 7;
KJE.Default.RateAutoLow  = 1.9;
KJE.Default.MortgageAmt  = 200000;
KJE.Default.HomePrice    = 220000;
KJE.Default.StateTaxRate = 8.00;
KJE.Default.InflationRate= 3.0;
KJE.Default.MortgageMin  = 0;
KJE.Default.MortgageMax  = 10000000;
KJE.Default.MortgageRateMin = 1;
KJE.Default.MortgageRateMax = 25;

// Mortgage Term Defaults, range and increment settings:
KJE.Default.MortgageTerm          = 30;
KJE.Default.MortgageTermMin       = 1;
KJE.Default.MortgageTermMax       = 40;
KJE.Default.MortgageTermIncrement = 5;
KJE.Default.MortgageShowAll       = true;
KJE.Default.MortgageShowAllMax    = 25;

// Investment Rate of Return Range Defaults:
KJE.Default.InvestRateMin       = 0;
KJE.Default.InvestRateMax       = 20;
KJE.Default.InvestSliderRateMax = 12;

// Inflation Range Defaults:
KJE.Default.InflationRateMin       = 0;
KJE.Default.InflationRateMax       = 20;
KJE.Default.InflationSliderRateMax = 12;

How do I change the background colors on the input sections?

To change the background colors of the input sections, edit KJESiteSpecific.js and change this line:

KJE.colorList=["#eeeeee", "#ccccff", "#cccccc", "#BE4262", "#FABB50", "#DDCCDD", "#CCCCCC", "#CCCCDD", "#CCDDCC", "#CCDDDD", "#CCCCDD"];

This list contains 10 HEX color codes used in order by the calculators. Most calculators only use the first two. Colors must be HEX codes. You can also control colors on a calculator-by-calculator basis by adding this line to a specific calculator's PARAMS file.

How do I default a graph to be open (or closed)?

To change this behavior on all calculators, edit KJESiteSpecific.js and add GRAPH_OPEN parameters. Set to true to default open and false to default closed. The first graph is GRAPH_OPEN1, the second GRAPH_OPEN2, etc.

KJE.parameters.set("GRAPH_OPEN1",true);
KJE.parameters.set("GRAPH_OPEN2",true);
KJE.parameters.set("GRAPH_OPEN3",true);

If a calculator has only two graphs, GRAPH_OPEN3 would be ignored. You can also control this on a per-calculator basis by adding the code to a specific calculator's PARAMS file.

How do I default an input section to be open (or closed)?

To change this behavior on all calculators, edit KJESiteSpecific.js and add DROPPER_OPEN parameters. Set to true to default open and false to default closed. The first input section is DROPPER_OPEN1, the second DROPPER_OPEN2, etc.

KJE.parameters.set("DROPPER_OPEN1", true);
KJE.parameters.set("DROPPER_OPEN2", true);
KJE.parameters.set("DROPPER_OPEN3", true);

If a calculator has only two input sections, DROPPER_OPEN3 would be ignored. You can also control this on a per-calculator basis by adding the code to a specific calculator's PARAMS file.

How can I change the graph colors and fonts?

To change the colors used on bars, lines and pie charts, edit KJESiteSpecific.js and change the KJE.gColorList line. Colors are used in the order they appear in the list. Most calculators only use one or two colors. Changing this in KJESiteSpecific.js affects all calculators; adding it to a PARAMS file affects only that calculator.

Example KJE.gColorList:

KJE.gColorList = ["#000055", "#7B68EE", "#64A650", "#FFF200", "#5f007f", "#F15A22", "#B72467", "#6DC8BF", "#00007f", "#ff00ff", "#ffff00", "#00ffff", "#7f007f", "#7f0000", "#007f7f", "#0000ff", "#00c8ff", "#60ffff", "#bfffbf", "#ffff90", "#a0c8ef"];

Additional graph color and font variables:

KJE.gFont                 = ["Helvetica","Helvetica","Helvetica"];
KJE.gFontStyle            = ["bold","bold",""];
KJE.gFontSize             = [13,10,10];
KJE.gHeight               = 250;
KJE.gHeightReport         = 350;
KJE.gColorBackground      = "#FFFFFF";
KJE.gColorForeground      = "#000000";
KJE.gColorGrid            = "#BBBBBB";
KJE.gColorGridBackground1 = "#FFFFFF";
KJE.gColorGridBackground2 = "#CCCCCC";
KJE.gColorAxisLine        = "#666666";
KJE.gColorText            = "#000000";

How can I change the graph size, colors and fonts?

All of the variables below are already in KJESiteSpecific.js — you only need to change the value after the = sign.

Graph fonts — three font slots with face, style, and size:

KJE.gFont      = ["Helvetica","Helvetica","Helvetica"];
KJE.gFontStyle = ["bold","bold",""];
KJE.gFontSize  = [13,10,10];

Graph height — main calculator and printed report:

KJE.gHeight       = 250;
KJE.gHeightReport = 350;

Graph colors:

KJE.gColorBackground      = "#FFFFFF";
KJE.gColorForeground      = "#000000";
KJE.gColorGrid            = "#BBBBBB";
KJE.gColorGridBackground1 = "#FFFFFF";
KJE.gColorGridBackground2 = "#CCCCCC";
KJE.gColorAxisLine        = "#666666";
KJE.gColorText            = "#000000";

Can I hide the definitions?

You have two options. You can hide the definitions on the page while still allowing them to appear when someone clicks a label, or you can remove them completely. Both are controlled by setting a variable in KJESiteSpecific.js.

To hide definitions on the page but keep context-sensitive help (default is true):

KJE.ShowDefinitions = false;

To remove definitions from the page and from context-sensitive help entirely (default is true):

KJE.IncludeDefinitions = false;

How can I change definitions?

You can change definitions with a little bit of code:

1. Find the ID of the definition by right-clicking the definition name on the page and choosing “Inspect element.” You will see something like: <div id="KJE-D-ESTIMATED_CLOSING_DATE">
2. The name used to set the definition is formatted as DFN_ + the field name. For the example above: DFN_FIRST_PAYMENT_DATE
3. In the Params.js file for the calculator, add this line:
   KJE.parameters.set("DFN_FIRST_PAYMENT_DATE","First date that you can enter a payment in this field");
   Important: If your definition text contains double quotes, escape them with \".
4. To remove a definition, use the keyword REMOVE:
   KJE.parameters.set("DFN_FIRST_PAYMENT_DATE","REMOVE");
5. To change the name of the definition and entry field, use MSG instead of DFN:
   KJE.parameters.set("MSG_FIRST_PAYMENT_DATE","First");

How can I put the definitions in a different location on the page?

Definition contents are held in the variable KJE.DefinitionText. You can insert this text into any location on your page. This JavaScript would run after the calculator initializes (this code assumes you have created a div with the ID YourDefinitionLocation):

var oDefinitions = document.getElementById("YourDefinitionLocation");
oDefinitions.innerHTML = KJE.DefinitionText;

We have created a hook called KJE.customInit that is called immediately after normal initialization. You would most likely also set ShowDefinitions to false to prevent two copies from appearing. Add this function to KJESiteSpecific.js:

KJE.ShowDefinitions = false;
KJE.customInit = function() {
  var oDefinitions = document.getElementById("YourDefinitionLocation");
  oDefinitions.innerHTML = KJE.DefinitionText;
}

Can I save the user inputs on my server?

The calculators have no backend database, but provide a means to retrieve input data which you can then handle any way you wish. We provide a JavaScript function that creates a JSON object you can POST to your server. This requires experience in JavaScript, HTML, and HTTP server-side processing.

To get the JSON object of input values from the calculator:

var oCalculatorJSONObject = KJE.getJSONFromInputs();

To populate a calculator from a previously retrieved JSON object:

var oStorageItems = null;
try { oStorageItems = JSON.parse(oCalculatorJSONObject); } catch (errors) { oStorageItems = null; }
if (oStorageItems == null) oStorageItems = {};

// Populate the calculator from the retrieved object:
KJE.bStoragePopulate(oStorageItems);

How can I save calculator values?

All calculators include “Dinkytown AutoSave” with every license. You can extend this with our optional “Dinkytown AutoSave and Email” add-on for saving multiple input sets and emailing results (additional fee applies). For more information see: Dinkytown AutoSave and Email

AutoSave saves calculator information to the user's browser local storage as they enter it. No data is sent over the internet. This feature is available on any browser that supports local storage.

To turn AutoSave off, add to KJESiteSpecific.js:

KJE.parameters.set("LOCAL_STORAGE",KJE.STORAGE_NONE);

To turn AutoSave on:

KJE.parameters.set("LOCAL_STORAGE",KJE.STORAGE_AUTO);

How can I pass values to a calculator?

All calculators can accept values from a URL that will pre-fill fields when loaded. Data is passed as part of a KJEData parameter, which overrides both calculator defaults and any auto-saved data. The format is:

1. Append ?KJEData= to the calculator URL.
2. For each parameter use the format *PARAMETERNAME*:VALUE — for example, LOAN_AMOUNT set to $190,000 is *LOAN_AMOUNT*:190000.
3. Separate additional parameters with commas.

Example for the Mortgage Calculator setting loan amount to $190,000, interest rate to 4.59%, and term to 15 years:

https://www.dinkytown.net/java/mortgage-calculator.html?KJEData=*LOAN_AMOUNT*:190000,*INTEREST_RATE*:4.59,*TERM*:15

Click here to try it out!

To find parameter names, open the calculator's PARAMS file (e.g. MortgageLoanParams.js). Lines like KJE.parameters.set("LOAN_AMOUNT",190000); use the same parameter names as URL parameters.

For advanced users, to set a value in a loaded calculator via JavaScript, use code like this example which changes the INTEREST_RATE field:

<button onclick='KJE.inputs.items.INTEREST_RATE._inputField.value = "1.86"; KJE.inputs.items.INTEREST_RATE.doBlur();'>CHANGE RATE</button>

This changes the rate and calls doBlur() to set the value and recalculate. Inspect any element on a calculator to find its internal name — by convention, all caps with underscores. If you pass an invalid value, the calculator will produce an error as if it were typed in by your end user.