From d6367ccc089c011d4537d0972ef77b99e49b3bbe Mon Sep 17 00:00:00 2001
From: Random Penguin <25882519-randompenguin@users.noreply.gitlab.com>
Date: Mon, 24 Mar 2025 14:43:11 -0500
Subject: [PATCH] Update Home
---
Home.md | 433 +-------------------------------------------------------
1 file changed, 5 insertions(+), 428 deletions(-)
diff --git a/Home.md b/Home.md
index 45d1236..a3089d1 100644
--- a/Home.md
+++ b/Home.md
@@ -11,435 +11,12 @@
Screenshots of Friendica with Bookface Light and Dark versions.
-# FOR FRIENDICA USERS
+# Table of Contents
-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.
+[Home](https://gitlab.com/randompenguin/bookface/-/wikis/Home) (This page)
-## Switching on Desktop
+[For Friendica Users](https://gitlab.com/randompenguin/bookface/-/wikis/For-Friendica-Users)
-1. Go to the _Main Menu -\> Settings_ under your profile name and picture.
+[For Friendica Admins](https://gitlab.com/randompenguin/bookface/-/wikis/For-Friendica-Admins)
- {width="222" height="580"}
-2. Select "Display" from the left sidebar Settings Menu.
-
- {width="284" height="517"}
-3. On the "Display Settings" select the "Theme Customization" section.
-
- {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"}
-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"}
-2. Tap the "\>\>" button in the top-left corner of the screen and select "Display" from the sidebar menu.
-
- {width="359" height="739"}
-3. Under the "Display Settings" tap to expand the "Theme Customization" sub-section.
-
- # {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._
-
- 
-5. Tap the "Submit" button to switch to the Bookface scheme you selected.
-
-**_NOTE:_** _This setting is on the SERVER so it applies to your account no matter what device you are using. If you set it on your phone it will also be used on your tablet or laptop or desktop and vice versa. You cannot use different schemes on different devices._
-
-## 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.
-
-### FIREFOX
-
-You have two options if you are using the Firefox browser (or any browser based on it).
-
-#### Built-In Method
-
-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_"
-5. Open that file in a text editor and add a line like this:
-
- ```
- @-moz-document domain(friendica.world){
-
- }
- ```
-
-_(change "friendica.world" to the domain of the server you use)._
-
-6. Copy and Paste the entire bookface_light_userstyles.css or bookface_dark_userstyles.css inside the {...}
-7. Open another tab in Firefox, go to `about:config`, and set `toolkit.legacyUserProfileCustomizations.stylesheets` preference to `true`. _(You'll only need to do this if you've never used a custom stylesheet before)._
-8. Restart Firefox and go to your Friendica instance.
-9. Continue with the "Post Install" instructions below.
-
-#### Stylus Add-On Method
-
-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](https://chromewebstore.google.com/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne) and enable it.
-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).
-
- {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.
-
- 
-5. 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"}`
-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.
-
-{width="488" height="286"}
-
-## COVER PHOTOS
-
-From version 1.3 Bookface supports adding a "Cover Photo" to your profile pages. There are two places you can add the Cover Photo, depending on whether you want it to appear on all your profile pages or ONLY on yur actual profile page.
-
-**_NOTE:_** _Some third-party apps allow Friendica users to set a profile "Cover Photo" (aka "Banner," "Profile Background," "Header Image" etc.), and that information **is** stored in the database "banner" field with the rest of their profile info. However the "Frio" theme does not display the "banner" field information if set, and there is no way for users to set data to that field from within Friendica itself. Which is why the Bookface scheme uses this work-around._
-
-
-
-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
-
-1. Go to Settings \> Profile \> Personal
-2. In the "Description" box add something like:
-
- `[class=coverphoto][img=https://friendica.server/photo/1649cc674810612350.png]Cover photo description alt-text here[/img][/class]`
-3. "Submit" your changes.
-
-{width="507" height="330"}
-
-For people who are not using the _Bookface_ scheme they will simply see a thumbnail image of your Cover Photo in the sidebar beneath your profile description. For people who ARE using the _Bookface_ scheme they will see your Cover Photo as a background on your Profile, Conversations, Photos, etc., pages that have a sidebar with your "vcard" info.
-
-### ONLY ON PROFILE PAGE
-
-1. Go to Settings \> Profile \> Custom Profile Fields
-2. Either create a new entry for your Cover Photo or add the BBcode to an existing "Value" field:
-
- `[class=coverphoto][img=https://friendica.server/photo/1649cc674810612350.png]Cover photo description alt-text here[/img][/class]`
-3. Check the "Permissions" for the field. If for some reason you only want certain people Circles to see your Cover Photo you can set that here.
-4. "Submit" your changes.
-
-{width="505" height="360"}
-
-People who are not using the _Bookface_ scheme will simply see a thumbnail on your Profile Page in your custom fields. The Cover Photo will _ONLY_ appear on that Profile page (not on your Conversations, Photos, Contacts, etc. pages).
-
-### MULTIPLE COVER PHOTOS
-
-
-
-While it is not really recommended you do this, you can place up to FOUR images in the Cover Photo container and Bookface will show them as a collage of stripes. For example pasting something this under either your profile description or in a custom field value:
-
-`[class=coverphoto][img=https://friendica.server/photo/1649cc674810612350.png]Cover photo 1 description alt-text here[/img][img=https://friendica.server/photo/1649cc677034958382350.png]Cover photo 2 description alt-text here[/img][img=https://friendica.server/photo/1649c038920505603674810612350.png]Cover photo 3 description alt-text here[/img][img=https://friendica.server/photo/3464771649cc674810612350.png]Cover photo 4 description alt-text here[/img][/class]`
-
-{width="536" height="422"}
-
-Extra spaces are okay, but make sure there are no newlines/carriage returns or other elements inside the `[class]...[/class] `or it will mis-count the number of images and size them wrongly. Also keep in mind people not using Bookface will see multiple thumbnails of these images on your Profile. Only Bookface users will see the collage.
-
-# FOR FRIENDICA ADMINS
-
-Instructions on How to Install _Bookface_ on your server.
-
-Drop these six files into _/friendica/view/theme/frio/scheme/_:
-
-* bookface_auto.css
-* bookface_auto.php
-* bookface_dark.css
-* bookface_dark.php
-* 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:
-
-1. Go to _Main Menu \> Admin_
-
- {width="208" height="695"}
-2. Then _Admin Menu \> Theme Selection_
-
- {width="280" height="443"}
-3. On the "Administration - Theme Selection" page click the "frio" link text.
-
- {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"}
-
-# 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.
-
-```
- --global-font-family: "Open Sans", Arial, sans-serif, Noto Color Emoji;
- --nav-bg: #ffffff;
- --link-color: #0066ff;
- --nav-icon-color: #65686c;
- --background-color: #f2f4f7;
- --content-bg: var(--nav-bg);
- --comment-bg: var(--background-color);
- --font-color: #313131;
- --font-color-darker: #333333;
- --font-color-lighter: #444444;
- --menu-background-hover-color: color-mix(in oklab, var(--link-color) 15%, white);
- --border-color: #eeeeee;
- --count-color: #ffffff;
- --count-bg: var(--link-color);
- --attach-file-button: none; /* none or block */
-```
-
-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:
-
-```
-
-```
-
-Which would look like this:
-
-
-
-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:
-
-```
---count-color: black; /* make number black */
---count-bg: var(--nav-icon-color); /* makes it same color as button */
-
---count-bg: black; /* makes the background of counts black, font is white */
-
---count-color: purple; /* number is purple */
---count-color: rgba(0,0,0,.5); /* semi-transparent gray */
-```
-
-If you are a server admin you should avoid redefining the default Frio color variables because if a user on your server changes the "Theme Customization" settings you'd be overriding the user's preferred color scheme. The default variables you should _NOT_ override globally are:
-
-```
---nav-bg
---link-color
---nav-icon-color
---background-color
---font-color
---font-color-darker
---menu-background-hover-color
-```
-
-Those are the ones that can be included in a user's schemestring. You can _safely_ globally override:
-
-```
---border-color
-```
-
-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`.
-
-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:
-
-```
-
-```
-
-If the font you want to use is available locally on your server you'd just need to add something like this to the top of the Bookface stylesheets or your custom stylesheet loading after Bookface:
-
-```
- @font-face{
- font-family: Roboto;
- src: url('../font/Roboto-Regular.ttf'); /* or where ever you put it */
- }
-```
-
-Then set the CSS variable to use it:
-
-```
- -global-font-family: 'Roboto', sans-serif;
-```
-
-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
-
-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:
-
-```
-/* LOCALIZE pseudo-element text below */
---sign-in-text: 'Sign-In';
---compose-text: 'Compose';
---save-search-text: 'Save Search';
---follow-tag-text: 'Follow Tag';
---comment-button-text: 'Comment';
---share-button-text: 'Share';
---quote-button-text: 'Quote';
---like-button-text: 'Like';
---dislike-button-text: 'Dislike';
---more-button-text: 'More';
---attendyes-button-text: 'Going';
---attendno-button-text: 'Can\'t Go';
---attendmaybe-button-text: 'Maybe';
---add-photo-button-text: 'Add Photos';
---follow-button-text: 'Follow';
---save-button-text: 'Save';
-```
-
-Note that you need to escape single or double quotes and you **cannot** use HTML entities like ` ` or `&` etc. Any unicode characters should be fine, however.
-
-Let's say you added a style block like this to translate the labels into Danish:
-
-```
-
-```
-
-Which would label the Action buttons under posts like this:
-
-{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}}{{/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.
-
-# FILE BUTTON HIDDEN
-
-
-
-Some users may notice that when they switch to _Bookface_ the "File Attachment" button in the post Compose browser is **missing**. This is _not_ a bug! It was a UX design decision to **purposely** hide that button. Why?
-
-There is no interface for actually managing the files you upload and attach. You cannot rename the files, you cannot delete them, and you cannot change the access permissions for them. If you accidentally upload a private file you can't remove it. It will accept several different file types, but uploaded videos have to be quite short due to file upload size limits, and even if that limit is set rather high, file uploads will often fail. If you are attaching both photos and files the interface can appear to be in photo mode but upload the image as a file instead. Again, you can never delete files uploaded in error. You would have to contact the server administrator and have them manually delete the file for you.
-
-Users apparently aren't even _supposed_ to be using this feature, especially to upload videos. According to the Friendica GitHub account the [lead developer said](https://github.com/friendica/friendica/issues/9910#issuecomment-774543151):
-
-> _"I'd suggest you use PeerTube to post video and reshare from your Friendica account since both support ActivityPub."_
-
-Presumably people should also be sharing other types of files by uploading them to a cloud drive somewhere and sharing a link to the file rather than uploading them to their Friendica account.
-
-Years ago there was a video upload button and section in Friendica. Those were removed because none of the current core developers have experience handling video files \[[source](https://github.com/friendica/friendica/issues/9910#issuecomment-774713091)\]. They were replaced with the "Media" section but there is still no interface for _managing_ uploaded files. Arguably if such an interface is not going to be added to Friendica, the File upload and attachment feature _should be removed_ as well.
-
-Bookface is intended to make Friendica friendlier to users coming from other platforms. Rather than expose new users to this incomplete, partially-broken feature a design decision was made to _hide_ the button.
-
-## Showing the File Button
-
-
-
-That said, _Bookface_ makes it easy for both Friendica Administrators or end-users to un-hide the button. _Bookface_ hides the button with a CSS variable at the top of each stylesheet. The block discussed above in the "[Customization](#customization)" section. Simply change `--attach-file-button: none`; to `--attach-file-button: block;` and the button will reappear.
-
-Friendica Admins can either change this at the top of each of the server-side scheme stylesheets or they can add a customization `