{"id":11224,"date":"2020-08-31T11:52:11","date_gmt":"2020-08-31T11:52:11","guid":{"rendered":"https:\/\/fhug.org.uk\/kb\/?post_type=kb_article&#038;p=11224"},"modified":"2023-09-08T10:20:09","modified_gmt":"2023-09-08T10:20:09","slug":"family-tree-tips-alter-css-default-styles","status":"publish","type":"kb_article","link":"https:\/\/www.fhug.org.uk\/kb\/kb-article\/family-tree-tips-alter-css-default-styles\/","title":{"rendered":"Family Tree Tips ~ Alter CSS Default Styles"},"content":{"rendered":"<h2>Introduction<\/h2>\n<p>The default font for every page is defined in the<code> fhstyle.css<\/code> file as Verdana black, but the colour can be changed, or an alternative font face substituted, in a few simple steps. Other\u00a0CSS\u00a0style changes can similarly be implemented, such as used by the<a href=\"https:\/\/fhug.org.uk\/kb\/kb-article\/family-tree-tips-set-page-background\/\">\u00a0Family Tree Tips ~ Set Page Background<\/a> tip.<\/p>\n<h2>Insert HTML Head Code<\/h2>\n<p>In the Wizard Family Tree Wizard ~ Step 8 \u2013 Final Details click the <em>Advanced<\/em> button and insert the following HTML code at the end of the &lt;head&gt; section:<\/p>\n<p><code>&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"_custom\/mystyle.css\"<\/code><\/p>\n<p>where <code>_custom\/mystyle.css<\/code> 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.<\/p>\n<h2>Add CSS Script<\/h2>\n<p>To change the font face, size, weight &amp; colour, something similar to the following CSS script must be placed in a plain text file named <code>mystyle.css<\/code> which must be included in a <code>\\_custom\\<\/code> subfolder of the <code>\\data\\<\/code> or <code>\\data files\\<\/code> subfolder holding the <span class=\"fh\" style=\"font-size: 17px !important; line-height: 21.4286px !important;\">\u0192<span style=\"color:#73B262; font-weight: bold;\">h<\/span><\/span> saved files. That prevents the <code>\\_custom\\mystyle.css<\/code>\u00a0file from being deleted when the package is rebuilt.<\/p>\n<p><code>body, p, td, li, ul, table { font-family: Arial, Helvetica, sans-serif; }<\/code><br \/>\n<code>.FhSiteTitle { font-family: Arial, sans-serif; font-size: 22pt; text-decoration: underline; color: green; }<\/code><br \/>\n<code>.FhPageTitle { font-family: Arial, sans-serif; font-size: 20pt; font-weight: bold; color: green; }<\/code><\/p>\n<p>Similar statements may be repeated for any\u00a0CSS\u00a0Class\u00a0in the\u00a0<code>fhstyle.css<\/code>\u00a0file that defines a font style, e.g.<\/p>\n<ul>\n<li><code>.FhPageTitleCentred,<\/code><\/li>\n<li><code>.FhTOC,<\/code><\/li>\n<li><code>.FhAppText,<\/code><\/li>\n<li><code>.FhHeader,<\/code><\/li>\n<li><code>.FhSeeAlso,<\/code><\/li>\n<li><code>.FhIndexList,<\/code><\/li>\n<li><code>.FhHdg1,<\/code><\/li>\n<li><code>.FhHdg2,<\/code><\/li>\n<li><code>.FhLbl2,<\/code><\/li>\n<li><code>.FhDat2,<\/code><\/li>\n<li><code>.FhHdg3,<\/code><\/li>\n<li><code>.FhLbl3,<\/code><\/li>\n<li><code>.FhDat3,<\/code> etc.<\/li>\n<\/ul>\n<span class=\"fh\" style=\"font-size: 17px !important; line-height: 21.4286px !important;\">\u0192<span style=\"color:#73B262; font-weight: bold;\">h<\/span><\/span> V5 now defines the Report Options &gt; Format tab Font and Hdg Style in the <code>fhstyle.css\u00a0file<\/code>, using CSS Classes such as<\/p>\n<ul>\n<li><code>.FhHdg1,<\/code><\/li>\n<li><code>.FhHdg2,<\/code><\/li>\n<li><code>.FhLbl2,<\/code><\/li>\n<li><code>.FhDat2,<\/code><\/li>\n<li><code>.FhHdg3,<\/code><\/li>\n<li><code>.FhLbl3,<\/code><\/li>\n<li><code>.FhDat3,<\/code> and<\/li>\n<li><code>.fhimgwrap.<\/code><\/li>\n<\/ul>\n<p>Sometimes the\u00a0Index of Names\u00a0column for surnames is too narrow and the following\u00a0<code>mystyle.css<\/code>\u00a0script fixes that. Adjust the<code>\u00a030em<\/code>\u00a0value larger (e.g.\u00a0<code>40em<\/code>) or smaller (e.g.\u00a0<code>20em<\/code>) to alter the width of the surnames column:<\/p>\n<p><code>.FhIndexList ul li { margin-left:30em; }<\/code><\/p>\n<p>Any other alignment, padding, margin, or border styles can be similarly changed with global effect.<\/p>\n<p>CSS\u00a0syntax and codes are explained in the\u00a0<a href=\"https:\/\/www.w3schools.com\/css\/\">w3schools CSS Tutoria<\/a>l.<\/p>\n<p>Placing the\u00a0<code>mystyle.css<\/code>\u00a0file in the\u00a0<code>custom<\/code>\u00a0subfolder prevents it from being deleted when the wizard recreates the pages.<\/p>\n<h2>Mobile Device Viewport<\/h2>\n<p>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 <code>&lt;head&gt;<\/code> section: after the code shown above:<\/p>\n<p><code>&lt;meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"&gt;<\/code><\/p>\n<p>Alternatively, add the following @viewport rule to the <code>mystyle.css<\/code> file, although this appears to be less widely implemented:<\/p>\n<p><code>@viewport { width: device-width; zoom: 1<\/code><\/p>\n<p>For further viewport attribute details see <a href=\"https:\/\/www.w3.org\/TR\/css-device-adapt\/\">http:\/\/www.w3.org\/TR\/css-device-adapt\/<\/a> and related @media and @page rules.<\/p>\n","protected":false},"template":"","fh_version":[13,14,15,739],"skill_level":[18,17],"topic":[81],"class_list":["post-11224","kb_article","type-kb_article","status-publish","hentry","fh_version-v4","fh_version-v5","fh_version-v6","fh_version-v7","skill_level-advanced","skill_level-intermediate","topic-creating-a-website"],"_links":{"self":[{"href":"https:\/\/www.fhug.org.uk\/kb\/wp-json\/wp\/v2\/kb_article\/11224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.fhug.org.uk\/kb\/wp-json\/wp\/v2\/kb_article"}],"about":[{"href":"https:\/\/www.fhug.org.uk\/kb\/wp-json\/wp\/v2\/types\/kb_article"}],"wp:attachment":[{"href":"https:\/\/www.fhug.org.uk\/kb\/wp-json\/wp\/v2\/media?parent=11224"}],"wp:term":[{"taxonomy":"fh_version","embeddable":true,"href":"https:\/\/www.fhug.org.uk\/kb\/wp-json\/wp\/v2\/fh_version?post=11224"},{"taxonomy":"skill_level","embeddable":true,"href":"https:\/\/www.fhug.org.uk\/kb\/wp-json\/wp\/v2\/skill_level?post=11224"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.fhug.org.uk\/kb\/wp-json\/wp\/v2\/topic?post=11224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}