Family Tree Tips ~ Alter CSS Default Styles

Introduction

The default font for every page is defined in the fhstyle.css file as Verdana black, but the colour can be changed, or an alternative font face substituted, in a few simple steps. Other CSS style changes can similarly be implemented, such as used by the Family Tree Tips ~ Set Page Background tip.

1. Insert HTML Head Code

In the Wizard Family Tree Wizard ~ Step 8 – Final Details click the Advanced button and insert the following HTML code at the end of the <head> section:

<link rel="stylesheet" type="text/css" href="custom/mystyle.css">

where custom/mystyle.css is your CSS file created in the next step. Subsequently, by changing this one CSS file, the style of all the web pages can be altered without rebuilding any of them.

2. Add CSS Script

To change the font face, size, weight & colour, something similar to the following CSS script must be placed in a plain text file named mystyle.css which must be included in the …\Public\FH CD-DVD\data\custom folder or the …\Public\FH Web Page\custom folder:

body, p, td, li, ul, table {font-family: Arial, Helvetica, sans-serif }
.FhSiteTitle { font-family: Arial, sans-serif; font-size: 22pt; text-decoration: underline; color: green }
.FhPageTitle { font-family: Arial, sans-serif; font-size: 20pt; font-weight: bold; color: green }

Similar statements may be repeated for any CSS Class in the fhstyle.css file that defines a font style, e.g. .FhPageTitleCentred, .FhTOC, .FhAppText, .FhHeader, .FhSeeAlso, .FhIndexList, .FhHdg1, .FhHdg2, .FhLbl2, .FhDat2, .FhHdg3, .FhLbl3, .FhDat3, etc.

:!: Family Historian V5 now defines the Report Options > Format tab Font and Hdg Style in the fhstyle.css file, using CSS Classes such as .FhHdg1, .FhHdg2, .FhHdg3, .FhLbl2, .FhDat2, .FhLbl3, .FhDat3, and .fhimgwrap p.

Any other alignment, padding, margin, or border styles can be similarly changed with global effect.

CSS syntax and codes are explained in the w3schools CSS Tutorial.

Placing the mystyle.css file in the custom subfolder prevents it from being deleted when the wizard recreates the pages.

3. Mobile Device Viewport

New tablet and smartphone devices have smaller screens than PC monitors. To cater for these the HTML5 meta tag named viewport has been introduced. Append the following code at the end of the <head> section: after the code shown above:

<meta name="viewport" content="width=device-width, initial-scale=1">

Alternatively, add the following @viewport rule to the mystyle.css file, although this appears to be less widely implemented:

@viewport { width: device-width; zoom: 1 }

For further viewport attribute details see http://www.w3.org/TR/css-device-adapt/ and https://drafts.csswg.org/css-device-adapt/ and related @media and @page rules.