Install Filezilla onto your Hard Drive

1. Once you are ready to install FileZilla Double Click the Filezilla program:


2. Click Next



3. Click Next



4. Click Next if you are happy with the installation location or, if you wish change it click browse and choose your new location



5. Click the Install button to start the installation process





6. Click Next




7. Click Finish.


You have now installed Filezilla onto your computer

Editing The HTML/CSS Templates


To edit the HTML/CSS Template you just downloaded you need to use a HTML editor.

For Windows I would recommend Notepad++ which you can download from here. If you use a mac I would recommend using Sublime text which you can download here.

Or, of course, you can use any editor that you prefer. Just do not use Microsoft Word as it can cause some problems.

Ok, once you have downloaded and installed your preferred editor open the file you wish to make changes to in it.



Here I have chosen to edit the homepage (index.php) of the thorn template.

Change the Title of the Page.

To change the title of the page, look for the line that contains: <?php $pagename =”Homepage”; ?> (Usually the first line).

Change the word Homepage to whatever you want the name of the page to be.

For this example I will change it to:

<?php $pagename =”Thorn Family History”; ?>


Please Note: Make sure you save the file after making any changes.

If you upload to your server and then refresh the browser (or open it up in a browser if it wasn’t previously open) you should see the browser title bar change from Homepage to whatever you renamed the page to. In the case of this example it changes to Thorn Family History .



Change the Text in the template.

To change the text which is currently in the template, scroll down until you see the text you wish to change


Replace the text with what you want.



Save the file and upload to your server. Once you refresh it you should see the changes:


Of course, you can add as much text or as little text as you like.

Changing the Images

To change the image, copy the new one into the images directory of the the template folder, making sure you know what the name of the file is.

Then find the line that looks like: <img src=”images/family-history-website-templates-mdunn.jpg”> and change the name of the image to the name of the image you just copied to the images folder in the previous step.


Save the file and upload to your server. Once you refresh it you should see the changes:

change-image-resultPlease Note: This process is the same for one image, or for multiple images.


Add Images to the Templates

Add Images and Pictures To the Templates

When you use these templates you may wish to add a image somewhere on the page.

To do this copy the following line and place it in the location you would wish it to appear on your page. Make sure you also copy the image or picture to the images directory of the template

Then change the src and the class-name to match your requirements:

<img src=”add the path to your image here” class=”add appropriate class-name here”>

for example:

<img src=”images/mypicture.jpg” class=”profile-pic”>

Styling and positioning the image.

To add extra css to the template you can use the custom-stylesheet.css file found in the css folder in the template directory..


Once open in your favorite text editor add the following:

To position left:

img.class-name {

float:   left;


To position right:

img.class-name {

float:  right;


To position center:

img.class-name {

display: block;
margin: 0 auto;



Once you have positioned your image you will most likely want to set the images size.

To do so you can use the width and height css properties.

You can set these properties in pixels (px) and percentage (%)

For example:

img.class-name {

float:   left;
width:  100px
height: 150px



For example:

img.class-name {

float:   left;
width:  75%;
height: 75%;


A good way to keep the proportion correct is t0 use the value auto with the the height property.

For example:

img.class-name {

float:   left;
width:  75%;
height: auto;


This will work whether you use the pixels or the percentage format

Please note: Ensure you change class-name to match the class-name you used in the template and that you save the custom-stylesheet.css file after every change.


Need further Assistance? Email me!

Speak with your Elderly Relatives

So how and where do I start my research?

It can almost seem like an impossible task when you first begin. However, nowadays, there is a plethora of sites and blogs that give advice in this area.

And you have arrived at one more!

Start by speaking to all the elderly relatives you can. These may be your parents, grand parents, aunts and uncles. You will probably find that they have an amazing amount of information that can get you on your way and most of the time they will be more than happy to part with it.

Here is a List of Interview Questions you may wish to use to get you started.

The more information your elderly relatives can provide for you, the better your starting point will be.

It is also advisable to do these interviews sooner rather than later as, no one knows just how much time we have on this earth and, once your relatives pass on, all the information they have is lost forever.