CSS Based Layout Templates

What is a CSS based layout? Rather than using a table to layout the elements on your page, a template with CSS-based layout uses a Cascading Style Sheet to place the various elements. The "look" for the site - colors, fonts, graphic images that are part of the layout - are called from the cascading style sheet.

Official web standards recommend the use of CSS to achieve layout rather than the use of tables. Tables are still used for presenting data.

This is the start of a project to offer a series of CSS based layout templates to the RootsWeb Community. They are posted on the RootsWeb server so that you can see how your site might look with the RW banners in place. the template packages are housed on the Genealogy Web Creations or Expression Web Tutorials server space as RootsWeb does not allow zipped files and the templates and all supporting files. folders, and images are packaged in a zipped file.

The thumbnail of the template will take you to a full page using that template. You can then download the template package to your computer. Complete instructions for working with the templates is also available.

Each of these template packages includes two templates, one that uses server side includes for the top and side menus and the footer. Since the majority of people will NOT be able to view the server side includes on their own computer, the other template contains all regions as part of the main template. Both the template and style sheet validate. The template and the style sheet have been heavily commented to help you in the learning process.

IMPORTANT NOTE: You will need to have a basic understanding of writing both HTML code and cascading Style Sheets to successfully work with these packages.

Christmas Nutcracker Template

The Christmas Nutcracker Template is is based on one of the newest templates offered on our sister site - Expression Web Mobile Friendly Site Templates. This template uses some CSS3 for the rounded corners. The rounded corners will display as intended in newer modern browsers. They will degrade gracefully in older browsers and default to rectangular corners. This template uses a fluid width layout with a maximum width specified and is mobile friendly. The template package includes a dwt package as well as a blank template and a template that makes use of server side includes. Use the one that works best for your site. Added
DECEMBER 2013.

Roots and Branches Template

The Roots and Branches Template is is based on one of the newest templates offered on our sister site - Expression Web Mobile Friendly Site Templates. This template uses some CSS3 for the rounded corners. The rounded corners will display as intended in newer modern browsers. They will degrade gracefully in older browsers and default to rectangular corners. This template uses a fixed width layout and is mobile friendly. The template package includes a dwt package as well as a blank template and a template that makes use of server side includes. Use the one that works best for your site.
Updated July 2015.

Baubles Template

The Baubles Site Template package is a liquid layout with a triple layered background. The package includes three separate templates - a DWT, a blank template, and a blank template that uses ssi's.

Download the Baubles Template package. The packages includes three templates and all supporting files/images. There is a template for any web editor including one that uses server side includes. Added February 2011.