- You are here:
- Home
- Knowledge Base
- Helpful Information
- 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:
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: