Update Home

Home.md

@@ -129,7 +129,7 @@ While Apple's Safari browser does have built-in support for user content stylesh
    ![Safari_Userscripts_Editor.png](uploads/309c2173d85872b8760290baf97af9ac/Safari_Userscripts_Editor.png)
 7. Continue with the "Post Install" instructions below.
 
-Note that the actual user content stylesheet will be located at \~/Library/Containers/Userscripts-Mac-Safari/Data/Documents/scripts/
+Note that the actual user content stylesheet will be located at _\~/Library/Containers/Userscripts-Mac-Safari/Data/Documents/scripts/_
 
 Userscripts stylesheets need to have a header like this:
 
@@ -252,6 +252,29 @@ Starting with Version 1.3 it became much easier to customize the Bookface colors
 
 Most of those should be fairly self-explanatory. If you are redefining the variables in your own block loading after Bookface you only need to include the specific ones you are overriding.
 
+Let's say you added a style block with this:
+
+```
+<style>
+:root{
+    --global-font-family: “Courier New” , Courier, serif;
+    --nav-bg: black;
+    --nav-icon-color: darkorange;
+    --background-color: antiquewhite;
+    --content-bg: white;
+    --comment-bg: antiquewhite;
+    --font-color: saddlebrown;
+    --font-color-darker: brown;
+    --menu-background-hover-color: cornsilk;
+    --border-color: chocolate;
+    --count-color:  cornsilk;
+    --count-bg: darkgoldenrod;
+}
+</style>
+```
+
+Which would look like this:
+
 ![custom_colors.png](uploads/f7263e98363e4b3caf0f6f9e87bc4c4d/custom_colors.png)
 
 A good place for server admins to add the CSS variable block is in the "Frio" theme footer template file at _/friendica/view/templates/footer.tpl_ but you should put it inside a _Smarty3_ `{{literal}}<style>...</style>{{/literal}}` block at the end of that file. That way you will only need to re-do it when "Frio" or "Friendica" get updated, not every time there is a _Bookface_ update.
@@ -319,7 +342,7 @@ Then set the CSS variable to use it:
 
 Be aware that some fonts may cause misalignment issues in various places in _Bookface_. Make sure to **test** the font before deploying it for everyone on your server.
 
-# Localization
+# LOCALIZATION
 
 Bookface uses a number of CSS pseudo-elements to label buttons in the "Frio" theme. You can easily change these to say something else or display them in another language:
 
@@ -345,6 +368,39 @@ Bookface uses a number of CSS pseudo-elements to label buttons in the "Frio" the
 
 Note that you need to escape single or double quotes and you **cannot** use HTML entities like `&nbsp;` or `&amp;` etc. Any unicode characters should be fine, however.
 
+Let's say you added a style block like this to translate the labels into Danish:
+
+```
+<style>
+:root{
+    /* LOCALIZE pseudo-element text below */
+    --sign-in-text: Log-Ind';
+    --compose-text: 'Skrive';
+    --new-note-text: 'Ny Note';
+    --save-search-text: 'Gem Søgning';
+    --follow-tag-text: 'Følg Tag';
+    --comment-button-text: 'Svar';
+    --share-button-text: 'Dele';
+    --quote-button-text: 'Citere';
+    --like-button-text: 'Ligesom';
+    --dislike-button-text: 'Kan ikke lide';
+    --more-button-text: 'Mere';
+    --attendyes-button-text: 'Går;
+    --attendno-button-text: 'Kan ikke gå';
+    --attendmaybe-button-text: 'Måske';
+    --add-photo-button-text: 'Tilføj billeder';
+    --follow-button-text: 'Følge';
+    --save-button-text: 'Spare';  
+}
+</style>
+```
+
+Which would label the Action buttons under posts like this:
+
+![localized_action_labels.png](uploads/52ca1b8c720dbdbb58798ae032dce565/localized_action_labels.png){width=649 height=146}
+
+_(Blame Google Translate if those translations are laughably wrong)_
+
 A good place for server admins to add the CSS variable block is in the "Frio" theme footer template file at _/friendica/view/templates/footer.tpl_ but you should put it inside a _Smarty3_ `{{literal}}<style>...</style>{{/literal}}` block at the end of that file. That way you will only need to re-do it when "Frio" or "Friendica" get updated, not every time there is a _Bookface_ update.
 
-End users can add the block as a user content stylesheet using either userContent.css or the Stylus Add-On in Firefox, with the Stylus Extension in Google Chrome, or the Userscripts Extension in Safari.
+End users can add the block as a user content stylesheet using either _userContent.css_ or the Stylus Add-On in Firefox, with the Stylus Extension in Google Chrome, or the Userscripts Extension in Safari.