HOME Family Pages Computer Help Story List Making Pictures All Pages
Before using these editing suggestions, you’ll need to have copied, pasted and saved a copy of the script in full. Directions for making the tiles are here.
By using this script you’ll have more control and get results that aren’t possible with the Create Stationery Wizard. Each part—the background, the picture, the frame and the special background of the area on which you type your message—can be edited to use your own pictures and ideas.
This picture is scrunched up so it’ll show properly on a 600 pixel wide monitor. Your email window would almost certainly be wider than this picture, and the text area would therefore be much wider too.
When you open this template in Outlook Express you won’t see the soft background in the text area. That’s only visible in preview mode—or in a received email. Click the preview tab at the bottom of the window to see what your email really looks like.
You’ll see that I’ve clicked the preview tab before taking the picture above. Don’t try to edit or send from the preview window. Use it only to see how it will look to the recipient.
A useful exercise, if you have the patience, is to send the email to yourself.
To begin with, you’ll see the text area as a narrow slot. If you’ve removed the picture, it’ll be even narrower. Drag across the existing placeholder text and begin typing. As you type your message, the frame will expand downwards.
Using #66ff66 as background colour.
While you’re in the editing window, the formatting toolbar is available. You can change the font, the size of the font, turn bold and italics on or off and change the colour of the text. You can also delete the picture and/or insert another picture. If and when you do this, make sure you choose “left” in the Alignment box so that text will flow under the picture.
The spacing between lines in the script isn’t necessary; I’ve just separated parts to make reading and editing easier. Every ; and } is important though. If you inadvertently delete one things will go wrong.
The Small PictureI included a small animation. If you want it, right click on this image and save it. (Just click “Save image as” on the menu.) Put it into My Computer\C:\Program Files\Common Files\Microsoft Shared\Stationery.If you have a different small picture or animation that you’d like to use, find this line <img src="candlespark.gif" width="28" height="39" align="left" alt="candle">. Change candlespark.gif to the name of your own picture, and change the measurements given for width and height. If you don’t want to have a picture in that place at all:
You can change the width of the side margins. If you had no side margins and a table width of 100% the table would go right across the page without leaving a background border down the sides. The side margins are in percentages so that they will expand or contract in proportion with the rest of the window.
The top margin has a definite measurement, 1.5em. An em is the about the size of a long dash. A measurement in either em or px will be the same no matter what size the window.The bottom margin matters too, even though it has no width. Be sure to keep the bottom margin. The frame will be distorted if it isn’t there.
When you write a measurement, there can’t be any space between the number and the measurement name. It’s 1.5em, not 1.5 em.
You can change the colours of text and background. Just remember to keep a good contrast between color (your text colour) and background. I’ve used a dark green #009900 for the text and a light green #66ff66 for the background.
The font is written font-family:"verdana", "arial", sans-serif;. This says, “I want the font to be Verdana, but if that’s not available I’ll have Arial. Failing that use any sans-serif font”. Put the font of your own choice before Verdana in the list. If the font you want to be used is a serif font, change sans-serif to serif at the end of your list.
The outside border is made by tab1 and the inner border by tab2. The designation “tab” doesn’t mean table. I’ve just made up two different names to say which bit I’m talking about. The names dog and cat would have done just as well!
These two—tab1 and tab2—are almost identical. The colours have been reversed and the backgrounds are different.
In both boxes—tab1 and tab2—the borders have widths, colours and styles given individually. If you wanted one colour all the way around you could just write border-color once instead of four times. I’ve written border-width and border-style four times only so that you can, if you wish, compare two widths or styles while you’re experimenting. It would be perfectly adequate to have just one line for each of these. For a double table like this one, “solid” is probably the best style to stick with.
The background of tab1 is the colour you’ll be typing on, although it’ll be covered by the soft background when you send the email and when you inspect it in the preview window. It also makes the fine line between the inner and outer borders. You could replace the green with a lighter green, #99ff99, or a cream colour, #ffffcc, to make a better background for typing, but you’d then, of course, have a lighter line between the inner and outer borders. If you’ve changed your border colours to, say, shades of blue, you’ll need to change the background as well. In that case you’d use a very soft blue, such as #ccffff—and a dark blue like #0000ff for your text colour.
Using #99ff99 as background colour.
There’s no color (text colour) or background given for tab2. It isn’t good to enter a text colour without accompanying it with a background colour. The background of tab2 is going to be the soft balloon tile background that we put in with the special script. The text colour will be inherited from tab1.
The last item, p {font-weight: bold; font-size: small;} tells how you want each paragraph of your letter to look. The p stands for “paragraph”. Each time you hit the Enter key you start a new paragraph, and, as in a word processor, “paragraph” means “a block of text”. You can, of course, change any particular word, phrase or paragraph when using the stationery in OE, by using the formatting toolbar, but you want text with which you don’t interfere to be small and bold. “Small” isn’t very small; there’s x-small and xx-small below it! If you’d rather use point sizes you can—write 14pt or 16pt or whatever instead of small. You could also change bold to normal, although bold text does work better when there’s anything other than a plain background.
The first tag, <div align=center> says, “I want an invisible container centred on the page”. The plain <center> tag says, “The next thing is to be centred within the container”.
The outer frame is made with a table, and the class="tab1" says that all of the colours and widths set out in tab1 in the style section are to be used. It’s necessary to say that the table is to take 100% of the available width, otherwise it would expand sideways only according to the text inside it. You can change 100% to a smaller percentage if you want to; be careful not to make a long skinny text area, though.
We have to state the purpose of the table, so we write summary="This table is to create a border."
The next bit, <tr> announces the beginning of a table row. Most tables have more than one row and we have to say where each row begins and ends.
Then we have <td class="tab2"> This opens a table cell (td stands for “table data”). Most table cells simply begin <td>, but we’ve added class="tab2" to say that we want the colours and other things named in .tab2 to be used here.
Inside that table cell is a second table. This table forms the text area. As well as width="100%" and summary="text area." I’ve added id=tab2. This ties this table to the script at the bottom of the page. When id is used, it means this one, and only this one. You can’t have the same id for more than one thing on the same page. This table is special and unique, and its unique characteristics are tab2.background=tab2bkg.src This tells the computer to look for something called tab2bkg and use whatever is beside src as the background for this table.
Inside this table is a table row <tr> </tr> and inside the table row is a single cell <td></td>. Inside the cell is a paragraph <p></p> within which all writing and pictures—if any—will go. Whatever is typed here will be small and bold (unless changed in OE with the formatting bar) according to the definition of p in the style in the head of the stationery. The font will be Verdana, as requested in the definition of the body. How to change the picture, or eliminate it altogether, has already been explained here.
I’ve added some sample text. I used caps to make it stand out. Lower case would have done just as well. You might also prefer to write an instruction, such as Drag over this text and, when it is selected, type your greeting. In OE, you would drag across this text to select it and begin typing your actual message. Take care that the picture isn’t accidentally selected as well. If it is, it’ll be deleted when you start typing.
The lines after the temporary text simply close things, exactly in reverse order to their having been opened.The paragraph is closed first, then the cell in which it was written, then the table cell that contains the paragraph, then the table row that contains that cell and so on, right back to </div>. As you’ve pasted this particular script, you don’t have to worry about this, but remember, when you’re writing your own—and you certainly will—that each part must close in exactly reverse order. By far the easiest way to make sure of this is to add both opening and closing tags at the same time and then put your insertion point between them before you type whatever’s to go inside. Check the diagram included with the first script explanation if you’re not sure.
This line <!--Embedded Table Background Image Here--> is enclosed in special tags <!-- and --> that prevent its being confused with the rest of the script. It’s a hidden “comment” line. It’s here to remind the person editing the script just what it is and what it’s for.
The next part is also a hidden comment. It’s an author’s credit. It’s like the author’s name on a book or the artist’s name on a painting. Lots of generous people give away help, scripts and even whole programs. The credit notice not only acknowledges their work, but gives others the opportunity to thank them, to look at their web site or even, perhaps, ask them for further advice. Never remove the author’s credit.
<!--This part by Susan aka Night Owl web site
http://www.creativelydesigned.com/oe6tutorial.html-->
Should you make extensive changes or improvements to a script, it’s fine to add a line that says, “Modified by Mary McGummidge” or whatever. You would put the special <!-- and --> tags around that line as well, of course.
There are two parts here. First the picture is identified <IMG id=tab2bkg
style="DISPLAY: none; LEFT: -1800px; POSITION: absolute;
TOP: -1800px" src="balloons02m.jpg" alt="balloons"> and positioned.
The only editing you’d do here is to change balloons02m.jpg to the name of your own tile and to change balloons in alt="balloons" to a brief description of your own tile. You can use more than one word in the description—you might want to write “Multi-coloured party balloons”.
The first line of the next part, <script language=vbscript type="text/vbscript"> says, “This is a script and it’s the sort of script (Visual Basic) written especially for Microsoft programs”. VB script isn’t guaranteed to work with other brands of programs. The special vb script is closed in the same way as all other parts, with a </script> tag.
Between the two script tags has been written tab2.background=tab2bkg.src which says, “Find the item that’s identified as tab2 and give it the background identified as tab2bkg.src”.
Right at the end we have </body>, which says, “This is the end of the body”, and </html>, which says, “This is the end of the whole thing”.
And that, you’ll be glad to hear, is the end of the whole thing. Once you’ve put it all together—and it takes much less time than wading through these directions—you may like to test your email before you send it to a friend.
This is particularly useful if you’ve included a javascript or vbscript trick—falling flowers, circling fairies, a special background like the one used in this script or whatever. Sometimes these scripts lack the vital part that identifies the tiny images you see in your preview window and they are replaced by red crosses when the email arrives.
