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 Customization

Random Penguin 2025-03-24 14:49:39 -05:00
parent eb82cb3a51
commit ccb8aabb66
2 changed files with 214 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.gitlab/redirects.yml

@ -1,4 +1,3 @@
--- ---
For-Friendica-Admins: Home/For-Friendica-Admins For-Friendica-Admins: Home/For-Friendica-Admins
For-Friendica-Users: Home/For-Friendica-Users For-Friendica-Users: Home/For-Friendica-Users
Customization: Home/Customization

214
Customization.md Normal file

@ -0,0 +1,214 @@
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:
![custom_colors.png](uploads/f7263e98363e4b3caf0f6f9e87bc4c4d/custom_colors.png)
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';
```
Note that you need to escape single or double quotes and you **cannot** use HTML entities like `&nbsp;` or `&amp;` 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';
}
</style>
```
Which would label the Action buttons under posts like this:
![localized_action_labels.png](uploads/52ca1b8c720dbdbb58798ae032dce565/localized_action_labels.png){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
![File_Button_Hidden.png](uploads/59b691b2f55040069686d744005be4de/File_Button_Hidden.png)
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](https://github.com/friendica/friendica/issues/9910#issuecomment-774543151):
> _"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](https://github.com/friendica/friendica/issues/9910#issuecomment-774713091)\]. 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
![File_Button_visible.png](uploads/6fec0e4cda8d39d53a52f436e739e483/File_Button_visible.png)
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](#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](#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.