For Friendica Users

Friendica/bookface

Fork 1

mirror of https://gitlab.com/randompenguin/bookface.git synced 2025-06-07 11:04:27 +02:00

Table of Contents

Switching on Desktop
Switching on Mobile

Mobile_Display_Settings.png

Installing Bookface Userstyles

Firefox

Built-In Method
Stylus Add-On Method

Google Chrome
Safari
Post-Install for Userstyles

COVER PHOTOS

On ALL Profile Pages
ONLY On Profile Page
Multiple Cover Photos

POSTBOXES

How to Use Postboxes

Available Color Options
Content Restrictions

Step-By-Step Visual Example
Special Use Cases

Famous Quotes
Multiple Postboxes

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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

Go to the Main Menu -> Settings under your profile name and picture.

{width="222" height="580"}
Select "Display" from the left sidebar Settings Menu.

{width="284" height="517"}
On the "Display Settings" select the "Theme Customization" section.

{width="673" height="509"}
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"}
Click the "Submit" button and you will now be using the Bookface scheme you selected!

Switching on Mobile

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"}
Tap the ">>" button in the top-left corner of the screen and select "Display" from the sidebar menu.

{width="359" height="739"}
Under the "Display Settings" tap to expand the "Theme Customization" sub-section.
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.
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

Type about:support into the address bar.
Find "Profile folder" and open that location.
Create a folder named "chrome" there if one doesn't already exist (it probably doesn't if you've never done this before).
Create a file inside that folder named "userContent.css"
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).

Copy and Paste the entire bookface_light_userstyles.css or bookface_dark_userstyles.css inside the {...}
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).
Restart Firefox and go to your Friendica instance.
Continue with the "Post Install" instructions below.

Stylus Add-On Method

Install the Stylus Add-On for Firefox and enable it.
Go to your Friendica instance.
Go to the "puzzle" icon and select "Stylus" then click the name.

{width="376" height="203"}
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"}
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:

Install the Stylus Extension and enable it.
Go to your Friendica instance
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"}
then Copy and Past the code from either the bookface_light_userstyles.css or bookface_dark_userstyles.css into the Stylus Extension.
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:

Go to the App Store and install the Userscripts Extension for Safari.
Open Safari and go to Settings.

{width="282" height="330"}
Make sure Userscripts is activated in Extensions.

{width="453" height="346"}
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"}
Open the Userscripts Extension and create a new site-specific entry.

{width="159" height="162"}
Copy and Paste the entire contents of the bookface_light_userstyles.css or bookface_dark_userstyles.css into the extension entry.
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.

In Friendica go to Main Menu > Settings > Display > Theme Customizations
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"}
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

Go to Settings > Profile > Personal
In the "Description" box add something like:

[class=coverphoto][img=https://friendica.server/photo/1649cc674810612350.png]Cover photo description alt-text here[/img][/class]
"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

Go to Settings > Profile > Custom Profile Fields
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]
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.
"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.

POSTBOXES

You have, no doubt, seen social media posts sharing a screencap of some large text against a color background. These often become memes.

What you may not know is that many of them originated on Facebook and got shared as screencaps on other social media platforms because there was no way to share them directly. Facebook has a feature to add a custom background to a text-only post under 132 characters long. It is unclear if Meta actually has a name for this feature, but we need to call it something so here they will be referred to as "Postboxes." Because they are colorful boxes with a post inside.

Starting with Bookface version 1.6 now Friendica will have Postboxes too! Styling similar to the Facebook solid color and gradient backgrounds have been added to the Bookface stylesheets.

Right now Postbox is exclusively available for people using the Bookface scheme in the Friendica webapp, either on desktop or mobile.

When a Postbox post is shared to another platform like Mastodon, Sharkey, etc., the Postbox styling does not go with it. The same is true for anyone viewing the post in a third-party app, because none of them support Postbox styling, at least not yet.

**NOTE: **There are known problems with Postboxes when shared to Disapora or Hubzilla. Diaspora is not parsing the Postbox or its content and displays the raw code. Hubzilla displays the content, but also displays the raw Postbox [class] BBcode before and after it.

There are two Friendica add-ons server administrators can install to add global support for Postbox styling. The "Postbox" add-on simply adds a stylesheet to the <head> element. It provides no interface for creating Postboxes, but users can still create them manually with BBcode. The other is the "Zen Postbox" add-on which not only adds the stylesheet to the <head> it also adds a Jot Plugin button to the message composer with a menu of all the available Postbox styles.

How to Use Postboxes

To make use of a Friendica Postbox simply wrap the text inside a Postbox Class BBcode like this:

[class=postbox-red]This is the wrapped text[/class]

Available Color Options

In the [class] opener add postbox- plus any one of the color names after the "=" sign.

Solid color names are being normalized to HTML color names. The old names are in parentheses next to the new names to which they've been mapped.

Solid Color Backgrounds:

.postbox-black
.postbox-cornflowerblue (.postbox-blue)
.postbox-darkblue (.postbox-ocean)
.postbox-darkgray
.postbox-darkorange (.postbox-orange)
.postbox-darkred
.postbox-darkslateblue
.postbox-forestgreen (.postbox-forest)
.postbox-gold
.postbox-goldenrod
.postbox-honeydew
.postbox-hotpink
.postbox-lavender
.postbox-lightpink
.postbox-lightyellow
.postbox-limegreen (.postbox-green)
.postbox-lightsalmon (.postbox-salmon)
.postbox-mediumaquamarine
.postbox-mediumslateblue
.postbox-mediumvioletred
.postbox-mintcream
.postbox-olivedrab
.postbox-palegreen
.postbox-peachpuff
.postbox-pink
.postbox-purple
.postbox-red
.postbox-seagreen
.postbox-sienna
.postbox-skyblue
.postbox-thistle
.postbox-violet
.postbox-whitesmoke
.postbox-yellowgreen

Gradient Backgrounds:

.postbox-aurora
.postbox-bluegray
.postbox-graygrey (.postbox-darkgray)
.postbox-grayblack
.postbox-greengray
.postbox-lavendergray
.postbox-minty
.postbox-mintgray
.postbox-rainbow
.postbox-redblue
.postbox-sherbet (.postbox-sherbert)
.postbox-spectrum
.postbox-strawberrycream
.postbox-sunset
.postbox-tealblue
.postbox-tealgray
.postbox-violets
.postbox-violetblue

Pattern Backgrounds:

The patterns are accomplished with pure CSS code. There are no images involved.

.postbox-blueprint
.postbox-birds
.postbox-checkered
.postbox-cubes
.postbox-lemonlime
.postbox-gingham
.postbox-grid
.postbox-hearts
.postbox-honeycomb
.postbox-notebook
.postbox-plaid
.postbox-polkadots
.postbox-shadedots
.postbox-shadowbox
.postbox-stars
.postbox-warpgrid
.postbox-wavy

Animated Backgrounds:

These are ONLY available on servers with the Postbox or Zen Postbox add-on installed. The animations use SVG images and CSS and should work in all modern browsers, but may not work or work well in older browsers or on mobile devices.

.postbox-anigradient
.postbox-blob
.postbox-colorfade
.postbox-gridrunner
.postbox-heartbeat
.postbox-moonrise
.postbox-rainy
.postbox-rocket
.postbox-snowy
.postbox-sunrise
.postbox-waves

Content Restrictions

Friendica's Postbox is a bit more forgiving as it allows for more than text-only content. However it does not work with most of the Friendica formatting due to the way BBcode is parsed.

BBcodes you CANNOT put inside a Postbox:

[class], which means you can’t nest Postboxes
```
hr
```
[h1],[h2],[h3], etc…
[table],[tr],[th],[td]
[list],[ul],[ol]
```
quote
```
```
abstract
```
```
spoiler
```
```
map
```
```
code
```

BBcodes that do not work as intended inside a Postbox:

```
pre
```
```
noparse
```
```
nobb
```

The text will show but will be styled and centered.

BBcodes that DO WORK inside a Postbox:

[b], [i], [u], [o], [s] (bold has no visible effect)
```
url
```
```
img
```
```
audio
```
```
video
```

Plus any plain text, including emoji

If you are using Markdown formatting what you can and can’t put in a Postbox is similar, with the exception that (because of how Markdown is parsed into BBcode) you can’t have both a URL and an image in the same Postbox. You can however put inline code in a Postbox with Markdown where BBcode cannot.

Step-By-Step Visual Example

Compose It:

Preview It

Post it!

To anyone on Friendica who is not using the Bookface scheme, however, it won't be "Postboxed" at all. This is what that post would look like to someone using the stock "Frio" theme with the "Light" scheme:

Note: the exception would be if your server admin has implemented the optional "Postbox" or "Zen Postbox" add-ons for Friendica which enable Postbox styling regardless of the theme or scheme.

Special Use Cases

Famous Quotes

One neat thing you can do with a Postbox is use it for a quote. You've no doubt seen many social media posts with a quote from a famous person and their image. Since Postboxes support adding images you can create a nice looking quote box without using a third-party service to generate and link an image.

And this is what it looks like in the stock "Frio" theme using the "Light" scheme:

Again, as noted above, the Postbox styling will not be seen by anyone on a third-party app or another platform, and will only be seen by other Friendica users if they are using the Bookface scheme or if their server administrator has enabled Postbox styling for all users.

NOTE: there is apparently currently a bug in Friendica that causes the raw [class]...[/class] Postbox code to be sent to Diaspora and Hubzilla. If you are connected to anyone on those platforms you may want to avoid using the Postbox feature until it is fixed.

Multiple Postboxes

You can have multiple Postboxes in a single post, each with a different style applied.

Be careful when you add multiple post boxes to put a space or line return between them or they will bunch up in a row instead of a column: