Our Family Template Blue

Masthead

The site name is a transparent image created with Photograph of a good looking man.The Logo Creator. You may use any image editor to create the same type image. The font used to create the Our Family Logo is Vivaldi in color #183D4A . The logo is inserted into the html code.

Background Image: Autumn from Eos Developers

The photo used with the masthead is 352 pixels wide x 204 pixels high. It is a sample only.  The masthead photo is the background of the banner div.

Menus

The top navigation menu is from CSS MenuMaker. Be careful adding items to the menu that you do not break it.

The left sidebar menu is from a SitePoint article Nifty Navigation Tricks Using CSS with an extra list level added. It is meant to be used where each list level is a hyperlink.

CSS

All styling for the presentation of the content is within an external style sheet. Changes in colors, font families and sizes should be made within the style sheet and NOT added as part of the html code.

Lists

The bullets used as part of the content unordered lists are added via the style sheet rules. You can change to a different image of your choice but may have to adjust the margins and padding.

This is how a list will look:

  • Main item
  • Main Item
  • Main Item
    • Sub Item
    • Sub Item

Images

Photograph of a woman.The images used on this page are examples only. All images should be resized within an graphics program and NOT by changing the size from within the html code. A class has been applied to the image to float it left or right. The top image has a drop shadow applied by adding it with your graphics program while the bottom image does not. Both images have a 1 pixel black border applied using a graphics program.

General Information

The masthead, top or left navigation as well as the footer can be easily converted to SSI's by following the server side include tutorial OR to a FrontPage or Expression Web include. Likewise, the template can also be converted to a dynamic web template by following the Expression Web Design Time Includes tutorial.

This template does NOT require any special web editor to use it. It should work with any of them - even a plain text editor. The template uses a XHTML Transitional doctype which requires tags be self closing  <br />or opened and closed <p></p>. Remember, if you are located in another country to change the language statement. Both the style sheet and XHTML code validate.

You are welcome to use the template for any of your projects, however, the link back to my site MUST remain. ENJOY!