diff --git a/Home.md b/Home.md
index 17df366..7a9363a 100644
--- a/Home.md
+++ b/Home.md
@@ -1,4 +1,4 @@
-"Bookface" is a custom User Interface for Friendica. It was designed to give the Friendica user interface a modern makeover with styling cues from Facebook to make Friendica feel "more at home" for users who are switching platforms. _Bookface_ began as a user content stylesheet for Firefox, was then adapted for use with the Stylus Add-on/Extension and the Userscripts extension, and later an installable scheme for the Friendica "Frio" theme.
+"Bookface" is a custom User Interface for Friendica. It was designed to give the Friendica user interface a modern makeover with styling cues from Facebook to make Friendica feel "more at home" for users who are switching platforms. _Bookface_ began as a user content stylesheet for Firefox, was then adapted for use with the Stylus Add-on/Extension and the Userscripts extension, and later an installable scheme for the Friendica "Frio" theme.
# FOR FRIENDICA USERS
+\# FOR FRIENDICA USERS
If your Friendica server offers _Bookface_ you simply need to select the "Frio" theme and one of the Bookface schemes from the Theme Customization options. If the Friendica instance you're on does not yet offer _Bookface_ you can install it in your browser.
@@ -17,29 +17,29 @@ If your Friendica server offers _Bookface_ you simply need to select the "Frio"
1. Go to the _Main Menu -\> Settings_ under your profile name and picture.
- {width=222 height=580}
+ {width="222" height="580"}
2. Select "Display" from the left sidebar Settings Menu.
- {width=284 height=517}
+ {width="284" height="517"}
3. On the "Display Settings" select the "Theme Customization" section.
- {width=673 height=509}
+ {width="673" height="509"}
4. In the "Appearance" drop-down menu look for the "Bookface" options. _If you don't see them your Friendica instance does not yet offer them and you will have to install the Userstyles in your browser instead._
- {width=673 height=509}
+ {width="673" height="509"}
5. Click the "Submit" button and you will now be using the _Bookface_ scheme you selected!
## Switching on Mobile
1. Tap the three vertical dots in the top-right corner of the screen to open the Main Menu and select "Settings."
- {width=359 height=739}
+ {width="359" height="739"}
2. Tap the "\>\>" button in the top-left corner of the screen and select "Display" from the sidebar menu.
- {width=359 height=739}
+ {width="359" height="739"}
3. Under the "Display Settings" tap to expand the "Theme Customization" sub-section.
- # {width=359 height=739}
+ # {width="359" height="739"}
4. Tap the drop-down menu under "Appearance" and select one of the "Bookface" options. _If you don't see them your Friendica instance does not yet offer them and you will have to install the Userstyles in your browser instead._
@@ -49,7 +49,7 @@ If your Friendica server offers _Bookface_ you simply need to select the "Frio"
## Installing Bookface Userstyles
-If your Friendica instance does not offer the _Bookface_ schemes you will have to install the Userstyles in your browser instead. Exactly _how_ you do this will depend on what web browser you are using, and it will _only_ apply to that browser on that specific device.
+If your Friendica instance does not offer the _Bookface_ schemes you will have to install the Userstyles in your browser instead. Exactly _how_ you do this will depend on what web browser you are using, and it will _only_ apply to that browser on that specific device.
### FIREFOX
@@ -60,7 +60,7 @@ You have two options if you are using the Firefox browser (or any browser based
1. Type `about:support` into the address bar.
2. Find "Profile folder" and open that location.
3. Create a folder named "chrome" there if one doesn't already exist (it probably doesn't if you've never done this before).
-4. Create a file inside that folder named "userContent.css"
+4. Create a file inside that folder named "_userContent.css_"
5. Open that file in a text editor and add a line like this:
```
@@ -77,35 +77,75 @@ _(change "friendica.world" to the domain of the server you use)._
#### Stylus Add-On Method
-1. Install the Stylus Add-On for Firefox and enable it.
-2. Go to your Friendica instance
-3. Open the Stylus Add-On, then Copy and Paste the code from either the bookface_light_userstyles.css or bookface_dark_userstyles.css stylesheet into the Stylus Add-On.
-4. Continue with the "Post Install" instructions below.
+1. Install the [Stylus Add-On for Firefox](https://addons.mozilla.org/en-US/firefox/addon/styl-us/?utm_source=addons.mozilla.org&utm_medium=referral&utm_content=search) and enable it.
+2. Go to your Friendica instance.
+3. Go to the "puzzle" icon and select "Stylus" then click the name.
+
+ {width=376 height=203}
+4. Open the Stylus Add-On and check the box for "Write style for" and select the domain part of the URL shown (don't select the sub-page or it will only apply to the subpage).
+
+ {width=246 height=182}
+5. Then Copy and Paste the code from either the bookface_light_userstyles.css or bookface_dark_userstyles.css stylesheet into the Stylus Add-On.
+
+ 
+6. Continue with the "Post Install" instructions below.
### Google Chrome
For Google Chrome (or any Chromium-based web browser) you will need to:
-1. Install the Stylus Extension and enable it.
+1. Install the [Stylus Extension](https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) and enable it.
2. Go to your Friendica instance
-3. Open the Stylus Extension, then Copy and Past the code from either the bookface_light_userstyles.css or bookface_dark_userstyles.css into the Stylus Extension.
-4. Continue with the "Post Install" instructions below.
+3. Open the Stylus Extension and check the box for "Write style for" and click the domain part (do not click the sub-page part of the URL shown or it will only apply the styles to that sub-page).
-### Safari
+ {width=293 height=185}
+4. then Copy and Past the code from either the bookface_light_userstyles.css or bookface_dark_userstyles.css into the Stylus Extension.
-While Apple's Safari browser does have built-in support for user content stylesheets like Firefox does, it does **not** recognize document domains, so it would apply the stylesheet to _every_ website! Obviously that's not what you want to do. The way around this is:
+ 
+5. Continue with the "Post Install" instructions below.
-1. Go to the App Store and install the Userscripts Extension for Safari.
-2. Despite the name it can also do site-specific stylesheets. Go to your Friendica instance.
-3. Open the Userscripts Extension and create a new site-specific entry. Copy and Paste the entire contents of the bookface_light_userstyles.css or bookface_dark_userstyles.css into the extension entry.
-4. Continue with the "Post Install" instructions below.
+### Safari
+
+While Apple's Safari browser does have built-in support for user content stylesheets like Firefox does, it does **not** recognize document domains, so it would apply the stylesheet to _every_ website! Obviously that's not what you want to do. The way around this is:
+
+1. Go to the App Store and install the [Userscripts Extension for Safari](https://apps.apple.com/us/app/userscripts/id1463298887).
+2. Open Safari and go to Settings.
+
+ {width=282 height=330}
+3. Make sure Userscripts is activated in Extensions.
+
+ {width=453 height=346}
+4. Despite the name it can also do site-specific stylesheets. Go to your Friendica instance. Go to your Friendica instance. Usercripts will ask for permission to access to the site:
+
+ {width=295 height=353}
+5. Open the Userscripts Extension and create a new site-specific entry.
+
+ {width=159 height=162}
+6. Copy and Paste the entire contents of the _bookface_light_userstyles.css_ or _bookface_dark_userstyles.css_ into the extension entry.
+
+ 
+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/
+
+Userscripts stylesheets need to have a header like this:
+
+```
+/* ==UserStyle==
+@name BookFace
+@description Make Friendica look like Facebook
+@match https://friendica.world/*
+==/UserStyle== */
+```
+
+You paste the Bookface stylesheet contents after that.
### Post-Install for Userstyles
These instructions are only for those who have to use the Userstyles because their Friendica instance does not offer the Bookface schemes. Do not try to do these steps if you can just select "Bookface" in your Friendica Display Settings.
1. In Friendica go to _Main Menu \> Settings \> Display \> Theme Customizations_
-2. If you are using the "Light" version of _Bookface_ either set the "Appearance" drop-down to "Light" or "Custom." If you set it to "Custom" copy and paste this schemestring for the best appearance: `{"nav_bg":"#ffffff","nav_icon_color":"#65686C","link_color":"#0066ff","background_color":"#f2f4f7","background_image":"","contentbg_transp":"100"}`
+2. If you are using the "Light" version of _Bookface_ either set the "Appearance" drop-down to "Light" or "Custom." If you set it to "Custom" copy and paste this schemestring for the best appearance: `{"nav_bg":"#ffffff","nav_icon_color":"#65686C","link_color":"#0066ff","background_color":"#f2f4f7","background_image":"","contentbg_transp":"100"}`
3. If you are using the "Dark" version of _Bookface_ set the "Appearance" drop-down to either "Dark" or "Black." There is no schemestring for _Bookface_ Dark.
## COVER PHOTOS
@@ -114,7 +154,7 @@ From version 1.3 Bookface supports adding a "Cover Photo" to your profile pages.
-Note that this feature only works in recent, modern browsers! Every current and supported desktop and mobile version should be able to show it, but nothing unsupported nor released before 2022 will (see caniuse.com entry for "has()" for specific versions).
+Note that this feature only works in recent, modern browsers! Every current and supported desktop and mobile version should be able to show it, but nothing unsupported nor released before 2022 will (see caniuse.com entry for "has()" for specific versions).
### ON ALL PROFILE PAGES
@@ -160,24 +200,24 @@ Drop these six files into _/friendica/view/theme/frio/scheme/_:
* bookface_light.css
* bookface_light.php
-That will make the Bookface options available to users on your server. If you want to set one of the Bookface options as the default scheme for your server:
+That will make the Bookface options available to users on your server. If you want to set one of the Bookface options as the default scheme for your server:
1. Go to _Main Menu \> Admin_
- {width=208 height=695}
+ {width="208" height="695"}
2. Then _Admin Menu \> Theme Selection_
- {width=280 height=443}
+ {width="280" height="443"}
3. On the "Administration - Theme Selection" page click the "frio" link text.
- {width=665 height=244}
+ {width="665" height="244"}
4. This takes you to the "frio" theme settings sub-page, scroll down to the "Settings" section and selected one of the _Bookface_ schemes as the default for your server.
- {width=665 height=734}
+ {width="665" height="734"}
# CUSTOMIZATION
-Starting with Version 1.3 it became much easier to customize the Bookface colors because they are now defined in CSS variables at the top of the stylesheets. You can edit them directly in the stylesheets, but you would have to re-do them with every update of Bookface. Instead, you can override them with a stylesheet loaded _after_ Bookface that redefines these variables.
+Starting with Version 1.3 it became much easier to customize the Bookface colors because they are now defined in CSS variables at the top of the stylesheets. You can edit them directly in the stylesheets, but you would have to re-do them with every update of Bookface. Instead, you can override them with a stylesheet loaded _after_ Bookface that redefines these variables.
```
--global-font-family: "Open Sans", Arial, sans-serif, Noto Color Emoji;
@@ -235,7 +275,7 @@ Depending on the font(s) you define you _might_ be able to safely override:
--global-font-family
```
-But make sure the font is actually available to users on your site! Don't assume they have it installed on their system. Either load it remotely using the `` tag or locally using `@font-face`.
+But make sure the font is actually available to users on your site! Don't assume they have it installed on their system. Either load it remotely using the `` tag or locally using `@font-face`.
You should _NOT_ use the @import method to remote load fonts if you can help it because it loads them sequentially and will hurt server performance. So if you're going to load a remote font use the \ method. However, you'll need to edit the "Frio" theme _/friendica/view/theme/frio/templates/head.tpl_ to add something like this: