V3 Customizing FAQ

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 you have when deploying or using the calculators. Feel free to contact us via 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

Latest update instructions: Update Instructions 12/31/2016

What CSS files are used by the calculator?

Your calculator package will contain two CSS files:

KJE.css - CSS file used by all calculators DO NOT EDIT!
KJESiteSpecific.css - CSS file used 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 the KJE.css file. The KJE.css file defines all of the styles required by the calculators and you can break your installation by editing this file directly. In addition, this file is replaced when you apply update packages. The update would then wipe out any changes you made.

We have designed the calculators to always load the KJESiteSpecific.css file after the KJE.css file. This allows you to override virtually any CSS attribute from the KJE.css file by making additions to the KJESiteSpecific.css file. When an update package is applied to your installation the KJESiteSpecific.css file is NOT replaced. All of your custom changes will 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 you can edit the KJESiteSpecific.css class:

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

To change the logo in the upper right hand corner of the calculator box edit the .KJETitle class by changing the value in the background-image (the position and size may need adjustments as well):

If you have some experience in CSS you can also cut and paste classes out of the KJE.css file into the KJESiteSpecific.css file to override other default values. It is not safe to edit the KJE.css file directly. Any changes you make to the KJE.css file will be lost in future updates. But by placing a class defined in the KJE.css file into the KJESiteSpecific.css file, it will be overwritten when the page loads allowing you change virtually all CSS formatting contained within the calculator.

A great way to experiment with the calculator's CSS (and determine what you want to add to the KJESiteSpecific.css) is to use the CHROME browser to inspect the CSS used by a particular element. You can then see the CSS for the element and experiment with changes. You can do this by:

Right clicking on something in your browser and select "Inspect". For example, right click on the "View Report" button and choose "Inspect" to see the CSS used to format that button.
You can uncheck lines to see what would happen if a line was removed
You can edit the values of the lines
You can add new lines

Note that changes you make within the browser will disappear when you leave that page. You will need to put your changes into the KJESiteSpecific.css file to make them part of your calculators CSS permenantly. Fortunately, CHROME allows you to highlight and copy CSS from the inspect window. You can copy a class and paste it into the KJESiteSpecific.css file. This new class would then be used instead of the original one in the KJE.css file. Here are a couple of hints when making your changes:

It is good practice to only include the lines that you changed, let the KJE.css continue to define the other attributes.
You can only add new lines and override existing lines (no means to delete a line). When a CSS file loads attributes it will override only the specific attributes that are defined. It will leave all other attributes in a class alone.
When changing fonts, define the size in 'em' to remain consistent with all of our other font sizing CSS.

Here is an example for the buttons on top of the calculator:

What you see when you inspect one of the buttons:
Inspect Button CSS

If you want to just change the color of the font and background of the button you might include the following in the KJESiteSpecific.css file:
   .KJECommandButton {
      color: #00ffff;
      background: #eeeeee;
   }
Your new buttons would then look like this (very nice!)
New Button CSS

You could, of course, also change the font, font size, borders and other CSS as well. But if you only wanted to change the text to light blue and make the background light grey, you don't need to include the other CSS in your KJESiteSpecific.css file.

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 a nice red color with white text that changes to a white button with red text when active:

How can I change the color of the slider "thumb"?

The default blue slider 'thumb' can be changed by adding code to the KJESiteSpecific.css. Our new sliders need to support four different browser types that all use slightly different coding.

Below is an example of the code you need to make the sliders show up as a nice red. Use this same code but replace 212,0,0 with the RGB color you wish to use.

How do I edit a JS file?

First, keep in mind you should only edit JS files that are designed to be edited. This includes the PARAMS files and the KJESiteSpecific.js file. No other JS files should be modified. Doing so may break your calculators. In addition, any changes you make to any other JS file (other than the KJESiteSpecific.js or the PARAMS files) will be wiped out with the application of any future update.

To edit, simply open the file in any text editor make your changes (and of course save them). Notepad can work, but may be difficult to manage long lines that wrap. We simply can't live without our WebStorm editor: http://www.jetbrains.com/webstorm/ . You can also find free JavaScript editor options on the web. You don't need to know JavaScript to make simple changes, but some knowledge will be very helpful. Programmers with JavaScript experience will find making changes and edits a simple process.

When you edit JS files to include changes to the JS code, from examples below or as instructed by KJE make sure that you follow these basic rules of thumb:

Make a backup first (or at least be able to redownload your original package)
JS files are JavaScript code files. The code will execute from the top down. If an error is created in the code no other lines of code in the file will be executed. So if you made a change at the bottom of the file that never seems to make a difference, there could be an error in the file above it.
All lines need to end with a ; and should not have a line break. If you have a long string of text inside quotation markes, it needs to be all on the same line to work.
When in doubt, contact us. We can help out with a lot of code examples and trouble shoot should a JS file that has you stumped. Please feel free to contact us before you spend countless hours trying to figure something out. If you are stuck, give us a shout!

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

To be able to add the logo to your printed reports. Modify the following in the code KJESiteSpecific.js file:

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>";

Above are two javascript variables that can contain any HTML markup as you wish it to appear on the reports. ReportHeader is at the top, ReportFooter is at the bottom. Changing this in the KJESiteSpecific.js file will make the change appear on all of your calculators. These two variables only affect the printed report, not main calculator page.

How do I change default values for a specific calculator?

You can change any default values for a calculator by editing the calculator's specific PARAMS file. Each calculator should have a file with the extension Params.js. For example, the Mortgage Loan Calculator uses the files that begin with "MortgageLoan". All default parameters are contained within the file MortgageLoanParams.js. Edit this file to change values. For example, the file will start with the following parameters defined:

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 any default, simply edit the value in each parameter line. For example, to change the default term from 15 to 30 change 15 to 30 in the TERM line:

Replace
KJE.parameters.set("TERM",15);

With:
KJE.parameters.set("TERM",30);

Some parameter values use global defaults that can be modified for all calculators that use them in one location. But these can be changed for a specific calculator simply replacing the default value variable with the actual value you wish to use. For example to change the default loan amount to $100,000 for this calculator you would edit the line:

Replace
KJE.parameters.set("LOAN_AMOUNT",KJE.Default.MortgageAmt);

With:
KJE.parameters.set("LOAN_AMOUNT",100000);

Please note that for larger numbers do not include dollars signs or commas. Decimals are acceptable where appropriate. Any changes you make to a Params file is kept intact when you apply an update, these changes will not be overwritten or require you to recreate them after applying an update.

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

All global changes for default values are made in the KJESiteSpecific.js file. This file overrides normal settings that are defined in the KJE.js file. The KJESiteSpecific.js file is designed to be modified so that changes you make are retained when you apply updates to the calculator.

Not all defaults are used by all calculators. To change a global default, simply copy the appropriate line of code listed below and put as a line in 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 and settings:
KJE.Default.InvestRateMin = 0;
KJE.Default.InvestRateMax = 20;
KJE.Default.InvestSliderRateMax = 12;

Inflation Range Defaults and settings:
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 colors used as backgrounds to the input sections, you need to edit the KJESiteSpecific.js file and change the line below (note that this line in your actual file should not have any line returns):

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

This color list 10 has HEX color codes used in order by the calculators. Most calculators only use the first two colors defined. You can change any of these colors, but they need to be HEX codes.

You can use this page to help select HEX colors to use in your page.

You can also control the behavior of the input sections on a calculator by calculator basis by adding the code above to a specific calculator's PARAMS file. For example, for the Mortgage Loan Calculator you would add these lines to the MortgageLoanParams.js file.

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

To change this behavior on all of your installed calculators you need to edit the KJESiteSpecific.js file and add GRAPH_OPEN parameters. Set this parameter to true to have them default open and false to default close. The first graph is controlled by GRAPH_OPEN1, the second by GRAPH_OPEN2, etc. The lines below would default the first three graphs to be open:

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

If a calculator had only two graphs, GRAPH_OPEN3 would be ignored.

You can also control the behavior of the graphs on a calculator by calculator basis by adding the code above to a specific calculators PARAMS file. For example, for the Mortgage Loan Calculator you would add these lines to the MortgageLoanParams.js file.

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

To change this behavior on all of your installed calculators you need to edit the KJESiteSpecific.js file and add DROPPER _OPEN parameters. Set this parameter to true to have them default open and false to default close. The first input section is controlled by DROPPER _OPEN1, the second by DROPPER _OPEN2, etc. The lines below would default the first three input sections to be open:

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

If a calculator had only two input sections, DROPPER _OPEN3 would be ignored.

You can also control the behavior of the input sections on a calculator by calculator basis by adding the code above to a specific calculators PARAMS file. For example, for the Mortgage Loan Calculator you would add these lines to the MortgageLoanParams.js file.

How can I change the graph colors and fonts?

To change the colors used on the bars, lines and pie charts, you need to edit the KJESiteSpecific.js file and change the line below (note that this line in your actual file should not have any line returns):

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

This color list 20 has HEX color codes used in order by the calculators. Most calculators only use the first few colors defined. You can change any of these colors, but they need to be HEX codes. You can use this page to help select HEX colors to use in your page: Color Selector

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

The KJESiteSpecific.js file as the variables required to change many aspects of the graph. Simply edit values of the variables in the KJESiteSpecific.js file to make these changes (note that all of the code lines below are in the file already, you only need to change the value after the = sign.)

Graph fonts: There are three graph fonts and their associated attributes used by the graphs. Editing the values of these variables in the KJESiteSpecific.js file will change the font face, style and size.

Graph Height: You can adjust the height of the graphs in the main calculator and the report with these two variables:

Additional color variables that you can adjust include:

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 the definitions completely from the page. Both are controlled by simply setting a variable in the KJESiteSpecific.js file.

To hide the definitions but still allow context sensitive help, include the line below to set the ShowDefinitions variable (the default if this line is missing is true):
KJE.ShowDefinitions = false;

To not include the definitions definitions on the page or in the context sensitive help set the IncludeDefinitions variable (the default if this line is missing is true):
KJE.IncludeDefinitions = false;

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

We hold definition contents in the variable: KJE.DefinitionText You can use this variable to insert the definition text to a different location on your page. For example here is the Javascript that would need to run after the calculator initializes (this code assumes you have created a DIV with the ID YourDefinitionLocation):

We have created a "hook" that lets you define the function KJE.customInit and this will be called immediately after the end of our normal initialization to allow to load content like the above. You most likely would need to set the variable ShowDefinitions to false so that two copies of the definitions would not appear on the page. For example, to get the definition text and put it into a div with the ID YourDefinitionLocation you would need to put the function below in the KJESiteSpecific.js file:

Can I save the user inputs on my server?

The calculators don't have any backend database, but provide means for you to retreive the input data, which you can then handle anyway you wish. We have an interface that uses a JSON object to gather input values and you can create a function to POST them to your server. This type of programming would require someone with experience in JavaScript, HTML and HTTP Server Side processing.

It is a JavaScript function that creates a JSON object that you can then POST to your server. You need to create the programming to hook this up, but the function call is simple. If you use JQuery you can easily create a small AJAX function to send this data to your server. To get the JSON object you would use the following JavaScript function on the calculator page and it would return the input values from the calculator on the page (note that the server-side process and the AJAX function are not shown below):

To take a JSON object that you have retrieved and populate the values back into the calculator you would use code like this:

How can I save calculator values?

As of 12/31/2014 all calculators now include "Dinkytown AutoSave".

This new feature saves calculator information as it is entered to the user's browser local storage. This great feature allows you to exit the calculator and then come back later, with all entries preserved. No more starting over! No data is sent over the internet, and all local data is stored locally and obfuscated. This feature is available on any browser that supports local storage including IE8 and above.

To turn this feature off, you can include the parameter in your KJESiteSpecific.js file:
KJE.parameters.set("LOCAL_STORAGE",KJE.STORAGE_NONE);

To turn this feature on, you can include the parameter in your KJESiteSpecific.js file:
KJE.parameters.set("LOCAL_STORAGE",KJE.STORAGE_AUTO);