Guestbook Example

Kevin's GuestBook

This page will show you how I got my guestbook to look the way it does using the Tech Centre. The options I used are as follows.

View my Guestbook here.

The email information is for my personal info and will never be disclosed to anyone. The URL and Page Name fields are there to provide a link back to your page at the top of each guestbook page.

The interesting things are what you can do with the other options.

For my guestbook, I used the url to my home page background. I simply entered http://www.wildweasel.ca/images/back.gif in the background image field. I entered White in the background colour field as a backup for anyone who might have their images turned off. The field will accept colour names as well as the #rrggbb format for supported colours.

For the optional css page, I entered the URL of a css page I created just for my guestbook. You're welcome to use it if you'd like. I put http://www.wildweasel.ca/css/guestbook.css into the field. The actual style sheet is as follows:

* {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: Navy;
	font-weight: normal;
}

P {
	margin-left: 12;
	margin-right: 12;
}

H1 {
	font-size: 25px;
	text-indent: 15;
}

H2 {
	font-size: 20px;
	text-indent: 15;
}

H3 {
	font-size: 14px;
	text-indent: 15;
}

SMALL {
	font-size: 10px;
}

TEXTAREA {
	font-size: 14px;
	background: white;
	font-weight: bold;
	color: Navy;
}

INPUT {
	font-size: 14px;
	background: white;
	font-weight: bold;
	color: Navy;
}

.button {
	background: #ddddff;
}

A:link {
	color: #0000ff;
	font-weight: bold;
}

A:visited {
	color: #0000ff;
	font-weight: bold;
}

A:hover {
	color: #ed0000;
}

A:active {
	color: #ed0000;
	background: #eeeeff;
}

.Guestbook_Entry_Table {
	width: 90%;
	border: solid 1px #dddddd;
	margin: 0px 0px 0px 0px;
}

.Guestbook_Entry {
	padding: 10px 10px 10px 10px;
}

.ErrorMessage {
	font-size: 10px;
	color: red;
	font-weight: bold;
}

That's all the file contains. You can do a lot more with them than I did, but that's entirely up to you. Have a look at the source of the guestbook pages to see which tags are used and then customize them however which way you'd like.

Next is the separator. All I used there was a simple image tag.

<img src="http://www.wildweasel.ca/images/redline.gif">

The default horizontal rule <hr> is a clue as to what is expected there. The guestbook will take care of separating it from the surrounding content.

The final field is the header. Here I used a link to an image on my home page for the title and a bit of text to announce that it's a guestbook. It is highly recommended that you provide a link here to give your users a convenient way to get back to your pages. Mine is the title graphic itself.

<a href="http://www.wildweasel.ca/">
<img src="http://www.wildweasel.ca/images/title.gif"
alt="Kevin's Home Page" border=0></a>
<p><h1>The Guest Book!</h1>

So there you have it. It's that easy to make an attractive guestbook without all the annoying advertising you get on the commercial sites. If you have any suggestions to make this service even better, feel free to email me.

If you want a little help setting up your book to look as cool as some of the other one's you may have seen, feel free to ask me. My ICQ# is 2706682 and I'm online far more than I like to admit. :)