Side Border Stationery


*Side Bordered Stationery HTML*

Left bordered stationery

This is a little tutorial to help you learn how to
make a left bordered stationery using HTML script.

It would have this apprearance.
Colored scroll bars, a border all the way around
and the text off of the main graphic.

You need one seamless background tile that is
1280 pixels wide and the height of your choice.
This one is 400 pixels high.

The graphic shown is smaller to fit the page.

The graphic

I do not know who the artist is of the
tube that I am using on the stationery tile.
If you know, please let me know so that
I can give credit where credit is due.

Now that we have all the materials that we need,
we can get on with doing the tutorial.

Drag this arrow to keep track of where you are.



1) Click on select all, highlighted in pink.

2) Press CTRL C to copy it to your clip board.

3) Paste it into a new note pad document.
You can use an HTML Editor.

4) Save it to a file where you will be able to find it.
Save it as an HTML file and a txt file.

5) Open the text file and you can make changes
to the script to suit yourself.

Select All


The changes should be made as shown below.

black = Give your stationery a name.

red = Color Changes.

green = Pixel changes for border size.

white = Font family changes.

yellow = Margin settings for the text.


<html>
<head>

<title>give your stationery a name</title>

<style>

body{
border-right: #8494A5 5 px ridge;
border-top: #8494A5 5 px ridge;
border-left: #8494A5 5 px ridge;
border-bottom: #8494A5 5 px ridge;

scrollbar-face-color: #6182C5 ;
scrollbar-highlight-color: #2C2874 ;
scrollbar-shadow-color: #2C2874 ;
scrollbar-arrow-color: #2C2874 ;
scrollbar-base-color: #6182C5 ;
scrollbar-3d-light-color: #2C2874 ;
scrollbar-dark-shadow-color: #2C2874 ;
scrollbar-track-color: #6182C5 ;

font-family: Georgia;
font-size: 16pt;
font-weight: bold;
color: #E0E6E4;

margin-left: 300px;
}
</style>
</head>


The rest of the sript has comments in it to
let you know where to put the background tile
and fill in the info for the ticker at the bottom.

Guess what? That is it! You are done!

Hope you had fun and found it an easy tutorial to use.

This site is best viewed at 1024 x 768 screen resolution
© Termicat's Lair 2002
Designed by  Termicat