Create Legacy Webpages (3)

Create

Changing the windows' colours

When I started using Legacy to create pedigree web pages one of the first questions I asked was "How do you change the colours of the windows in the pedigree web pages?" The answer was that one cannot - now there was a challenge! So here's how to do it.

The process used involves making a cascading style sheet (css) and changing the Legacy generated html, but don't worry as I am not going into the theory, only the the mechanics, so no knowledge of either is required.

Within Legacy there are two types of windows, as shown below:

The lemon chiffon background is used in all the link windows and, as can be seen, I have changed the "family links" window to green with gold lettering. I have also changed the colour of the links via the css.

For the purposes of this example I have chosen three colours from the chart in Blog 9, viz. Lemon Chiffon #FFFACD, Dark Green #006400 and Gold #FFD700.

The CSS

To create the css open Notepad and copy/paste the code below, then Save As "LegWin.css", in the same folder as your pedigree pages , not forgetting to change the Notepad "File Type" to "All Files".

                .bg1 {
                 background-color: #006400;
                 /* sets to dark green */
                 }
                
                .bg2 {
                 background-color: #fffacd;
                 /* sets to lemon chiffon */
                 }
                
                .fcol {
                 color: #ffd700;
                 /* sets to gold */
                 }
                
                 a:link {
                 font-weight: bold;
                 color: #006400;
                 /* sets the link to dark green */
                 }
                
                 a:visited {
                 font-weight: bold;
                 color: #006400;
                 /* sets the visited to dark green */
                 }
                
                 a:hover {
                 color: #cd853f;
                 /* sets the hover to peru */
                 }
              

As you see, in this instance I have made the link and visited colours the same and please note that all links on your pages will be changed to these colours.

Having pasted the code into Notepad you can, of course, change the colours to whatever is wanted. Moreover, if you ever wish to change the colours it is only necessary to change the colours in this sheet and they will be changed on every pedigree page.

Since this page was originally written, Dennis Kowallak of LTools has written a program to automate all the Legacy HTML to CSS. Please see my LTools Tutorial.

The HTML

A basic requirement is a program which can do a batch search and replace. I use the free PSPad but there are others such as HTML-Kit, however, I am going to concentrate on the former.

Using PSPad it is necessary to create a project; so go to Project>Create Project and browse to the folder containing the pedigree pages and select it. At some stage you are asked to save the project but I do it now to get it out of the way (Projects>Save Projects).

We will now use PSPad to change the Legacy generated html to the css classes we have created. Below is the Search/Replace screen from PSPad (Search>Search/Replace in files):

Search/Replace Screen

Colour	Text to find	New colour	Replace By
White	color=#FFFFFF	gold	class="fcol"
black	bgcolor=#000000	dark green	class="bg1"
black	bgcolor=black	dark green	class="bg1"
cyan	bgcolor=#EFEFEF	lemon chiffon	class="bg2"

The screen shows the replacing of the "white #FFFFFF" to the gold class="fcol". The full list of changes is shown on the right. Note that because Legacy has used two ways of expressing the colour "black" each has to be changed and the "cyan #EFEFEF" is the Legacy default window background colour.

The only thing left to do is to tell the browser to use css. This is done in the head section of the html. Again we use the batch Search/Replace in files facility of PSPad by inserting [</head>] in the "Find" box and [<link rel="stylesheet" href="LegWin.css" type="text/css"></head>] in the "Replace" box. (Do not include the square brackets) and click"OK". OK?

Printer friendly version of Parts 1 to 3

Corrections, comments and suggestions are welcome, so please use the contact facility below.

---

The above information is given without warranty either expressed or implied

The content last updated 31 March 2010