One of the advanced capabilities of Retrospect-GDS is the ability to create templates. This template feature allows you to alter the “look and feel” of the Retrospect-GDS installation without having to alter the underlying php code. While creating a new template requires some knowledge of html, templates are a very useful tool should you wish your installation of Retrospect-GDS to match your site.

Template creation involves three main components: New installation of a base template folder; modification of the CSS Style Sheet; and modification of the HTML Templates.

For demonstration purposes we are going to create a new template called winterstorm. You can use the methods described to create any template you like.

I. New Template Folder

Rather than modify the existing template summerbreeeze, create a new template based on a copy of summerbreeze. This way if the new template you are creating becomes hopelessly broken, you can easily revert back to the working copy of summerbreeze.
To create a new template folder the first step is to make a copy of the existing Seabreeze template folder.
1. On the computer that holds the original download of the unzipped Retrospect-GDS, find the summerbreeze template folder. This should be:

retrospect\themes\summerbreeze

Make a copy of this entire folder and rename it winterstorm. Remember, your webserver may be case sensitive and Winterstorm may be different to winterstorm

2. Upload the winterstorm folder you created to the themes directory of your installation of Retrospect-GDS. For example, if your domain name is mysite.com and you installed the files into the retrospect directory you would upoad the winterstorm folder to:

http://www.mysite.com/retrospect/themes/

You should now have winterstorm and summerbreeze folders in the themes directory.

3. The final step is to activate the Template so that Retrospect-GDS is aware that you want to use winterstorm. To do this, on your installation of Retrospect-GDS open config.php with you favorite editor. Again, if your domain name is mysite.com and you installed the files into the retrospect directory your config.php file should be found:

http://www.mysite.com/retrospect/core/

Find this section in the config.php file:

# Theme
$g_theme = ’summerbreeze’;

and change the word summerbreeze to winterstorm. The section should now look like this:

# Theme
$g_theme = ‘winterstorm’;

Save the changes and you are done!

Note: if you need to return to the summerbreeze template, you only need to reverse step three and replace winterstorm with summerbreeze again

II The winterstorm CSS Stylesheet

Fonts
To change the fonts in the template, open up style.css in the winterstorm template folder using your favourite editor. In our example site example, if your domain name is mysite.com and you installed the files into the retrospect directory you would go to:

http://www.mysite.com/retrospect/themes/winterstorm/style.css

At the top of this file you will find the following section:

body, .text, select, input, textarea {
font: 12px “Lucida Grande”, “Trebuchet MS”, Verdana, Arial, sans-serif;
}

Change the “Lucida Grande”, “Trebuchet MS”, Verdana, Arial, sans-serif to the fonts that match your site. Make sure to enclose font names in quotes when the font name includes spaces, and remember that the ability to use a font is based on the fonts installed on the visitors computer NOT your computer. This means that while the “Harry Potter” font may look cool on your computer, it may not be available on your visitors computer. That is why your last font option needs to be either serif or sans-serif. That way the fonts on your site will still work.
For our winterstorm template, we are going to change the above section to:

body, .text, select, input, textarea {
font: 12px “Trebuchet MS”, Verdana, Arial, sans-serif;
}

Save the file and look to see if you notice any differences!

Colors
One of the easiest ways to modify the look and feel of Retrospect-GDS is to change the colors to conform to your website. One of the easiest ways to do that is to use the find and replace option on your favourite editor and change the hex code found in the style sheet to the colors found on your website. Below is a listing of the colors used in the summerbreeze template, where they are in the style sheet and what they do. As an exercise we will change these summerbreeze colors to match the new winterstorm template.

A tool that can be used to help with modifying css is called Web Developer and can be found at http://chrispederick.com/work/webdeveloper/ this is a toolbar that installs in your browser and can be used to identify not only the colors on a website but also what CSS sections apply to a particular portion of a website. This is an incredibly useful tool and is free!

Colors used in Summerbreeze:

#000000 = Black

#2157d1 = Medium Blue
Background behind/around header section

#316ac5 = Lt. Blue

#555555 (or #555) = Charcoal
Color of font on “selected” tab

#666666 (or #666) = Lt. Charcoal
Border color around input textbox

#60752d = Dark Green
left and bottom Border of Home, Search, Surname List, Statistic buttons to help them look 3d

#758b3e = Med. Green
Fonts, background color of Home, Search, Surname List, Statistic buttons

#777777 (or #777) = Grey
Color of Symbols and Legend

#93ac5c = Lt. Green
Border around Home, Search, Surname List, Statistic buttons to help them look 3d

#cc6600 (or #c60) = Orange
Hover color, H1 fonts, H2 fonts, Input textbox font color,

#cccccc (or #ccc) = Lt. Grey #1
Border color various boxes

#d0d0d0 = Lt. Grey #2
Border along bottom under menu items

#eeeeee (or #eee)= lt. Grey #3
background color on Search page sections

#ece9d8 = Off White

#f9f9f9 = Near White
background color of tabs section

#ffffff (or #fff)= White
Backgound of various sections

Just a note, while the hex values above are accurate the color names are estimated, your opinion may differ! To change the Stylesheet colors to match the colors on your site. Identify the color you want to use to replace the given color above and simply do a find and replace in your text editor to change the color on the stylesheet to the color on your website. It is best to proceed slowly with this however. Do ONE color at a time, save the style sheet and then check the Retrospect-GDS installation to make sure you are changing the areas and colors you think you are changing. You can always start over by copying the style.css file from the summerbreeze folder back into the winterstorm folder, but remember, ALL the the changes you made to the winterstorm style sheet will be lost!

summerbreeze colors to winterstorm colors:

#000000 = Black -> No Change

#2157d1 = Medium Blue -> No Change

#316ac5 = Lt. Blue -> No Change

#555555 = Charcoal -> No Change

#666666 = Lt. Charcoal -> No Change

#60752d = Dark Green -> #660000

#758b3e = Med. Green -> #963c05

#777777 = Grey -> No Change

#93ac5c = Lt. Green -> #a94801

#cc6600 = Orange -> #990000

#cccccc = Lt. Grey #1 -> No Change

#d0d0d0 = Lt. Grey #2 -> No Change

#eeeeee = lt. Grey #3 -> No Change

#ece9d8 = Off White -> No Change

#f9f9f9 = Near White -> No Change

#ffffff = White -> No Change

As you can see, you only need to change a few colors to make a dramatic difference.

Images
For our winterstom template we will not change any of the images. However if you are trying to blend Retrospect-GDS into your existing site you will almost certainly want to modify some of the images.

To change the header image to one of your own choosing you will need to create a replacement image. The existing Retrospect-GDS image is 504px wide and 60px tall. Making your new image wider should not affect Retrospect-GDS, but the height needs to remain 60px. This is because of the way in which the pedigree pages are generated. (There is a workaround for this, which is described in the templates section).

The easiest way to change the header image is to create your new image as a .png and call it logo. you would then upload this file. In our example site, if your domain name is mysite.com and you installed the files into the retrospect directory you would upload your .png to:

http://www.mysite.com/retrospect/themes/winterstorm/images/

If you do not or cannot rename the image you want as your logo (for example if it is a .gif rather than a .png) then simply go to the style sheet and look for this section:

#header #logo {
height: 70px;
background: url(”images/logo.png”) no-repeat left bottom;
}

and change the logo.png to the name of your image.

The other images you may want to look at changing are background.gif which makes the faint grey lines, and paint.png which adds blue to the header area.

The remaining images in the style.css file are used to create tabs and pedigree boxes and should not be changed until you are really familiar with the style sheet and how you may be altering it.

Some tips
Tip #1 the green Home, Search, Surname List, Statistic buttons are actually built in the style sheet. What this means is that they are easy to manipulate! for example if you do not want them to be buttons but rather just text, then go to this section in the style sheet:

#menu a {
background: #758B3E;
color: #fff;
padding: 1px 6px;
font-weight: normal;
border: 1px solid #93AC5C;
border-bottom-color: #60752D;
border-left-color: #60752D
}

change the background color to match the color of your background, and change the font color, if needed, to a color that will stand out from your background (the existing color is white), and the buttons are gone! The section for winterstorm will now look like:

#menu a {
background: none;
color: #963c05;
padding: 1px 6px;
font-weight: strong;
border: 0px solid #a94801;
border-bottom-color: none;
border-left-color: none
}

III. Modifying the HTML Templates

In development