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

Update Home

Random Penguin 2025-03-02 22:11:37 +00:00
parent 3c5a0ce486
commit 7d65b020bd
1 changed files with 73 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

88
Home.md

@ -9,7 +9,7 @@
![Bookface_Dark.png](https://gitlab.com/randompenguin/bookface/-/raw/main/Bookface_Dark.png?ref_type=heads) ![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. 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. 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} ![Desktop_Main_Menu.png](uploads/1c206a64f9dbb81f9e5616d66c0c7b2c/Desktop_Main_Menu.png){width="222" height="580"}
2. Select "Display" from the left sidebar Settings Menu. 2. Select "Display" from the left sidebar Settings Menu.
![Desktop_Settings_Menu.png](uploads/0461243f9f7d0a1119d334b66a98302c/Desktop_Settings_Menu.png){width=284 height=517} ![Desktop_Settings_Menu.png](uploads/0461243f9f7d0a1119d334b66a98302c/Desktop_Settings_Menu.png){width="284" height="517"}
3. On the "Display Settings" select the "Theme Customization" section. 3. On the "Display Settings" select the "Theme Customization" section.
![Desktop_Display_Settings.png](uploads/ac2f06f9539e0169a0cc86274ee7b753/Desktop_Display_Settings.png){width=673 height=509} ![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._ 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} ![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! 5. Click the "Submit" button and you will now be using the _Bookface_ scheme you selected!
## Switching on Mobile ## 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." 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/d27521d6bc34fe02cfec408934d53527/Mobile_Main_Menu.png){width=359 height=739} ![Mobile_Main_Menu.png](uploads/d27521d6bc34fe02cfec408934d53527/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. 2. Tap the "\>\>" button in the top-left corner of the screen and select "Display" from the sidebar menu.
![Mobile_Settings_Menu.png](uploads/b8bbaceb273e2baafb1e3127f19b829f/Mobile_Settings_Menu.png){width=359 height=739} ![Mobile_Settings_Menu.png](uploads/b8bbaceb273e2baafb1e3127f19b829f/Mobile_Settings_Menu.png){width="359" height="739"}
3. Under the "Display Settings" tap to expand the "Theme Customization" sub-section. 3. Under the "Display Settings" tap to expand the "Theme Customization" sub-section.
# ![Mobile_Pick_Bookface.png](uploads/889d96da3a95db52ade1bf80284fbd14/Mobile_Pick_Bookface.png){width=359 height=739} # ![Mobile_Pick_Bookface.png](uploads/889d96da3a95db52ade1bf80284fbd14/Mobile_Pick_Bookface.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._ 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) ![Mobile_Pick_Bookface.jpg](uploads/29a471929da5cc8e09b1b9e66ba63f43/Mobile_Pick_Bookface.jpg)
@ -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. 1. Type `about:support` into the address bar.
2. Find "Profile folder" and open that location. 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). 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: 5. Open that file in a text editor and add a line like this:
``` ```
@ -77,28 +77,68 @@ _(change "friendica.world" to the domain of the server you use)._
#### Stylus Add-On Method #### Stylus Add-On Method
1. Install the Stylus Add-On for Firefox and enable it. 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 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. 3. Go to the "puzzle" icon and select "Stylus" then click the name.
4. Continue with the "Post Install" instructions below.
![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/cc739202d4897717d2ea9d5d81dfcf44/Stylus_Editor.png)
6. Continue with the "Post Install" instructions below.
### Google Chrome ### Google Chrome
For Google Chrome (or any Chromium-based web browser) you will need to: 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 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. 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).
4. Continue with the "Post Install" instructions below.
![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)
5. Continue with the "Post Install" instructions below.
### Safari ### 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: 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. 1. Go to the App Store and install the [Userscripts Extension for Safari](https://apps.apple.com/us/app/userscripts/id1463298887).
2. Despite the name it can also do site-specific stylesheets. Go to your Friendica instance. 2. Open Safari and go to Settings.
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_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 ### Post-Install for Userstyles
@ -164,16 +204,16 @@ That will make the Bookface options available to users on your server. If you w
1. Go to _Main Menu \> Admin_ 1. Go to _Main Menu \> Admin_
![Admin_Main_Menu.png](uploads/f75c1686b932373ebe829d2857d38388/Admin_Main_Menu.png){width=208 height=695} ![Admin_Main_Menu.png](uploads/f75c1686b932373ebe829d2857d38388/Admin_Main_Menu.png){width="208" height="695"}
2. Then _Admin Menu \> Theme Selection_ 2. Then _Admin Menu \> Theme Selection_
![Admin_Menu_Theme.png](uploads/b5d4bf6f4dedef5da778daa9e12111df/Admin_Menu_Theme.png){width=280 height=443} ![Admin_Menu_Theme.png](uploads/b5d4bf6f4dedef5da778daa9e12111df/Admin_Menu_Theme.png){width="280" height="443"}
3. On the "Administration - Theme Selection" page click the "frio" link text. 3. On the "Administration - Theme Selection" page click the "frio" link text.
![Admin_Theme_Selection.png](uploads/01360376b4f45f561fcd5dc070e250c3/Admin_Theme_Selection.png){width=665 height=244} ![Admin_Theme_Selection.png](uploads/01360376b4f45f561fcd5dc070e250c3/Admin_Theme_Selection.png){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. 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.
![Admin_Theme_Settings.png](uploads/79bf7893911e5fb9900856bed1344f01/Admin_Theme_Settings.png){width=665 height=734} ![Admin_Theme_Settings.png](uploads/79bf7893911e5fb9900856bed1344f01/Admin_Theme_Settings.png){width="665" height="734"}
# CUSTOMIZATION # CUSTOMIZATION