Friendica/bookface
1
0
Fork 1
mirror of https://gitlab.com/randompenguin/bookface.git synced 2025-06-07 19:14:26 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

Create For Friendica Users

Random Penguin 2025-03-24 14:51:23 -05:00
parent af9c09aeb3
commit c49645d864
2 changed files with 190 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.gitlab/redirects.yml

@ -1,2 +1 @@
--- --- {}
For-Friendica-Users: Home/For-Friendica-Users

189
For-Friendica-Users.md Normal file

@ -0,0 +1,189 @@
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.
## Switching on Desktop
1. Go to the _Main Menu -\> Settings_ under your profile name and picture.
![Desktop_Main_Menu.png](uploads/1c206a64f9dbb81f9e5616d66c0c7b2c/Desktop_Main_Menu.png){width="222" height="580"}
2. Select "Display" from the left sidebar Settings Menu.
![Desktop_Settings_Menu.png](uploads/0461243f9f7d0a1119d334b66a98302c/Desktop_Settings_Menu.png){width="284" height="517"}
3. On the "Display Settings" select the "Theme Customization" section.
![Desktop_Display_Settings.png](uploads/ac2f06f9539e0169a0cc86274ee7b753/Desktop_Display_Settings.png){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._
![Desktop_Pick_Bookface.png](uploads/2565f4c13992a8dc56baedc6c553b6c2/Desktop_Pick_Bookface.png){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."
![Mobile_Main_Menu.png](uploads/df3d4f0ecb079507f8173790a7226673/Mobile_Main_Menu.png){width="359" height="739"}
2. Tap the "\>\>" button in the top-left corner of the screen and select "Display" from the sidebar menu.
![Mobile_Settings_Menu.png](uploads/fcb063754a30680d99ce5285ef86d3d2/Mobile_Settings_Menu.png){width="359" height="739"}
3. Under the "Display Settings" tap to expand the "Theme Customization" sub-section.
# ![Mobile_Display_Settings.png](uploads/7b4ec05fde2193e17e8dae2725b97571/Mobile_Display_Settings.png){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._
![Mobile_Pick_Bookface.jpg](uploads/29a471929da5cc8e09b1b9e66ba63f43/Mobile_Pick_Bookface.jpg)
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.
![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_Editor.png](uploads/cd755468fe51e4e8ed7d233d9d31c758/Stylus_Editor.png)
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).
![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/d7ac9fb5da266a4b9314ad17bba18c9f/image.png)
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.
![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"}
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"}
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"}
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)
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.
![Desktop_Scheme_String.png](uploads/8133fb1bb8a09935adc441b7ca0d3299/Desktop_Scheme_String.png)
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.
![Desktop_Pick_Dark_Black.png](uploads/7f9ed2c98d230e3f7c8098e376965a2e/Desktop_Pick_Dark_Black.png){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._
![cover_photo.jpg](uploads/e11b8a97c242c084175d798fa7a341c0/cover_photo.jpg)
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.
![cover_photo_profile_description.png](uploads/2fa65f0163ee00cbe318a758255d9b29/cover_photo_profile_description.png){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.
![cover_photo_custom_field.png](uploads/ccdc412c22a32e19d89a17212f2b56f2/cover_photo_custom_field.png){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
![multi_cover_photos.jpg](uploads/dcd7153d90faf1ab9d5cce042b0c9b09/multi_cover_photos.jpg)
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]`
![multiple-cover-photos.png](uploads/c06759fa89a16d133657ac169bf48fa2/multiple-cover-photos.png){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.