Template Instructions
Can I change the template colors? You can easily modify font colors (links, headings, and text) by editing the included CSS file. Some other elements may be easily modified as well. I
How do I add my site name? Changing the Template Name, along with adding your own slogan, is easily done by typing in your name in the dwt or on the page in our generic html5 template.
Can I change the images used in the template? Yes, please your own images, unless you just want to use my family's pictures!
main images size: 300px x 300px
The copyright for this web template and accompanying design remains with the designer, Genealogy Web Templates . You may not claim ownership of the design nor may you use it for any purpose other than that explicitly set forth in the separate license agreement.
Expression Web: This template was designed specifically for Expression Web. Since the template is made for html5 and CSS3, FrontPage does not display it correctly.
Dreamweaver: You can choose the Expression Web template if you need a DWT. If not, choose the Generic template.
Generic: This template is made for almost any html web editor.
1. When you name your pages, make all of the letters lower case and use NO spaces between words. For example - gettingstarted.html
2. Do NOT copy any text from Word, etc. directly into your web. Paste the text into notepad to remove all formatting. If you copy directly into your web, you may get lots of formatting code you don't need.
3. Make use of the Heading Tags. This template has 6 heading tags and quite a few classes that you can add to give interest to your website. Check our "Typography" page for samples of things used in this template/theme.
This template uses a CSS-based layout, which means that the page sections (header, sidebar, content, and footer) are positioned using CSS rather than within a table-based grid. Because this results in cleaner code, your pages load faster and search engines may rank your page better than they would in a table-based design.
If you have the style available in the dropdown style menu in the text editing box, then choose the style you need.
1. Add your text
2. Place the cursor at the beginning of the text and choose from the dropdown style box
for the classes available: Home, Call, Email, Hours or Comment
Home
Call
Comment
3. Once you choose your style, it will automatically show up! Easy stuff!
To help get your site listed in search engines and directories, we have added blank meta tags for keywords and description to each page. You will want to either delete these tags or add your own specific content. DO NOT leave our default content in these tags.
Here are a few tips on naming your photos/images.
1. Use all lower case in your photo / image name.
2. Use "Insert > Picture > From .... Do not drag your images into your web.
3. Use an image program to size your images. Do not grab the corner of the image and pull in to make the image smaller. It may seem like a small image to you, but your viewer's browser must load the entire huge picture!
By using Google fonts, you now have access to a wide variety of custom fonts. This offers quite a bit of of flexibility for getting exactly the look you want, whether fancy or all business. These fonts can easily be added to your site in under a minute. NOTE: You will not see the Google font when in design view. It will be seen when you preview the site in your browser. Learn more about Google fonts.
You will see similar code to this in the "head" area of your page:
<link href='http://fonts.googleapis.com/css?family=Muli|Philosopher'
rel='stylesheet' type='text/css'> (I'm using two Google fonts, so you will see both of them listed... Muli and
another font.)
In the css file, you will see something like this:
h1 {
font: 2.3em 'Philosopher', Verdana, Helvetica, sans-serif;
color: #3d3d45;
margin: .3em 0 .3em 0;
letter-spacing: 1px;
}
This controls the size, color, margin
and spacing of the Philosopher Google font. If you don't want to use Philosopher, just go to Google fonts, pick
out one you like and replace the name in the "head" of each page and in the css file.
For our HTML templates, this template package comes with the starter web site in .zip format. Unzip the package and start editing the pages. You may wish to keep a backup copy of the .zip in case you need to start over. We have included a basic site structure with common pages to help you get started. You may rename the pages, add more pages, and add your content.
Dynamic Web Template pages can be found within the Templates folder of your web and are easily identified by the .dwt extension. They contain the basic page structure for all of your web (.html) pages. You will find a .dwt for each different page layout included in your template package. If you change a .dwt page, all of the web pages based on that .dwt will also change. Dynamic Web Templates have both “editable” and “non-editable” regions. Editable Regions can change from page to page such as your page content. You open the web (.htm) page and make changes inside of the editable regions. Non-editable Regions are areas defined by the .dwt and cannot be changed on your .html pages. To change non-editable regions, you have to open the .dwt file. Changing non-editable regions will change every web page in your site that is based on that .dwt page.
This template package allows you to delete the pages you do not need and to rename existing pages if necessary. To edit the existing .html pages, just delete our sample content. You can then type your own text and add any additional photos. Note that you will not be able to edit any “non-editable” regions on these pages. Remember to change the page title when you make a new page or rename a page.
Important: If you delete all content from an editable region, it may disappear and be difficult to find. Switch to Code or Split view and look for the following:
<!-- #BeginEditable “content” --><!-- #EndEditable -->
Type some placeholder text between the two tags as follows:
<!-- #BeginEditable “content” --><p>Content
here</p><!-- #EndEditable -->
Switch back to Design view and you will now see the editable region and can
add content to that area. Make sure you type in the
paragraph tags <p></p>
Expression Web: To create a new, blank page based on a .dwt page layout, go to File > New > Create From Dynamic Web Template. In the dialog box that appears, select the appropriate .dwt page (if you template offers more than one page layout). When your new page is created, save the page giving it a unique name and page title. You can then add content to the editable regions.
Dreamweaver: To create a new, blank page based on a .dwt page layout, select "File > New > HTML." Go to "Modify > Templates > Apply template to page> Then choose the type of page you wish to create."
When looking at your pages while in Design view, some elements may not appear correctly. Fonts may seem too large or small; spacing between elements may seem too wide, etc. While this can be a bit disconcerting, you will find it easy to keep previewing your site in a browser as you make changes. This will display your page correctly. To preview your pages, save the page after each change and then go to File > Preview in Browser.
Occasionally while editing your pages, you may “lose” the formatting. When this happens, save the page and then hit F5 to refresh your page. The page should snap back into position and the styles will return.
Your template contains a JavaScript Lightbox script. You can use the Lightbox feature on any photo in your
site; it is not limited to only the product or gallery pages. The Lightbox JavaScript consists of several files.
We recommend that you do not move or edit any of these files.
The Lightbox allows you to click on a small
photo and have a larger image appear in a semi-transparent overlay that will appear on top of the page. The
script will automatically size itself, so your images can be varying sizes. On mobile devices, the Lightbox
resizes the images to fit the screen.
First insert your small photo onto the page. Create a hyperlink to
the larger photo. Create a hyperlink to the larger photo. Switch to code view and add class="lightbox" which
activates the JavaScript. If you wish to have a title appear, add the title attribute as shown in the example.
<a href="images/gallery/neworleans4.jpg" class="lightbox" title="Photo 1 -
Description Goes Here"> <img alt="" src="images/gallery/neworleans4small.jpg"></a>
To click through a
group of images, add a group name: data-lightbox-gallery="groupname". The
"Previous" and "Next" buttons will now automatically appear.
<a href="images/gallery/neworleans4.jpg"
class="lightbox" data-lightbox-gallery="gallery1" title="Photo 1 - Description
Goes Here">
<img alt="" src="images/gallery/neworleans4small.jpg"></a>
[Credit for this application:
http://dev7studios.com/plugins/nivo-lightbox/.]
If you have questions, contributions, or problems with this site, email:
Coordinator - Your Name Here
State Coordinator: Your State Coordinator
Asst. State Coordinators: Your AssistantState Coordinators
If you have questions or problems with this site, email the County Coordinator. Please to not ask for specfic research on your family. I am unable to do your personal research. I do not live in Indiana and do not have access to additional records.
