mirror of
https://gitlab.com/randompenguin/bookface.git
synced 2025-06-07 19:14:26 +02:00
Update Home
Random Penguin
parent
3c5a0ce486
commit
7d65b020bd
1 changed files with 73 additions and 33 deletions
88
Home.md
88
Home.md
|
|
@ -9,7 +9,7 @@
|
|||
|
||||
|
||||
|
||||
</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.
|
||||
|
||||
|
|
@ -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._
|
||||
|
||||
|
||||
|
|
@ -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,28 +77,68 @@ _(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).
|
||||
|
||||
{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.
|
||||
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.
|
||||
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
|
||||
|
||||
|
|
@ -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_
|
||||
|
||||
{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
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue