friendica - Link to source

BookLook Theme Early Preview

I've mentioned to a few people that I've been working on a new theme for Friendica, based on "Vier" but with some features from "Frio" and styling cues from the "Bookface" scheme I made for it, plus some new stuff.

This is a PREVIEW of that theme. It's still very much a work-in-progress! It's not even to a point where I can release the code for others to test. There is still a LOT to do.

I've been doing frontend web design and development professionally for a long time. Over the years I've made dozens of themes, child themes, and plugins for clients running WordPress, so I'm no stranger to PHP and jQuery. Friendica, though, doesn't have a robust theme system like WordPress. So for just about everything I've wanted to do I needed to pick my way through the code and figure it out, because the documentation is outdated, thin, or non-existent.

Friendica also has a million pieces, so I never feel like I'm getting anywhere with this theme because every time I turn around there's something else that needs attention. I hate to say it, but it's been the most frustrating thing I've ever worked on and I've nearly given up a dozen times! I might still. This is what I do for a living so paying jobs would have to take priority over working on this for free.

Which is why I won't try to predict if or even when it will be finished.

As for WHY I started making this? I felt I'd taken the "Bookface" scheme as far as it can go given the limitation of only being able to use CSS. People had asked if I could do this or that with it and I'd have to tell them "No" because what they wanted required changing backend code or the HTML structure and all I had to work with was a stylesheet.

If you're on one of a couple of the larger Friendica instances you've probably experienced first hand how the "Frio" theme can breaks on an overloaded server. That's probably because it loads about a dozen additional plugins/themes/frameworks on top of what the Friendica core loads. If it fails to load some of them the theme breaks. By contrast the older "Vier" theme is pretty simple. It doesn't really load anything new. Which makes it faster loading and more stable, or at least less prone to breaking on a stressed server.

Which is why I decided to use "Vier" as the base for my new theme. It's actually more of a "hybrid" theme because I'm incorporating some of the features from "Frio" that I like. But I needed to figure out how to do that without Bootstrap because I was determined not to add any new plugins, libraries, or frameworks.

Features:

  • Accent Color creates site-wide color scheme
  • Forkawesome icons replaced with Phosphor icons
  • Default font is "Lexend" designed from improved readability.
  • Integrated Coverphoto add-on functionality
  • Integrated Zen Postbox add-on functionality
  • Advanced Theme Settings similar to my Bookface Custom add-on
  • Verified Blue Checkmarks (optional as it only works for local accounts)
  • Post headers now show author @handle
  • Option to hide local server from @handle
  • Options to show navbar icons, text, or both
  • Option for alternative Emoji Picker integrated to theme
  • Accessibility improvements for keyboard navigation
  • Redesigned Hovercards (popover contact info)
  • Three Options for Composing & Editing:
    • In Thread
    • Separate Page
    • Modal Window
  • Location button can use device location services (if you've enabled it in browser for site)
  • Post engagement/responses click for popover list
  • Post Composer available on Community page (Local Server & Global)
  • Character count added to comment editor
  • Photo and Attachments filebrowser has tabbed interface
  • Attachments filebrowser can filter files by type
  • Privacy Settings update padlock icon on editor
  • Easier access to some settings (Widgets, Profile photo, etc.)
  • "Frio" style user Settings and Admin screens
  • Single navigation toolbar with options to make it "fixed" or scroll away.


As for what's still left to to do? I have yet to style most of the sub-pages for each section, I have to complete the mobile UI layout, create options for all of the settings for the theme, make the "dark" and "auto" versions, get some of the features listed above working properly, and probably a ton of other little things I won't know I need to do until I stumble across them.

#Friendica @Friendica Developers

In BookLook the accent color creates a full color scheme
Redesgn of the main Network feeds, with various features highlighted.
On Event Posts click on the engagement count to see a popover list of who is going, can't go, or is a solid maybe.
Click on the comments engagement count and it shows you a list of who has replied and how many times each of them has posted in the thread.
Redesign of the post header.
Options related to Author are on the Hovercard menu and options related to post to the "More" menu.
Sample Hovercard for someone you are friended to already.
Sample Hovercard for someone to whom you are not connected.
Redesigned Photo Browser with tabbed interface.
Redesigned Photo Browser with tabbed interface on a sub-folder Album.
Redesigned File Attachment browser can now filter files by type.
BookLook compose modal window
BookLook's Emoji Picker adds up to a dozen recently used emoji.
Modals stack. Permissions changes the padlock icon on the Compose window button
Profile Conversations showing new layout with coverphoto header.
#friendica @Friendica Developers
This entry was edited (5 days ago)
in reply to Nanook

friendica - Link to source

Random Penguin

The "Account Types" and "Trending Tags" widgets are visible in a couple of the screencaps I posted. In the Settings it says "Own Contacts" does not appear on all the channels, I don't know which ones it does. I did have all the widgets enabled. They're also collapsed by default in this theme, if you expand one it remembers that (basically it works the opposite of Vier and Frio). Not just for a cleaner look but because having all the widgets enabled and expanded is kind of overwhelming for new users.
in reply to Random Penguin

friendica - Link to source

Random Penguin

In BookLook there will be an option to enable showing verified checkmarks next to @handles in threads. That information does not federate, so it would only work for local accounts on the same server. I put it on the handle line because that is not user editable and can't be changed like their username, which some people decorate with all sorts of emojis - including ones that look like verified checkmarks.

I was thinking of making this feature a bit more useful by showing different ones for Moderators and Administrators. A gold seal seems like an easy choice for an Admin, but I'm not sure whether to show a seal or a shield for Moderators or what color it should be. "Silver" is basically gray, which is usually used for disabled elements. The same blue as User self-verified checkmarks could work, or maybe green? That's nice and friendly.

Also, it's possible that an Admin or Moderator may not have self-verified a homepage, so I'd probably also need versions without checkmarks for those roles.

Which would you like to see in BookLook?

in reply to Random Penguin

friendica - Link to source

utopiArte

By contrast the older "Vier" theme is pretty simple. It doesn't really load anything new. Which makes it faster loading and more stable, or at least less prone to breaking on a stressed server.
Which is why I decided to use "Vier" as the base for my new theme.

Sry if this comes over like repeatedly but all this sounds to me like best could be starting the friendica theme thing from scratch. Even more if the documentation isn't as it should be and we just found our staatl. geprüft und annerkannten Friendica Front-end Developer CEO.

How about creating a inical teared down completely minimalistic friendica core theme and mount on top of it a addon system of themes @Random Penguin?

Is that possible, maybe even reasonable and faster than trying to work thru old not properly documented theme stuff?

@Random Penguin
in reply to utopiArte

friendica - Link to source

Random Penguin

I thought about just scratch building a theme up from what the Friendica core does. There's definitely something to be said for a modular approach both for development and performance, though it would also introduce a lot of inconsistency to the UX across servers. Consistent of experience is why I'm integrating some of the functionality of three of my add-ons to the theme. But if the coverphoto or postbox add-ons are already loaded it would defer to them.

Ultimately I decided to start with "Vier" as my base because it's already a functional, battle-tested theme, but also because there's no real documentation on ALL of the many "moving parts" in Friendica, most of which I assume have been addressed in "Vier" by this point. In the absence of documentation to build from scratch I opted for a "working model" to learn how themes work in Friendica.

It might be better for me to say "Vier" was my starting point rather than this theme is based on "Vier." By the time I'm done with this, though, I don't know how much of "Vier" will actually be left.

I'm not sure what "and we just found our staatl. geprüft und annerkannten Friendica Front-end Developer CEO" means when Friendica doesn't even have an org behind it?

in reply to Random Penguin

friendica - Link to source

utopiArte

btw @Random Penguin

Friendica, though, doesn't have a robust theme system like WordPress. So for just about everything I've wanted to do I needed to pick my way through the code and figure it out, because the documentation is outdated, thin, or non-existent.

Actually from the get go Mike always stated that he needed some one to take care of themes while he himself would stay with duopuntocero not because it was nice or up to date with the Zeitgeist of themes but that's how he could work best.
Just for your back ground knowledge.

@Random Penguin

Friendica Developers reshared this.

⇧