- Download the folder from one of San's links.
- Extract folder anywhere as long as the files are in one folder.
- Copy your favorite image file to this folder an rename it something simple like m.jpg. (*Note* It is best if the image is close to your screen resolution, otherwise you will have a lot of repeating images.)
- Open calc.htm in Notepad++. (Regular old Notepad or Wordpad will work as well for changing the code.)
- Scroll to the bottom to where you see the following code:
<body>
<div id="charCalc" class="application"></div>
<div id="dmgCalc" class="application"></div>
<div id="xpDisplay" class="application"></div>
</body><body background="m.jpg">
<div id="charCalc" class="application"></div>
<div id="dmgCalc" class="application"></div>
<div id="xpDisplay" class="application"></div>
</body>- Save the changes.
- Open style.css in a text editor as before.
- Scroll down until you see the following code:
div.application {
background: #333;
background: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#333333));
background: -moz-linear-gradient(top, #444444, #333333);
border: solid #999 1px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 1em;
margin: 1em 0;
max-width: 900px;
}div.application {
background: #333;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(68, 68, 68, 0)), to(rgba(51, 51, 51, 0)));
background: -moz-linear-gradient(top, #444444, #333333);
border: solid #999 1px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 1em;
margin: 1em 0;
max-width: 900px;
}- This causes the interactive applications (the three boxes) backgrounds to be transparent. If you don't want them transparent, don't edit style.css.
- Save the changes.
Optionally, you can edit the background color while you're in
style.css.
- At the start of the code you will see this:
html {
background: #000;
color: #eee;
font-family: Calibri, Arial;
}- Replace #000 with whatever hex code color you prefer. Don't know what a hex code is or how to get the color you want? Check this out: http://www.w3schools.com/tags/ref_colorpicker.asp
- And of course, save the changes.
- Double click calc.htm to open in your web browser and enjoy your personalized cRPG Calculator!
With the exception of changing the background color in
style.css, all you have to do to get a new background is replace the m.jpg image in the folder with another image of the exact same name (and extension). Now how easy is that?! ... Well, easier to do than to read about. :lol: