Put your side content in here. This is the perfect place for a vertical menu.

This is also a great place to drop in your vertical adsense ads.

"DIY" Customization

Nice Side Effect : Learning CSS

These templates were designed to be very easy to change. If you are interested in customizing these templates yourself, the elements that make up the structure and presentation of your website are listed below.

Where do I start?

Let's take a look at the CSS files.

The CSS files can be found in the "style" directory for each template. In this directory you will find 2 CSS files. One is titled "structure" and the other is titled "presentation".

structure.css

The structural formatting of your templates.

Structure.css is exactly as the name suggests. This CSS file formats all of the "structural" elements of your page. Structural elements are elements that make up the building blocks of your page i.e. a "Footer" element. The structure elements that you will see in these templates, depending on which template you are customizing, are as follows:

  • outer -
    This element acts as a container to make sure that your page lines up and renders correctly. Think of this as a picture frame containing your page.
  • inner -
    This element acts as another container for the more complex templates to make sure that your page lines up and renders correctly. Think of this as the matte within the frame containing your page. This element is not included in all templates.
  • content -
    This element acts as a container element for your actual content area.
  • main -
    This element is where your actual text content will go.
  • side -
    In the Double Column Templates, this element will hold any and all content that you want to put to the left hand side of your main text content. This is a great place for Adsense™ ads, a menu or anything else that you would like to display. When you want to change the background color of this element, make sure that you make it the same background color as the inner element.
  • header -
    This is your graphic header.
  • footer -
    This is your footer. This is perfect for copyright info, site links or anything else that you would like to use to close your sales letter.

Each of the above elements is commented to help you determine what the element does and how you can customize it.

presentation.css

The presentation of your page

Presentation.css is where you will find all of your presentation formatting, i.e. link colors, h1 colors and size, h2 and more. This is the file that you fill probably work with the most. If you are happy with the structure of your page then it's time to open up the presentation.css file.

The presentation elements that you will see in the presentation.css files are as follows:

  • body -
    This element is a standard HTML element. In presentation.css, you will use the body element to make changes to the background behind your page. For example, if you would like the background behind your page, you could make a change like the following:

    Current Background Color: - "background: #369; /* Body Background */"
    to
    New Background Color: - "background: red; /* Body Background */"

  • h1 -
    This is another standard HTML element and most Internet Marketers are familiar with their importance. If you're not, H1 tags are good for giving your keywords importance and weight.
  • h2 -
    The above applies to these tags as well.
  • h3 -
    And again to these.
  • a -
    This is a standard link element. Links have the following selectors in CSS:

    link - Standard appearance of a link that has not been visited or hovered over.

    visited - Appearance of a link that has been visited.

    hover - Appearance of a link that is being hovered over.
  • #footer a -
    All that applies to the standard links, apply to the a.footer link. This link is different however, because it is formatted for the Footer element. Any link placed in the footer will have this formatting applied.
  • a.price -
    This applies formatting to any link that displays the price.
  • p -
    This is a standard paragraph element. Formatting applied to this element will change the appearance of every paragraph on your page.
  • highlight -
    This is the formatting used for any "highlight" paragraph or div element that you would like to add to your page. To apply the formatting to a paragraph, simply add the following 'class="highlight"' to your paragraph tag.
  • order -
    This is the formatting used for any "order" paragraph or div element that you would like to add to your page. To apply the formatting to a paragraph, simply add the following 'order="highlight"' to your paragraph tag.

If you need help deciding which colors to use, or if you need help with the Hex Codes for the color(s) that you want to use, visit: http://cloford.com/resources/colours/500col.htm

Custom Design

Have this template customized for you.

I use these templates in my everyday work. I can customize this template to feature your own product/service for only $47. If you would like to customize this template, please contact me at: WSO@detooth.com

This is a sample button only. You can also use this to contact me about customizing this template for $47.

Note about Davey Montooth:
I have been a Web Designer for the past 6 years and have developed 200+ websites for various companies. I offer full graphic, logo and web design services as well as Website analysis and re-design services.

I am also a Programmer and Web Developer with extensive experience developing in ASP, PHP, ASP.NET and more. If you would like to contact me for any custom work, please contact me personally at dmontooth@detooth.com