As some of you know I'm working implementing some of my work with the #Bookface scheme for "Frio" into a new theme based on "Vier" but incorporating some things from Frio and some new things too.

One of those things is a new icon set because Friendica's icons are looking pretty dated. You may have noticed just about everything these days has shifted to open, line icons. So I settled on Phosphor Icons because they're a really nice, free, open source set under an MIT license. I'm also using Lexend for my main font. It's scientifically designed to improve readability, looks modern, and it's based on one of my favorite old project fonts, Quicksand. Incidentally it was only after making these choices I found out Sharkey is already using this combo, so it may look familiar to some of you already.

Rather than copy ALL of the templates into the new theme to edit the icon class names, I put together a stylesheet that automatically replaces the old Font Awesome 3 and Fork Awesome 1.2 (which is based on Font Awesome 4/5) with Phosphor icons. Except for the cases where Phosphor doesn't have a viable alternative (mostly Brand and Accessibility icons). That alone really wakes things up to a modern look!

While I want this new theme to feel more light and airy, I'm leaning toward mostly using the "Phosphor-Bold" variant as the "Regular" set has pretty thin lines and looks too light next to text in the Lexend font. You can seem that in the Post Menu comparison up above. I've also considered just using the "Fill" variant for drop-down menus. If you look at Facebook they use open, line icons where they are by themselves, bolder or filled versions in circle buttons, and filled icons in drop-down menus. I may do something similar, I'm not sure. Though I like the look of the "Phosphor-Bold" in the drop-down menu. It's heavy enough to look like it goes with the Lexend text next to it, but not too heavy, which is the feel I get from the "Phosphor-Fill" icons.

As for the "Action Buttons" you use to interact with posts, for those I'm leaning toward using "Phosphor-Regular" for those but if I do probably "Phosphor-Fill" for the rollover effect as a color change on rollover is hard to see with the thinner line width. "Active" buttons (ones you've already clicked before on that post) would be in your personal choice "Accent" color. You'll notice no little engagement counts on them either. Too many people have found them overly distracting or visually cluttering so I'm not going to do that in this new theme.

There's still no room on narrow mobile screens in portrait for the button labels, but here are the screencaps of the font weight and rollover options:

I'm sticking with the icon font instead of switching to SVG sprites because Vier uses icon fonts already and it's simply easier to retrofit it with the Phosphor Icons font.

I was initially just going to adapt the Bookface look to a new stylesheet for Vier. But it quickly became apparent to do some of the things I want I need to alter the structure of the theme not just the appearance. "Vier" is an old theme but it's proven more stable than Frio, uses fewer resources, and it loads and renders faster. Mostly because it doesn't have any frameworks or add any new JS or jQuery. "Frio" is a Bootstrap theme and has some other frameworks/libraries and is quite complex and code-heavy. For building a new theme I had to decide if I was sticking with Frio and was going to try and strip all that out or if I should just base on Vier since it already didn't have any of that in it.

As I said, what I'm making is more of a blend of Vier and Frio layout and features, but I'm also not going to add any frameworks or libraries or jQuery, though there may be a little vanilla JS just to make things work. And custom backend code to implement some things via hooks that aren't in the Friendica core.

The working theme name is BookLook though that could change.

The Work-In-Progress theme is not yet to a point where I'm posting code or sharing it for testing. It's been slow going and there's still LOTS to do! I don't have a timeline on when this will be ready for that or completed. But I finally reached the milestone (or maybe it's a millstone?) of swapping out the icons and would appreciate any thoughts you might have about the direction I'm going with it.

@Friendica Developers @Friendica Support

This update has a LOT of changes and fixes in it! I think I got in everything everyone who gave me feedback asked for (check the README file "Changelog" section for details). Lots of attention paid to making buttons, tabs, and drop-down appearance consistent, and lots of new CSS variables for customization plus a new option for customizing Bookface (more on that in a moment).

Bookface 1.8 has been tested with both the current stable 2024.12 and 2025.7 Release Candidate versions.

The most obvious change you'll probably notice is that the responses below posts and comments now look completely different:

And below an Event Post:

If multiple people engaged with the post in a certain way you no longer have to click the count to see the list, it's a popover that appears on hover (active on touch devices). This is a lot cleaner and more consistent with how these are displayed on other social media platforms.

You'll also notice that the Main Menu missing icons are in place. This is a change that's coming in the next Friendica release anyway, but Bookface lets you have it right now:

Someone specifically asked whether the main navigation buttons could have labels on them:

I didn't turn it on by default, but nav button labels are now coded into Bookface and if you're using CSS variable customization they're easy to turn on:

:root {
--show-navbar-labels: block;
}

The label text is also customizable. Until now the only way to implement such customizations was either for a server admin to manually put them into the header or footer sitewide or for individual users to put them in a user content stylesheet just for your web browser. That's why I'm also releasing a new Friendica addon called "Bookface Custom" that, if your server admin installs it, allows you to customized every one of the Bookface CSS variables to your heart's content.

Get 'em while they're hot:

* Bookface 1.8
* Bookface User Styles 1.8
* Bookface Custom Addon 1.0

@Friendica Admins @Friendica Support @Friendica Developers
#Bookface #Friendica #themes #addons

Bookface 1.6 introduces a new feature called "Postboxes" that allows you to create a post with a colorful background like a similar feature on Facebook. It's built into the Bookface scheme, but I also created TWO add-ons for Friendica if a server administrator wants to roll it out for all of their users regardless of what theme they prefer.

Postbox: simply adds a minified stylesheet to the head with the Postbox styling. It doesn’t add any interface for creating a Postbox, but users can still create them manually with BBcode.

Zen Postbox: adds the minified stylesheet to the head, but also adds a tool to the post composer to insert a Postbox or wrap selected text in one.

To manually create a Postbox just wrap your text in the Postbox class BBcode like this:

[class=postbox-redblue]Text that will be wrapped[/class]

Make sure to PREVIEW it before you post it! While Friendica's Postboxes do allow more content than just plain text, certain formatting blocks can't be placed inside them.

If everything looks good, go ahead an POST it. Anyone using Bookface or any server using either the "Postbox" or "Zen Postbox" add-ons will see it like this:

If the "Zen Postbox" add-on is enabled it adds a button for wrapping/inserting a Postbox to the post editor:

Full Documentation of the "Zen Postbox" add-on is available as a GitLab Wiki.

Keep in mind that other servers that don't implement Postbox styling, other platforms (like Mastodon), and third-party apps will not show these colored backgrounds. This feature only works in the Friendica webapp/website.

#bookface #friendica @Friendica Admins @Friendica Developers