^Back to Top

Calculator Mall

Free Calculators

Financial Calculators , Mortgage Calculators: Fixed Mortgage, Adjustable Rate Mortgages ARM, Mortgage APR Calculators and More! Financial Calculators you can put on your website! Colorful, interactive, graphing financial calculators. Free downloads! Calculator Trial Period Ended For:, KJE Calculator License Not Found for:, Free Financial Calculators

Knowledge Base - How to Customize the Calculator's look

Open KJESiteSpecific.css file to change any of the predefined fonts, colors and styles.

To change the Color of Headings you can edit: 

.KJEFontHeading{
color:#000000;
}

 

To change the Font you can edit:

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

 

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):

.KJETitle {
font-size: 14pt;
text-align: center;
background-image: url('yourimage.png');
background-repeat: no-repeat;
background-position: -8px -8px;
background-size:85px 85px;
}

 

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:

  1. 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.
  2. You can uncheck lines to see what would happen if a line was removed
  3. You can edit the values of the lines
  4. 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:

  1. It is good practice to only include the lines that you changed, let the KJE.css continue to define the other attributes.
  2. 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.
  3. When changing fonts, define the size in 'em' to remain consistent with all of our other font sizing CSS.

 

User Comments