Editing The HTML/CSS Templates

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.

 

edit-templates-n++

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”; ?>

edit-templates-pagename-change

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 .

edit-templates-title-bar

 

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

change-text

Replace the text with what you want.

change-text-2

 

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

change-text-results

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.

change-image

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.