How to use LTools for Webpages

Blogs

From time to time I will be adding items to these pages giving details of how to achieve certain objectives, usually related to genealogy and the use of Legacy software, often in conjunction with other software.

I am not suggesting that the solutions offered are the only, or indeed the best, options to solving problems but simply that they are ways which I have found to work.

* 'V' indicates a video is available

  1. Using Legacy Search V
  2. Search Events, Locations and Married Names V
  3. Create an Ancestry Book
  4. Map with Google Earth
  5. History of British Prime Ministers - Timeline
  6. British Civil Registration
  7. The Murder of Adam Mather
  8. Improve Photo Colour Balance
  9. Transparency with The Gimp
  10. Masking with The Gimp
  11. Web Safe Colours
  12. Create Legacy Web Pages - Part 1
  13. Create Legacy Web Pages - Part 2
  14. Create Legacy Web Pages - Part 3
  15. Using LTools Tidy Legacy HTML
  16. Insert Pictures into Web Pages
  17. Insert RSS Feed into Web Pages
  18. Getting Online
  19. Protect Your PC
  20. Open Legacy files with Open Office V
  21. FamGenContacts Database
  22. Create Direct Line Ancestor Tree
Legacy Users Subscribe to Web Users Group
Powered by
uk.groups.yahoo.com

The icons below are links to any other software mentioned.

  • Legacy
  • PSPad
  • Open Office
  • The Gimp
  • Xara 3D
  • Zipper Logo

Zipper Logo

Make the most of LTools Tidy Legacy HTML

This excellent tool takes the html from Legacy and converts it to standards compliant html with an external style sheet (CSS). An important point about style sheets is that they enable one to change the format of *all* the pages by just changing the properties on the style sheet.

To make the best use of the program a basic knowledge of CSS is needed and the aim of this tutorial is to provide that knowledge and show how to apply it in the program.

I am going to concern myself only with the easy to learn, basic CSS which LTools uses. To view this, first create your HTML with Legacy and run LTools to create the CSS. Now, open the folder you created for the LTools output. Open the file "pedigree.css" in any text editor, eg. Notepad.

The CSS

Let us first look at the first few lines of the CSS:

/* default styles for hyperlinks */
a:link { color: blue }
a:visited { color: purple }
/* a:hover { color: red } */
a:active { color: red }
/* style for the the entire web page */
body { font-size: 10pt; background-image: url(...); background-color: #FFFFFF; }
/* style for entire ancestor table */
table.t1 { width: 580px; height: 10px; margin-left: auto; margin-right: auto; vertical-align: top; border-style: hidden }
/* style for table which contains an ancestor box */
table.t2 { margin-left: auto; margin-right: auto; background-color: black; border-spacing: 1px }

As can be seen the first line comprises /*.....*/, which means that everything between the slash - asterisk and asterisk - slash is a comment. It is completely ignored by browsers. A few lines down one can see an instruction, a:hover { color: red }, "commented out", and if one wants the instruction to be used, then simply remove the slashes and asterisks - I do!

In CSS an instruction always begins with a selector followed by a declaration which contains the style(s) to be applied. Thus in the above example "a" is the selector, but in this case is qualified by the cursor state ":link". "a" stands for "anchor" and "link" is its state when the cursor is not over the link. The declaration must be enclosed beteen curly brackets, {.....}; "color:" is the text colour, in this case blue. NB when using the name, only really common colours are standard across all browsers.

Next is the "body" selector which defines the overall look of your page. The size of the font is set at 10pt and I recommend that this is not changed as it standardises your font size across all browsers. You will see later the size for various parts of the page can be changed by using a percentage of this setting. The url for the image must contain the path to the image, in this case the image is in the same folder as the web pages. If you do not want a background image then, providing there is no image with that url, the instruction will be ignored, or you can "comment it out".

The meaning of "background-color" is obvious and I have given elsewhere the numbers for 256 colours: Web Safe Colours, #FFFFFF is white and can be changed to a color of your choice. Note that each style is separated from the next by a semi-colon.

"table.t1" illustrates a different construction. Here the declaration contains the styles for the "Class" "t1" of the table selector. Note the full-stop/period between the selector and the class. A class is a way of identifying exactly where a style will be applied in the HTML. In this case all the HTML tables with a class of "t1" will have the styles declared in that instruction. The combination of "margin-left: auto; margin-right: auto;" centralises the table.

CSS Fonts

/* font for most data on page */
span.f1 { font-size: 70%; font-weight: bold }
/* font for the Family Links text */
span.f2 { color: #FFFFFF; font-family: Arial,Helvetica }
/* font for Individual's data */
span.f3 { font-family: Arial,Helvetica; font-size: 64% }
/* font for the Individual's name */
span.f9 { font-size: 125%; font-weight: bold; text-decoration: underline }

Much of this will now be understood but the selector "span" is new. It means that everything included between the HTML tags eg. <span class="f1"> and </span> with the relevant class will have the properties of that declaration.

As I mentioned before, " font-size: 70%;" states that for this class of span the size will be 70% of that of the base font ie. 70% of 10pt. If you want it bigger then increase the size up to anything you wish. "font-weight: bold;" is obvious. The other option is "normal".

Span classes f1 and f3 introduce a new style "font-family: Arial, Helvetica". The type of font can be anything you wish, but it needs to be remembered that it must be on your viewer's machine, if not, then that viewer's default font will be used. It is, therefore, recommended that if an unusual font is stated then the closest common one, or more, are also included at the end of your list, with a comma as the separator.

More commonly seen with the anchor ("a") selector, "text-decoration: underline;" means that all text for this selector will be underlined. If this is not required then change "underline" to "none"

Should you wish to add additional styles to any of the selectors generated by LTools then that is fine, you may wish to add a bold font where one isn't present at the moment - no problem, just add it. And much more should you so wish! Don't forget that they must be separated by a semi-colon.

From Version 1.2.32 Dennis introduced a new option enabling the Family View box to be removed when empty. To achieve this he introduced a new CSS selector, "table.t5":

/* style for empty Family Links table */
table.t5 { width: 200px; background-color: black; border-spacing: 0px; display: none; }

For users who wish to use this option and who may have customised the parameters of "table.t3" then copy/paste this code into your CSS and adjust so that, apart from "display" attribute, it is the same as your "table.t3".

If you wish to display the empty Family View box then change "display: none" in the CSS to "display: display".

Custom HTML

Should you, like me, place your own HTML coding in, for example, the Links Tab boxes of the Legacy Web Creation Screens, then if you include these between the HTML comments, <-- start custom html --> and <-- end custom html --> the coding will be ignored by LTools.

Add to Head

Additional data such as extra META tags, LINKS, or javascript can be placed between the <HEAD> and </HEAD> tags by adding the code to a text file called "pedigreeHead.txt" which you place in the *Destination HTML Folder* for the Tidy Legacy HTML output

Coding Errors

The legacy generated pages are processed without problem, however, it is possible for one's own coding to have errors which may cause the Tidy Processor to fail to process a page containing that error. An example of this is an incorrect link - <A HREF="http//ancestry.com TARGET="blank">, where the quote mark after ".com" is missing. This error will be flagged during processing and details for ERROR2 in the Log will give the RIN. Usually these will be rare affecting few pages, and can be corrected manually in the Legacy output script, rather than rerunning from Legacy.

Summary

This is a very brief introduction to CSS and the best way to learn is to use it. I would suggest generating small set of Pedigree pages, and running them through Tidy Legacy HTML. You can then open the pedigree.css file and play around by changing the variables in the script, saving and viewing the effects in your browser.

Finally, WUL (see the side panel) will be happy to answer any questions which you may have. "The CSS Anthology" is recommended futher reading (also in the side panel).

Printer friendly version Printer

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 30 June 2010