Create For Friendica Admins

For-Friendica-Admins.md

@@ -0,0 +1,141 @@
+# FOR FRIENDICA ADMINS
+
+Instructions on How to Install _Bookface_ on your server.
+
+Drop these six files into _/friendica/view/theme/frio/scheme/_:
+
+* bookface_auto.css
+* bookface_auto.php
+* bookface_dark.css
+* bookface_dark.php
+* bookface_light.css
+* bookface_light.php
+
+That will make the Bookface options available to users on your server. If you want to set one of the Bookface options as the default scheme for your server:
+
+1. Go to _Main Menu \> Admin_
+
+   ![Admin_Main_Menu.png](uploads/f75c1686b932373ebe829d2857d38388/Admin_Main_Menu.png){width="208" height="695"}
+2. Then _Admin Menu \> Theme Selection_
+
+   ![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.
+
+   ![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.
+
+   ![Admin_Theme_Settings.png](uploads/79bf7893911e5fb9900856bed1344f01/Admin_Theme_Settings.png){width="665" height="734"}
+
+# CUSTOMIZATION
+
+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.