HTML/CSS

 

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:

Please Note: This process is the same for one image, or for multiple images.

 

Installing the HTML/CSS Templates

To install one of the HTML/CSS Templates available on this site:

• Download the Template of your choice to your Hard Drive
• Unzip the Downloaded file
• Edit the files as you require
• Using the FTP program of your choice (Or the File Manager App that comes with most Website Hosting Packages) upload the unzipped files to your website Host.

Need further Assistance? Email me!

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..

Positioning

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;

}

Sizing

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

}

or

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!