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 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.
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 a \_custom\
subfolder of the \data\
or \data files\
subfolder holding the ƒh saved files. That prevents the \_custom\mystyle.css
file from being deleted when the package is rebuilt.
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.
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
For 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 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.