My Dolls

Home

You may use this template for your doll website. This layout uses semantic XHTML, hack-free CSS, and four small images. This site does NOT use frames but instead uses SSI (simple server side include files written in XHTML) which is superior by far to frames. (Layout version Teal 1.0 created by Lithriel and found at www.silindor.com).

This template is in the public domain and is intended for dolling websites. You may edit this template, copy it's code, and modify it to your hearts content provided that you leave the link in the footer to silindor.com intact. The only exception to this rule is the base image (doll.gif)- you must not leave the base "as is". You MUST either doll on the base, replace the base with a doll of your own choice, OR remove the base entirely to keep from redistributing my base.

To use this template you must have knowledge of XHTML, CSS, and skills with imaging software. To benefit fully from the site, you're host needs to be able to support SSI (server-side includes).

How to Install/Use

Download the zip file, teal.zip, and unzip onto your computer
Replace the text between each <title> tags in the shtml files with the desired page title
To customize your banner title, use a imaging program to open title.gif (located in the images folder) and edit the file. The font used was Guttenburg MF found at dafont.com. (Size 48, color #f7fcfc, with a 2px stroke of #74a397, and a background color of #b1d6ba saved as transparent)
To add/edit links to the side navigation bar, open the navigation.inc file (located in the common folder) and edit in notepad or some other website editing software, save and upload to your server.
To edit the footer, open the footer.inc file (located in the common folder), edit in notepad and upload to your server. Be sure to maintian the .inc extension.
To create pages, copy the code from the index.shtml file, edit the file, and save under a new name with the .shtml extension (You must save your page with the shtml extension or the navigation and footer won't work.)
Use an FTP program (like smartFTP) to upload the website to your host (keep the structure intact. Please realize you must upload the website before the navigation and footer will appear due to the server-side includes. In other words, the navigation and footer areas will not show up if you view the website offline.)

The Files

teal.zip (contains everything- 18.5KB)
index.shtml (the file you're looking at)
style.css (located in the CSS folder)
font.css (a special css file for IE, located in the CSS folder)
navigation.inc (an include file located in the common folder)
footer.inc (an include file located in the common folder)

The Images

The main layout you see here uses 4 images, the repeating background image, the title image, the list bullet image, and the layout doll base image (which is meant to be dolled upon). Feel free to add images. Please doll on the base I have provided. To edit the postion of the doll, edit the code for the #doll div in the style.css file.

How the Server-Side Includes work

To learn about SSI, there's a brief introduction at georgedillon.com. Also try googling server-side includes BEFORE you ask me any questions. Basically, they are an incredibly simple way to update your entire site navigation and footer with one file and MUCH move efficient than frames.

But for a really basic rundown on how they work specifically in this template I have decided to include some examples.

The navigation and footer sections of this site are written in plain old simple XHTML, just saved with the extension .inc (which stands for include file). Here's what the navigation.inc file looks like:

<div id="navigation">
<h2>Navigation</h2>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Dolls</a></li>
<li><a href="#">Bases</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Contests</a></li>
<li><a href="#">Links</a></li>
<li><a href="#">About</a></li>
</ul>
</div>

See? It's not so strange looking if you know how to code. Add the following line to any page in which you want to include the navigation just below the title div:

The footer is very similar. For any page in which you wish to add the footer, add the following line just below the scroll div:

Now you can update your navigation and footer in a snap! Just edit one file and your entire website updates! And it's all in XHTML! Pretty nifty huh? The only draw back is that you need to save your webpages with the .shtml extension which alerts the server that the pages need to be parsed.

I suggest that you use more SSI in your website for subnavigation menus. For instance, when you click on "dolls", I would want to see a subnavigation menu at the the top of this page which looked something like this: Original : HP Inspired : Historical : Fantasy : Adopted

Here's the code for the sub menu above:

<p>
<a href="#">Original</a> :
<a href="#">HP Inspired</a> :
<a href="#">Historical</a> :
<a href="#">Fantasy</a> :
<a href="#">Adopted</a>
</p>

Copy and past the code above into a blank file and save the file as dolls.inc inside the common folder. Then on every page, original.shtml, hp.shtml, historical.shtml, etc. paste the following line just above the scroll div:

Keep in mind your paths at all times. If you want absolute paths chang the code to , Adding virtual means you are linkind directly to a file (no relative paths), and putting a slash before the common folder adds your domain name before the path. (Ex: "/common/dolls.inc" is equivalent for me to "http://silindor.com/common/dolls.inc")

Suggestions

If you visit silindor.com you'll come across some of these nice features. They are definitely worth a look if you want to spruce up your doll website:

fleXcroll (Offers a colorful scrollbar which can be customized to look like your site that even works in Firefox!)
Fancy Tooltips (A great way to add more descriptions to your dolls without pesky differences in browser treatment between alt and title tags)
Favicons (Displays a little icon next to your website when someone favorites your site- also shows in the browser address bar)

And last but not least- enjoy this template! The sky is the limit. You can change the look completely if you wish.