2. Go to _Settings > Display > Theme Customization > Appearance_
1. Select either "Bookface Light", "Bookface Dark", or "Bookface Auto"
2. (optional) Select Accent Color
3. click "Submit" button.
## CUSTOMIZATION/LOCALIZATION
Starting with Version 1.3 it is much easier for server admins to customize and localize Bookface. Everything you can safely change is now defined in the CSS variables at the top of the stylsheets. You could also override these with another stylesheet loaded after Bookface the redefines the variables.
### LOCALIZATION
Bookface uses a number of pseudo-elements to label buttons in the Frio theme. You can easily change these to say something else or to 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';
### CUSTOMIZATION
Some people have found the accent color engagement counts on action buttons distracting or busy. You can easily change it be redefining the variables. You could either set it to another already defined variable or set it 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 */
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 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
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 available to users of your site. Don't assume they have it installed on their system! Either load them 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_ file to add something like this:
If the font you want to use is local you'd just need to add something like this to the top of the Bookface stylesheets:
@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;
Some fonts may cause misalignment problems in various places, make sure you test the font before deploying it for everyone.
### COVER PHOTOS
From Bookface 1.3 it supports adding a "Cover Photo" to profiles. There are two places you can add the Cover Photo, depending on whether you want it used on all of your profile section pages or if you want it to appear on ONLY your actual profile page.
Note that this feature ONLY works is recent, modern browsers! Every *current* and *supported* desktop and mobile version should be able to show it, but nothing *unsupoorted* nor released before 2022 will (see caniuse.com entry for "has()" for specific verssions).
For people who are not using the Bookface scheme they will simply see a thumbnail of your Cover Photo in the sidebar with your Profile Description. For people who ARE using the Bookface scheme they will see your Cover Photo on your Profile, Conversations, etc. pages that have a sidebar.
#### ON JUST YOUR PROFILE PAGE
1. Go to _Settings > Profile > Custom Profile Fields_
2. Enter nothing in the "Label" field.
3. Enter something like this in the "Value" field:
4. Check the Permissions for the field. If for some reason you only want people in certain Circles to see your Cover Photo you can set that here.
5. Submit your changes.
People who are not using the Bookface scheme will see a thumbnail of your Cover Photo in your Profile details. The Cover Photo will only appear on your Profile page.
#### Multiple Cover Photos
Technically you can have one Cover Photo for our actual Profile page by putting it in a Custom Field and another one in the Profile Description that will be shown on the other profile pages. But if you want to get really creative you can also have multiple images per Cover Photo.
While not really recommended you can place up to four images in the Cover Photo container and Bookface will show them as a collage of stripes. For example:
Extras spaces are okay, but just make sure there are no carriage returns or other elements inside `[class]..[/class]` or it will mis-count the images and size them wrong. Also keep in mind people not using Bookface will see three thumbnail images on your profile, only Bookface users will see the striped collage.
## GENERAL NOTES:
* This theme HIDES the attachment upload button in the file browser since there is no way to manage/delete uploaded files, and this is confusing to users. If you want to show this button anyway change the CSS variable `--attach-file-button` from "none" to "block" at the top of the stylesheets.
SVG masks appear to be terribly broken in Safari (well WebKit in general). maskContentUnits won't work properly on Mobile Safari and that causes the mask to be in the wrong position to...mask. If there is a <base> element in the HTML it can mess up references to SVG images that exist within the DOM. You have to make sure your server is actually serving up .svg files with the mimetype `"image/svg+xml"` or it won't work. Your clipPath element has to be inside a <def> element. Safari apparently wants `"xlink:href"` instead of just "href" which means you also need to namespace for `"xmlns:xlink="http://www.w3.org/1999/xlink"`
If the logo was just an inline SVG set to use the fill color that would be fine. But all the logo SVGs are for masking. There are two PNG images for masks, which DO work in Safari, but they look too blurry. So I switched it to the icon font logo. Which at least is crisp, though it is a bit heavier/thicker/bolder than the SVG version.
2. Old iOS Devices
There are numerous places in the stylesheets that use `":has()"` and older versions of Safari bundled with outdated versions of iOS do not understand it and will not display things correctly. If you have, for example, and old iPad Mini stuck on an earlier version of iOS, say 9.2.x, you may encounter random un-clickable and un-scrollable elements with any "frio" scheme. Older devices cannot display the new Cover Photo feature correctly.
4. Phones with Narrow Screens
You may notice on many (if not most) phones in portrait mode the Action Buttons do not have text labels on them. If you turn your phone to landscape mode the labels will become visible. This is on purpose! There simply is not enough room to display the labels in a viewport narrower than 400 pixels wide, especially if ALL possible buttons are enabled and being shown. Initially I tried styling that only removed the labels if there were too many buttons. But the inconsistency made it look like the CSS was broken or something. Also some mobile browsers couldn't understand `":has()"` or `":nth-of-type/:last-of-type"` etc. The best solution across devices was to simply *not* show the labels for any of them.
## CONTRIBUTING
To make updates and maintenance easier the line numbers between the "Light" and "Dark" stylesheets have been synchronized, and the first half of the "Auto" version matches the "Light" stylesheet. This way if you change one you can more easily find the same line in the corresponding files to make the same change there, or if it is not needed for that one, add comment lines to keep the line numbers in sync.
In some places fallbacks are included to accommodate older browsers or mobile devices that do not understand more modern code. In general the target for this scheme are browsers released within the last couple of years.
Just because it looks right or works in your preferred browser or device doesn't mean it will work for everyone. Try to thoroughly *test* your edits in desktop and mobile Chromium-based, Mozilla-based, and Webkit-based browsers before submitting a pull-request.
## HOW SCHEMES WORK IN FRIO
Each "Frio" theme "scheme" consists of two files with the same name but a different extension, one is `.php` and the other is `.css` but the latter is not loaded directly as a stylesheet. These two files must be inside the `/frio/shemes/` folder, but will not be discovered by the theme unless they have a properly formatted header:
**Example .php file header:**
/*
* Copyright (C) 2010-2025, the Friendica project
* SPDX-FileCopyrightText: 2010-2025 the Friendica project
TThe PHP file get read into the _/frio/style.php_ file, to get any color variables that have been set. **You cannot add new variables to your PHP file!** The `style.php` defines these variables in an array (to which your scheme cannot add new entries). These are the ones you can set in your PHP file:
$nav_bg
$nav_icon_color
$nav_icon_hover_color
$link_color
$link_hover_color
$menu_background_hover_color
$nav_icon_color
$menu_background_hover_color
$background_color
$contentbg_transp
$background_image
$background_size_img
$background_repeat
$login_bg_image
$login_bg_color
$font_color_darker
$font_color_lighter
$font_color
Next, the `style.php` reads in the *contents* of your CSS file and concatenates it to the end of the Frio theme _/frio/css/style.css_. Then it does a simple string replace operation on the merged stylesheet contents to replace the variable names with the values set in your PHP scheme file. This is essentially variable validation and why you can't add new variables, they will neither get read in nor replaced. Finally the `style.php` generates the merged stylesheet.
If you want users to be able to pick one of the predefined "Accent Color" options your PHP file needs to include:
if ($customColor){ $customColor = new Color(''.$customColor.''); }
I could *only* get "Link Color" to work by explicitly casting the type to string when creating a new Color object. Then you need to conditionally check for a "Link Color" and if one is found use it, but if it is not found then fallback to using some other color (ideally the "Accent Color"):
While you cannot simply define new PHP variables for setting colors, etc., you *can* do that in your scheme stylesheet. At the beginning simply define them in a `:root{..}` entry like so:
--my-custom-variable-name: #hexcolor;
And then use it in your stylesheet like so:
.classname {
color: var(--my-custom-variable-name);
}
I figured out how the "Frio" theme worked by looking at the code. I may not be 100% correct about it since I did not create the theme. If someone knows more and I'm wrong about any of this please correct this document at https://gitlab.com/randompenguin/bookface
