Update Home

Random Penguin 2025-03-02 22:18:35 +00:00
parent 7d65b020bd
commit a24027f631

29
Home.md

@ -9,7 +9,7 @@
![Bookface_Dark.png](https://gitlab.com/randompenguin/bookface/-/raw/main/Bookface_Dark.png?ref_type=heads)
</div>\# FOR FRIENDICA USERS
</div>\\# 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.
@ -81,14 +81,13 @@ _(change "friendica.world" to the domain of the server you use)._
2. Go to your Friendica instance.
3. Go to the "puzzle" icon and select "Stylus" then click the name.
![Stylus_Firefox_Start.png](uploads/2e78ee5f6fcd88e8572bc8a8ad1be46c/Stylus_Firefox_Start.png){width=376 height=203}
![Stylus_Firefox_Start.png](uploads/2e78ee5f6fcd88e8572bc8a8ad1be46c/Stylus_Firefox_Start.png){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).
![Stylus_Firefox_WriteStyles.png](uploads/3564777a84d2cc71c0f14ba2f997b302/Stylus_Firefox_WriteStyles.png){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.
![Stylus_Firefox_WriteStyles.png](uploads/3564777a84d2cc71c0f14ba2f997b302/Stylus_Firefox_WriteStyles.png){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.
![Stylus_Editor.png](uploads/cc739202d4897717d2ea9d5d81dfcf44/Stylus_Editor.png)
6. Continue with the "Post Install" instructions below.
![Stylus_Editor.png](uploads/cc739202d4897717d2ea9d5d81dfcf44/Stylus_Editor.png) 6. Continue with the "Post Install" instructions below.
### Google Chrome
@ -98,7 +97,7 @@ For Google Chrome (or any Chromium-based web browser) you will need to:
2. Go to your Friendica instance
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).
![Stylus_Write_Styles_For.png](uploads/12b343b388d5a22851242e5088c11934/Stylus_Write_Styles_For.png){width=293 height=185}
![Stylus_Write_Styles_For.png](uploads/12b343b388d5a22851242e5088c11934/Stylus_Write_Styles_For.png){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.
![image.png](uploads/8b663692efd8e45f28a87891b99a1d7e/image.png)
@ -111,16 +110,16 @@ While Apple's Safari browser does have built-in support for user content stylesh
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.
![Safari_Settings.png](uploads/4b2083baac84df4a9c13e3390470d401/Safari_Settings.png){width=282 height=330}
![Safari_Settings.png](uploads/4b2083baac84df4a9c13e3390470d401/Safari_Settings.png){width="282" height="330"}
3. Make sure Userscripts is activated in Extensions.
![Safari_Manage_Extensions.png](uploads/f10bc53ee0f6788d550eec09127b152a/Safari_Manage_Extensions.png){width=453 height=346}
![Safari_Manage_Extensions.png](uploads/f10bc53ee0f6788d550eec09127b152a/Safari_Manage_Extensions.png){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:
![Safari_Userscripts_Permissions.png](uploads/4afc8fe4215de255d7978259484a5689/Safari_Userscripts_Permissions.png){width=295 height=353}
![Safari_Userscripts_Permissions.png](uploads/4afc8fe4215de255d7978259484a5689/Safari_Userscripts_Permissions.png){width="295" height="353"}
5. Open the Userscripts Extension and create a new site-specific entry.
![Userscripts_New_CSS.png](uploads/39b1ee5a7814dcdd6059e7c9ecc12f69/Userscripts_New_CSS.png){width=159 height=162}
![Userscripts_New_CSS.png](uploads/39b1ee5a7814dcdd6059e7c9ecc12f69/Userscripts_New_CSS.png){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.
![Safari_Userscripts_Editor.png](uploads/309c2173d85872b8760290baf97af9ac/Safari_Userscripts_Editor.png)
@ -239,6 +238,10 @@ 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.
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}}...{{/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.
Some people have found the accent color engagement counts on the action buttons distracting or too busy. You can easily change it by redefining the variables. You could either set it to another already defined variable or to a specific color:
```
@ -325,3 +328,7 @@ 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.
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}}...{{/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.