Making a Stat with a Patterned Background
Part 3B
So far, you've learned how to copy and paste your pathways easily into your coding. Now we will continue with the rest of the coding. I will re-paste the picture here and we will start with #5:
In #5, we will be replacing the "background goes here" ONLY portion of the coding, NOT the file:/// portion.
So, find your background tile, right click on it, go to properties, then highlight the path, copy it and paste it into your pathway. Then, go back and copy the name of the graphic...just like we did for the midi. Your path should now look like this, but with your path and graphic name:
background=file:///"D:PSP/tutorials/MyLessons/OEWizard/Duck/dkbkgrnd.jpg" topmargin="0" leftmargin="0"
#6) This is where our topper strip goes. It MUST always be 1025 pxls wide to use with this template. We are going to paste our pathway here just like we did for our background tile...starting with "topper goes here". See if you can copy and paste as we've done before. Your pathway should look something like this, with your path and graphic information substituted for mine:
img border="0" src="D:PSP/tutorials/MyLessons/OEWizard/Duck/dk.jpg" width="1025px" height="350px"
#7) If you would like a ticker, that message that runs along the bottom of the screen, put it here. I put the name of my graphics site, Lighthouse Graphics 2004.
That is basically it for the changes you need to make. Here is what your text file should look like how...with your pathways and graphic names.
<html>
<head>
<STYLE>
body{
background-color: #d88a1c;
font-family: Comic Sans MS;
font-size: 18pt;
color: #7A6C36;
font-weight: bold;
margin-left: 100px;
margin-top:300px;
}
</STYLE>
<title>Get Well Duck</title>
<BGSOUND balance=0 loop=infinite src="D:\PSP\Midis\winterpeace_JimBrickman.mid"
volume=-900>
</head>
<body background="file:///D:\PSP\tutorials\MyLessons\OE
Wizard\Duck\dkbkgrnd.jpg" topmargin="0" leftmargin="0">
<!-- this next image is the image that will be the corner image, make sure
your corner image is 1025px wide and make sure that you insert the exact
height of the image into the script -->
<p><span style="position: absolute; left: 0; top: 0; z-index: -1">
<img border="0" src="file:///D:\PSP\tutorials\MyLessons\OE
Wizard\Duck\dk.jpg"1025px" height="350px"></span></p>
<SCRIPT language=JavaScript>
<!--
ScrollSpeed = 500; // milliseconds between scrolls
ScrollChars = 1; // chars scrolled per time period
function SetupTicker() {
// add space to the left of the message
msg = " Lighthouse Graphics
2004
";
RunTicker();}
function RunTicker() {
window.setTimeout('RunTicker()',ScrollSpeed);
window.status = msg;
msg = msg.substring(ScrollChars) + msg.substring(0,ScrollChars);}
SetupTicker();
<!-- end -->
</SCRIPT>
<p>Text goes here!</p>
</body>
</html>
The next step is to save it as an HTML file. In Notepad, simply go to File/Save As, and give it a name with the extension .html, like so:
Open OE, go to the envelope icon, select "select stationery", browse to where your new stationery is, open it up and Save As as eml file into your new EML file folder.
If you still want to make some changes, use the Source tab to go into the coding and make the changes like we've done before in the previous part of this tutorial.
You can reuse that template over and over again to make new toppers. Just copy and paste the new pathways in as you make new toppers and backgrounds. Just make sure your background tiles are seamless.
If you have any questions on how to do this...please contact me.
Enjoy!