Family Tree Tips ~ Alter CSS Default Styles

11224  
  • Skill Level: Advanced and Intermediate
  • FH versions: V4, V5, V6, and V7
  • In Topics: Creating a website 

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.
ƒh V5 now defines the Report Options > Format tab Font and Hdg Style in the 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 attribute details see http://www.w3.org/TR/css-device-adapt/ and related @media and @page rules.

Last update: 08 Sep 2023