Wood Light Manual (Template 002)

Template Image Slice Structure

  1. header graphic - header.jpg or header-blank.jpg
  2. left gradient shadow - top-left.jpg
  3. tiled top gradient shadow, repeat horizontally only - content.jpg
  4. right gradient shadow - top-right.jpg
  5. left tiled background - left.jpg
  6. right tiled background - right.jpg
  7. footer graphic - footer.jpg
  8. testimonial header bar - testop.jpg
  9. testimonial gradient background, no repeat - tesinside.jpg
  10. testimonial white background, repeat vertically - tes.bg
  11. testimonial footer - tesbottom.jpg

Template Table Structure

Styling The Header

With Photoshop

To make things easier for you, I create a PSD file just for the header. This way you don't have to mess with the whole design PSD file and can just focus on the header. Layers are labeled with Header, Header Text, and Lists.

When done editing, use File > Save for Web. A recommended setting for the header JPG file is 60% to 80% quality with 0.2 blur. This will give you a smaller file size.

You can name the file to anything you want, but be sure to update the HTML file so that it will appear correctly in the website.

Other Than Photoshop (Gimp, PaintShop Pro, etc)

If you don't have Photoshop, I have prepared a blank header (header-blank.jpg and header-bar.jpg) for you to edit in any graphic editing software. Just open up the file and add in your own text and caption. You can also add in photos and other objects. You would have to put in and style your own text, title and caption to the header graphic.

These files are not supposed to used without edting. It was created with maximum JPG quality and is quite big in file size. A recommended setting for the header JPG file is 60% to 80% quality with 0.2 blur. This will give you a smaller file

When you are done editing, save it as a JPG file with its original dimension, 700 pixels x 169 pixels. You can name the file to anything you want, but be sure to update the HTML file so that it will appear correctly in the website.

I have also prepared the bullet image with transparent background in 24-bit PNG format. You can use this and position it in any way you want in your header.

Working with CSS

The template is already designed with a formating Cascading Style Sheet (CSS) file. In case you don't know what CSS is, it allows you to preformat elements in your HTML document with specific font, size, color, background and position.

CSS also allows you to position elements to create layouts and element's positionings.

CSS formating is defined in the file xstyle.css.

Text Formats

With CSS, you don't have to use the <font> tag anymore. I have preformated the <h1>, <h2>, <h3>, <p> with its own size and color. Just use these tags normally. You still need to use the normal <b>, <i>, <u> for bold, italic and underlined.

Using the normal <b>, <i> and <u> instead of CSS formating is good for SEO. It shows emphasize on the key phrases you are using them on.

Yellow Highlight (Teaser Text)

The highlighted text used in the teaser text is done using the "highlight" class. In the source code, you will find <span class="highlight">YOUR TEXT</span>.

Any other time you need to highlight a text like that, you can use similar code.

<span class="highlight">YOUR TEXT</span>

Lists

I have created the list two images for your bulleted list. When you create a new list using the <ul> tag, all that you have to do is assign either class "nolist" or "yeslist". A sample code would <ul class="yeslist">.

The "yeslist" will create a list with the "tick" bullet image. The "nolist" will create a list with "cross" bullet image.

<ul class="nolist">
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
</ul>

<ul class="yeslist">
<li>Item #1</li>
<li>Item #2</li>
<li>Item #3</li>
</ul>

Content Area

The content area is where you put most of your content. Just a short note that it is tagged with the class "content". In the CSS, the "content" class has been assigned with a small gradient background image. This image only tiles and repeat itself horizontally, leaving the rest of the content area white.

Testimonial Box

The testimonial box is created with a table. It has one column and three rows.

<!-- START: TESTIMONIAL BOX -->
<table width="410" border="0" align="center" cellpadding="0" cellspacing="0" class="tes">
<tr>
<td height="32" class="testop">
<!-- TITLE GOES HERE, EXP: Name from Location -->Name from Location</td>
</tr>
<tr>
<td class="testinside">
<!-- START: TESTIMONIAL CONTENT -->
<p>Content Goes Here </p>
<!-- END: TESTIMONIAL CONTENT -->
</td>
</tr>
<tr>
<td><img src="images/tesbottom.jpg" width="410" height="15"></td>
</tr>
</table>
<!-- END: TESTIMONIAL BOX -->

The table is assigned with the class "test". Class "tes" is defined with the background image tes.bg. This makes the testimonial box expandable and will not break with longer content.

The first row is assigned with the class "testop". Class "testop" is defined with the background image testop.jpg.

The second row is assigned with the class "testinside". Class "testinside" is defined with the gradient background image testinside.jpg.

The third row has no CSS styling, however it contains the footer image for the testimonial box, tesbottom.jpg.

Customizing The Opt-In Box

This template includes an opt-in box. It's a nice and simple design.

The opt-in box is a DIV with the ID "opt".

<!-- START: OPT-IN BOX -->
<div id="optin">
... ... ...
</div>

Changing Content

On the right side of the opt-in box, there is a DIV area tagged with ID "opttext". Using the <h3> within that area will create the red title. Other tags will create the white content text.

<div id="opttext">
<!-- OPT-IN CALL TO ACTION -->
<h3>Subscribe Right Now!</h3>
<!-- OPT-IN OFFER DETAILS -->
<p>Details goes here...</p>
</div>

Integrating The Mailing List

Below is the code for the form in the opt-in box. It needs to be change in order to work with your mailing list or autoresponder.

<!-- START: OPT-IN FORM -->
<form method="post">
<input type="text" name="name" id="namex" ... >
<input type="text" name="email" id="emailx" ...>
<input type="image" name="submitx" id="submitx" ... >
</form>
<!-- END: OPT-IN FORM -->

As you can see there are three <input> tag, two text field and an image. What ever you do DO NOT change the value for the ID, i.e, id="emailx". The ID contains formating in the style sheet for position, sizing, etc.

When integrating with your own mailing list or autoresponder, you need to identify those exact tags. Most of them may be hidden input tags, i.e. <input type="hidden" ...>. Here's a common code from GetResponse.com. <input> tag has been highlighted...

Pay close attention where the field for Your Name is named category2, and the field for Your E-mail is labeled with category3. We will be using these values later.

<!-- GetResponse subscription form | start -->

<form action="http://www.getresponse.com/cgi-bin/add.cgi" method="post" id="GRSubscribeForm" accept-charset="UTF-8">
<fieldset>
<table>

<tr>
<td>
<label for="GRCategory2">Your Name</label>:
</td>
<td><input type="text" name="category2" size="14" id="GRCategory2" /></td>
</tr><tr>
<td><label for="GRCategory3">Your E-Mail</label>:</td>
<td><input type="text" name="category3" size="14" id="GRCategory3" /></td>
</tr>

</table>
<input type="submit" value="Get More Info!" />
<p>
Powered by <a href="http://www.getresponse.com" title="Email Marketing">GetResponse email marketing</a> software
</p>
</fieldset>
<input type="hidden" name="category1" value="autoresponderID" />
<input type="hidden" name="confirmation" value="http://www.yourwebsite.com/thankyou.html"/>
<input type="hidden" name="ref" value="000" />
<input type="hidden" name="getpostdata" value="get" />
</form>
<style>
<!--
/* form box */
#GRSubscribeForm fieldset {
width: 260px;
border: 0;
}

/* comment about GetResponse */
#GRSubscribeForm p {
font-size: x-small;
}

/* table used to position form elements */
#GRSubscribeForm table {
border: 0;
}

-->
</style>
<!-- GetResponse subscription form | end -->

As you can see, the code contains some formating tags like TABLE, TR, TD, etc. All those does not matter. What you want is just the skeleton form tags. Here's what you will get.

<form action="http://www.getresponse.com/cgi-bin/add.cgi" method="post">
<input type="text" name="category2" size="14" id="GRCategory2" />
<input type="text" name="category3" size="14" id="GRCategory3" />
<input type="submit" value="Get More Info!" />
<input type="hidden" name="category1" value="autoresponderID" />
<input type="hidden" name="confirmation" value="http://www.yourwebsite.com/thankyou.html"/>
<input type="hidden" name="ref" value="000" />
<input type="hidden" name="getpostdata" value="get" />
</form>

Now we need to fit this into the opt-in box's form.

Step 1: Move in the form's action value

<!-- START: OPT-IN FORM -->
<form method="post" action="http://www.getresponse.com/cgi-bin/add.cgi">
<input type="text" name="name" id="namex" ... >
<input type="text" name="email" id="emailx" ...>
<input type="image" name="submitx" id="submitx" ... >
</form>
<!-- END: OPT-IN FORM -->

Step 2: Move in all of the HIDDEN fields.

<!-- START: OPT-IN FORM -->
<form method="post" action="http://www.getresponse.com/cgi-bin/add.cgi">
<input type="text" name="name" id="namex" ... >
<input type="text" name="email" id="emailx" ...>
<input type="image" name="submitx" id="submitx" ... >
<input type="hidden" name="category1" value="autoresponderID" />
<input type="hidden" name="confirmation" value="http://www.yourwebsite.com/thankyou.html"/>
<input type="hidden" name="ref" value="000" />
<input type="hidden" name="getpostdata" value="get" />

</form>
<!-- END: OPT-IN FORM -->

Step 3: Rename Email and Name field with the right name

When you look back at the original GetResponse's code, the name field is labeled with "category2" and the email field is labeled with "category3".

<!-- START: OPT-IN FORM -->
<form method="post" action="http://www.getresponse.com/cgi-bin/add.cgi">
<input type="text" name="category2" id="namex" ... >
<input type="text" name="category3" id="emailx" ...>
<input type="image" name="submitx" id="submitx" ... >
<input type="hidden" name="category1" value="autoresponderID" />
<input type="hidden" name="confirmation" value="http://www.yourwebsite.com/thankyou.html"/>
<input type="hidden" name="ref" value="000" />
<input type="hidden" name="getpostdata" value="get" />
</form>
<!-- END: OPT-IN FORM -->

Step 4: Ignore everything else - DONE!

Yep, that is all. This includes the table, formating, extra style sheet. We have our own style sheet that will take care of the formating and positioning. If you are wondering, yes, we ignored the submit button. We already have an image input that will become submit button.

In case you are wondering how to integrate with any other autoresponder or mailing list, the process is the same. Follow this 4-step process carefully and you should have your opt-in box working.

Usage Rights

Though this website template is given away and distribute for free, a lot of work, attention and hours has been put into its creation. Therefore, please respect the terms below.

Free To Use But Do Not Own

You are free to use this website template in anyway you like (as outlined below) but you do not own this website template. The creator of this website template, Khairil Iszuddin Ismail, owns full rights to his work.

You Are Free To

You May NOT

Optional

If you use this template to build your website, please link back to MiniSiteGallery.com with the term "free mini site template". You can also use the code below:

<a href="http://www.minisitegallery.com">free mini-site templates</a>