Sectional Navigation

Article Heading

You can use the sidebar for additional information. If you choose to change the information from page to pages, then you will need to make this an editable region.

More text can be added in this sidebar area. You can include images but you will need to limit the size to no more than 180px at the most. You can add links or special sale information.. Contact Us >


Connect with us on:
Connect with us on Facebook. Connect with us on Twitter.

RootsWeb WorldConnect Database.

Roots and Branches Template

Download Nightlights Site Template Package.  Instructions for using Template Packages.

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 and passes Google's Mobile Friendly test.

Screenshot of Roots and Branches Template.
Screenshot of Mobile display for Roots and Branches template.

Package Includes

This template package includes:

  • A complete DWT Site Template package which requires FrontPagehttp://freepages.genealogy.rootsweb.ancestry.com/~gearyfamily/images/instructions-button-sm.jpgplate.html">blank template that can be used with any web editor. This particular templates shows an example of using a graphic image as the site name.
  • A blank template which uses server side includes for the top menu, left menu and footer and can be used by any web editor.

Images

The background image as well as the header background image for this site is  Autumn from Eos Development. It is available in a number of different colors. You will need to retain the credits link if you choose to use any of their images.

The tree images are from Icons etc. The bullet icons are one of the tree images resized much smaller.

The transparent graphic image used for the site name was created using The Logo Creator. You can create your own image to use BUT it must be inserted into the HTML code and apply the class scalable in order to have it resize to display in mobile devices.

Classes are included as part of the style sheet to float your images right or left or center them on the page. There is also a class you can use to scale your images when displayed on mobile devices.

Top Menu

The top menu uses one of the responsive menus for CSS Menu Maker. This one allows only one level but their are others available that allow up to two sub menus if needed.

Fonts

This templates makes use of one of the Google web fonts, Federo. Read more about Google web fonts.

Changing the Column Background Color

A background image is used to create the equal height column look. If you wish to change the color of the columns, you will need to create a new image.

Server Side Includes

This template package includes a template which uses server side includes for both the top and left menu as well as the page footer. You can edit the ssi files, publish the edited file and the change will show on all pages.

If you are NOT familiar with working with SSI pages, please see:

Search Box/Page

The Google Custom search box will need to be adjusted with the code for YOUR custom search.  You can, of course, use any search engine you choose. The styling for the search areas is part of the external style sheet.

Additional Resources

You can find detailed instructions for working with the mobile friendly site templates as well as a pdf file you can download and print.

Also resources on both drop shadows and rounded corners.

Validation

The XHTML code validates. Because the external style sheet uses some CSS3, it does not validate. However the CSS3 style rules used degrade gracefully in older browsers and you will see rectangular corners rather than the rounded corners the more modern browsers display.