| Home | Blog | Contact | Genealogy |

CSS Info

In order to successfully edit your template, it is important to understand that the template consists of only 6 simple areas. Rather than use a table <table> with the customary rows <tr> and columns <td>, we divide the page by using Divisions <DIV>. Each DIV’s appearance and position is controlled through the external style.css file.

It sometimes helps to think of a css file as a type of dictionary. You define the terms such as body, paragraph, headings, links, etc. so that your browser will know how to interpret them on the screen.

The Wrapper:

Rather than use a table to hold our text and images, we have used an ID called “wrapper”. This is set to a fixed width of 750 pixels. This forms the shell or containment “box” in which all of the other page elements are placed. We recommend that you not edit any of these parameters.


Hot Topic Boxes:

Special “hot topic” boxes like this one have been a popular template feature for the past few years. A viewer’s eye is automatically drawn to these areas, so it is a good place to put special items or interest. In order to duplicate this look, we have a special DIV (.pullquote) in place. You can delete this DIV if you do not need it and you can also copy and paste it to other pages. Once copied, just delete the text and type in your own.

The Header:

The header is a class (.headercontent) and consists of a the "logosample.jpg" image which is on an include page called logo.htm. See the template details page for instructions on how to change the "Your Name Here."

The Top Navigation Bar:

The global links in the top navigation bar are found on an include page called "global.htm". This page is inserted into the navigation area which is defined by the class "topnav".

The Sidebar:

The sidebar area is a class (.sidebar) which contains your main navigation links. Rather than use the standard FrontPage navigation, we placed our navigation links on a page called mainnav.htm found within the include folder. The links were typed by hand and hyperlinked to the appropriate pages.

Below the link bar there is generally room for small items of text. Please note that this sidebar area is designed to be shorter in length than the main content area. If your sidebar is quite long, the dotted lines to the right of the sidebar will stop at the bottom of the main text content.

It is also important to note that if you insert an image or any item which is wider than 160 pixels, the sidebar area will expand to hold that item, but will then drop down below the content. To ensure that both halves of the page line up correctly, please be careful to limit the size of any images which you may add to this sidebar area.

The Main Text Area:

Most of your page editing will concern the main content area class (.content) which sits to the left of the sidebar. The placement and size of this area is set within the css class.

This container has a 1 pixel wide dashed line that extends down the right side. It is a visual separator between the sidebar and content areas. Your content area will normally be longer than the text contained in the sidebar area. This was the dashed line will appear to extend from below the header down to the footer area.

Please note that the total width of the content area is essentially 559 pixels (plus a 1 pixel border and 20 pixels for the left and right padding). If you place a large image or other item that exceeds this width, the content area will no longer fit and will drop down below the sidebar. To prevent problems, keep in mind the total width of any elements you add to your page.

The Footer:

The footer elements sit at the bottom of the container. The links in this footer area are contained on an “Include Page” which you will find in a folder called “includes”. Inside of this folder is a page called footer.htm. The links are typed by hand and do not use the FrontPage standard navigation. If you wish to use the “web-bot” link bar, you can delete our text and replace it with your own navigation.

Working With Images:

We have given you a way to easily add your own pictures and give them a double lined border plus sit on either the left or right of the page.

Aligning a bordered image to the left: Once your image has been inserted on the page, right-click on the image and select Picture Properties from the menu. In the dialog box that appears, click on the Style button. In this new dialog box, enter the name “imageleft” - without the quotes - into the area next to class. Click OK to close the dialog boxes. Your image will now have the double border and be positioned on the left side of the page.

Aligning a bordered image to the right: Once your image has been inserted on the page, right-click on the image and select Picture Properties from the menu. In the dialog box that appears, click on the Style button. In this new dialog box, enter the name “imageright” - without the quotes - into the area next to class. Click OK to close the dialog boxes. Your image will now have the double border and be positioned on the right side of the page.

No alignment: In some cases you may wish for your image to be centered. Position your image, right-click on the image and select Picture Properties from the menu. In the dialog box that appears, click on the Style button. In this new dialog box, enter the name “imageplain” - without the quotes - into the area next to class. Click OK to close the dialog boxes. Your image will now have the double border but be centered on the page.