The following instructions are for both server admins and end users, but the methods will be different depending on who is customizing Bookface.
COLORS & FONTS
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:
<style>
:root{
--global-font-family: “Courier New” , Courier, serif;
--nav-bg: black;
--nav-icon-color: darkorange;
--background-color: antiquewhite;
--content-bg: white;
--comment-bg: antiquewhite;
--font-color: saddlebrown;
--font-color-darker: brown;
--menu-background-hover-color: cornsilk;
--border-color: chocolate;
--count-color: cornsilk;
--count-bg: darkgoldenrod;
}
</style>
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}}<style>...</style>{{/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 <link> 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 <link> method. However, you'll need to edit the "Frio" theme /friendica/view/theme/frio/templates/head.tpl to add something like this:
<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
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';
--new-message-text: 'New Message';
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:
<style>
:root{
/* LOCALIZE pseudo-element text below */
--sign-in-text: Log-Ind';
--compose-text: 'Skrive';
--new-note-text: 'Ny Note';
--save-search-text: 'Gem Søgning';
--follow-tag-text: 'Følg Tag';
--comment-button-text: 'Svar';
--share-button-text: 'Dele';
--quote-button-text: 'Citere';
--like-button-text: 'Ligesom';
--dislike-button-text: 'Kan ikke lide';
--more-button-text: 'Mere';
--attendyes-button-text: 'Går;
--attendno-button-text: 'Kan ikke gå';
--attendmaybe-button-text: 'Måske';
--add-photo-button-text: 'Tilføj billeder';
--follow-button-text: 'Følge';
--save-button-text: 'Spare';
--new-message-text: 'Ny Besked';
}
</style>
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}}<style>...</style>{{/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:
"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]. 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" 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 <style> block to the "Frio" theme footer.tpl template file. Friendica users on a server that offers Bookface can override the setting for themselves by adding a custom user stylesheet using one of the methods under "Installing Bookface Userstyles" above. It can be as simple as this one line:
:root{--attach-file-button: block;}
Friendica users who are using the Userstyles version of Bookface can edit it at the top of their custom stylesheet.
If you know how to use your browser's Developer Tools you can also "Inspect" the "Photo" button in the Browser and find the "File" button next to it, then temporarily unhide it to upload or attach a file on a case-by-case basis.
Switching Friendica to any other scheme or theme will also reveal the button. Only Bookface hides it.