{"id":11237,"date":"2020-08-31T14:56:55","date_gmt":"2020-08-31T14:56:55","guid":{"rendered":"https:\/\/fhug.org.uk\/kb\/?post_type=kb_article&p=11237"},"modified":"2021-12-11T15:57:26","modified_gmt":"2021-12-11T15:57:26","slug":"family-tree-tips-set-page-background","status":"publish","type":"kb_article","link":"https:\/\/www.fhug.org.uk\/kb\/kb-article\/family-tree-tips-set-page-background\/","title":{"rendered":"Family Tree Tips ~ Set Page Background"},"content":{"rendered":"

Introduction<\/h2>\n

The default background for every page is defined in the fhstyle.css<\/code> file as plain white, but can be defined in the Wizard Step 7 \u2013 Presentation and Behaviour<\/a> via its Colours button Background setting.<\/p>\n

Also the colour can be changed, or an image substituted, in the few simple steps outlined below. This technique is also used by Family Tree Tips ~ Alter CSS Default Style<\/a> for text fonts, etc.<\/p>\n

Insert HTML Head Code<\/h2>\n

In the Wizard Family Tree Wizard ~ Step 8 \u2013 Final Details<\/a> click the Advanced<\/em> button and insert the following HTML code at the end of the <head><\/code> section:<\/p>\n

<link rel=\"stylesheet\" type=\"text\/css\" href=\"_custom\/mystyle.css\"<\/code><\/p>\n

where 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

If the website is to be viewed on mobile phones or tablets then also insert the following HTML code:<\/p>\n

<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> <\/code><\/p>\n

Add CSS Script<\/h2>\n

Something similar to the following CSS statement must be placed in a plain text file named mystyle.css<\/code> which must be included in a \\_custom\\<\/code> subfolder of the \\data\\<\/code> or \\data files\\<\/code> subfolder holding the \u0192h<\/span><\/span>saved files. Your background image file myimage.jpg<\/code> (or .png or .gif file) must be included in the same \\_custom\\<\/code> subfolder. It will be rendered on the the web page by tiling it repeatedly to fill the background.<\/p>\n

body { background: #C0D0F0 url(\"myimage.jpg\") }<\/code><\/p>\n

where the code #C0D0F0<\/code> (which represents pale blue) is a background colour to use if the image file is missing.<\/p>\n

Either the colour code #C0D0F0 <\/code>or the image file url(\"myimage.jpg\")<\/code> may be omitted.<\/p>\n

Colour codes have several formats explained at w3schools HTML Colors<\/a> and shown in an example below:<\/p>\n

NAME: green<\/code>
\nHEX: #008000<\/code>
\nRGB: rgb(0,128,0<\/code>)
\nRGB%: rgb(0%,50%,0%)<\/code><\/p>\n

Placing your files in the \\_custom\\ <\/code>subfolder prevents them from being deleted when the wizard rebuilds the package.<\/p>\n","protected":false},"template":"","fh_version":[13,14,15,739],"skill_level":[18,17],"topic":[81],"class_list":["post-11237","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\/11237","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=11237"}],"wp:term":[{"taxonomy":"fh_version","embeddable":true,"href":"https:\/\/www.fhug.org.uk\/kb\/wp-json\/wp\/v2\/fh_version?post=11237"},{"taxonomy":"skill_level","embeddable":true,"href":"https:\/\/www.fhug.org.uk\/kb\/wp-json\/wp\/v2\/skill_level?post=11237"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.fhug.org.uk\/kb\/wp-json\/wp\/v2\/topic?post=11237"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

These background properties are explained at w3schools CSS Background<\/a>.<\/p>\n