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.
Insert HTML Head Code
In the Wizard FamilyFamily records store information about families, and links to all the Individual Records for those individuals who make up a family. You can view and edit Family records in the Property Box Dialogue. 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.
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.
fhstyle.css file, using CSS Classes such as .FhHdg1, .FhHdg2, .FhLbl2, .FhDat2, .FhHdg3, .FhLbl3, .FhDat3, and .fhimgwrap p.
Sometimes the Index of Names column for surnames is too narrow and the following mystyle.css script fixes that. Adjust the 30em value larger (e.g. 40em) or smaller (e.g. 20em) to alter the width of the surnames column:
.FhIndexList ul li { margin-left:30em; }
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.
Mobile Device Viewport
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
Forr further viewport attributeEvents are things that happened to an Individual and Attributes are things that described them. details see http://www.w3.org/TR/css-device-adapt/ and https://drafts.csswg.org/css-device-adapt/ and related @mediaWhen you add a picture, video, sound recording, document file etc into a Family Historian project, a Media record is created to represent that media item within the project; the Media record includes a link to the actual Media file. and @page rules.
