Pygoscelis Papua

2025-02-11 23:40:29

BOOKFACE BIG UPDATE!

First of all thank you for all the interest in this “Frio” theme scheme. I was concerned that people might have so much animosity toward Meta that a scheme to make Friendica look more like Facebook would be ill received. I originally made “Bookface” as a user content script just so I would feel more “at home” on Friendica. And I’m still using it that way myself because the instance I’m on does not offer this scheme as an option yet.

Version 1.3 represents a massive rewrite with the introduction of new features, like support for Profile Cover Photos and an “Auto” version that can detect if your operating system is set to Light Mode or Dark Mode and automatically apply the correct mode to Friendica, plus a completely New Mobile View for phones and tablets that aims to make it look and function a lot more like an mobile app. The user content stylesheets for client-side use have also been updated with the same changes, if that’s how you use Bookface. I have incorporated a ton of your feedback into this update, which I thank you for! There are also over 30 tweaks and fixes in this update.

While this is still a work-in-progress (but what on the web isn’t?) Bookface is already being used in production on some Friendica instances so I’d say it’s generally probably safe to use, but there could be issues I haven't anticipated, particularly with whatever add-ons are enabled on any given server.

Keep in mind “Bookface” is intended for recent browsers. By which I mean those that were released in the last year or two. Because I want to leverage some of the more advanced things CSS can now do. But if you have a mobile device that’s stuck running an old browser I’ve added some fallbacks so it’s still at least usable, but I’ve intentionally ignored any browser that nobody should really be using anymore for anything (like Internet Explorer). Presumably if you choose to roll with retro gear you probably don’t care about making Friendica look modern anyway.

I’ll do more detailed posts about each of these new features, but here’s an overview:

BETTER MOBILE MODE!

You may have noticed there isn’t an “official” Friendica mobile app and the webapp feels pretty clunky and outdated. You could, of course, use Relatica or Raccoon for an actual native mobile app experience, but I’ve notice a lot of people (myself included) are trying to use the webapp. And it needs improvement.

I redesigned the mobile view to look and function a lot more like people expect a mobile app to work these days. One specific thing that was asked for was a way to get the toolbars out of the way in landscape mode, particularly on phones with small screens. The mobile landscape view now hides the toolbars and presents you with a limited set of buttons down the left and right sides of the screen if, in landscape orientation, the viewport is less than 400 pixels high. That’s going to be the majority of phones on the market today. Need more controls? Just rotate your phone back to portrait.

I’ve extensively tested this new UI on more than a half a dozen actual mobile devices, including an iPhone 5s, iPhone 8, two different recent Samsung phones, and older iPad Mini, two Android tablets, and two old Android phones.

EDIT: Post with more details about the new Mobile UI

AUTO VERSION!

More than one of you specifically asked for a version that would automatically switch between Light or Dark depending on which mode you have set on your device. It was tricky to implement given all the colors that are set server-side in PHP variables, but I came up with a pure-CSS way of doing it. It doesn’t even need to set a browser cookie. Enjoy going over to the Dark Side. Or Light Side. Whichever.

Unfortunately there is no auto version of the user content stylesheets for the client-side. The client-side styles require the underlying “Frio” theme be set to Light, Dark, Black, or Custom (which is based on Light). There is no way for a client-side stylesheet to automatically switch the server-side theme scheme, so there will never be an auto version of the user stylesheets.

LOCALIZATION & CUSTOMIZATION

Under the Settings > Display > Theme Customization options you could previously only set the Accent Colors. There was a "Link Color" box below that but it didn't do anything. Well, now it does. You can set almost any color you please ("almost" because it does error-catching to make sure you don't set it to the same color as the background).

I’ve moved as much as possible into CSS variables at the top of the stylesheets, so modifying Bookface to your liking is easier than ever. Just change the variable in that one place and everything else follows suit.

One thing in particular I’ve noticed from people’s screenshots is the engagement counts on Action Buttons being changed to match the button color or made black, etc., to make them less distracting. Personally I like them being in my Accent Color so I can quickly see which posts/comments are getting engagement and check them out. But I can also understand that all those colored “dots” could be distracting while scrolling. So I added CSS variables for “count-color” and "count-bg" that let you change the engagement count tex and background color to whatever you want.

But I took it beyond just the colors. Bookface sets a bunch of labels as pseudo-elements, and they are in English because that’s the only language I know. I saw a comment the other day from a German user on a German server that has implemented Bookface note that the labels were in English and thought they should be localized. Well, yes, they *should* and now I made it super easy for server admins to do that!

Just change the CSS variables for the labels at the top of the stylesheets to your language!

Bookface Action Button labels localized (if the translation is laughably wrong blame Google Translate, I don't know any other languages)

COVER PHOTOS!

Every other social media platform seems to have a “Cover Photo/Header Picture” for your profile page. But not Friendica. 🙁 Until now! You can add images to your profile description and/or custom profile fields. You can also put things inside “class” containers. So I coded Bookface to detect a class container named “coverphoto” and treat whatever image(s) are in it as your big, bold cover picture.

You can also decide, depending on where you place it, whether it’s only visible on your actual “Profile” page or if it’s visible on all your profile pages, or if you want to show different cover photos on your profile and the other profile pages. If you’re really indecisive you can place up to 4 images in the container and Bookface will turn them into a striped collage.

As for what that looks like to other people who aren’t using Bookface? Well, they still see a thumbnail of your image(s) in your profile, it just won’t look really cool to them.

EDIT: Post with more details about Cover Photos

PRETTY TAGS!

What is social media without hashtags right? And it’s cool that in the Fediverse you can follow a hashtag like you follow a person. But Friendica’s tags look...kinda bad. A bit distracting. Too small. Too hard to read. And some people really go wild with a wall of tags in their posts. I’m apparently not the only one who thinks they could use some improvements. There are discussions about this in Friendica’s GitHub issues going back several years.

First of all, I don’t think we need the little lightning bolt or person icons on them anymore. It’s 2025, people know what a tag and a mention are. I also replaced the “(x)” on categories with an “X” icon. Next I made the tags the same size they are on Mastodon, which is also makes much better touch-targets on mobile devices. To make them less distracting I gave them an “open” design, and recoded them so only the tag you are hovering/focused on switches to a “filled” design. For consistency I kept similar colors to the existing “Frio” tags, but adjusted them for better contrast against either the Light or Dark mode versions.

The image shows how the tags appear in both Light and Dark modes and against the different background colors for posts and comments. The first row for each background color is how they normally appear, the second is the rollover effect when you hover on them.

GO GET IT!

12 Feb 25: LINKS BELOW UPDATED FOR VERSION 1.4

Server-side: If you run a Friendica instance.
Bookface v1.4 Scheme Files (gitlab.com/randompenguin/bookf…)

Client-side: If the Friendica instance you're on doesn't offer Bookface.
Bookface v1.4 Userstyless (gitlab.com/randompenguin/users…)

Everything is well-documented in the README files.