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 t
... Show more...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
Michael πΊπ¦
in reply to Random Penguin • • •It's looking really great! I would love to see your work incorporated into the official release.
As far as I understand, you need support concerning the handling of
git. My hope is that eventually someone will provide help.wilhelm likes this.
Random Penguin
in reply to Michael πΊπ¦ • • •Thanks @Michael πΊπ¦ I can definitely use the encouragement. Working on this has been kind of a slog.
@Marcus offered to help with the Git stuff I don't get (haha).
Nanook
in reply to Random Penguin • • •Nanook
in reply to Random Penguin • • •Roland Häderπ©πͺ likes this.
Random Penguin
in reply to Nanook • • •Random Penguin
in reply to Random Penguin • • •Roland Häderπ©πͺ likes this.
Random Penguin
in reply to Random Penguin • • •Roland Häderπ©πͺ likes this.
Nanook
in reply to Random Penguin • • •Roland Häderπ©πͺ likes this.
Anomaly βοΈ
in reply to Random Penguin • • •I like it very much, thanks for your work π§, I hope to try it soon
Andy HΞ3
in reply to Random Penguin • • •Thank you so much @Random Penguin for your hard work!! ππ π
Booklook looks amazing; can't wait to try it.
I would like to nominate you for a new award: Friendica Front-end Developer of the Year. You would truly deserve it! π
jakob π¦πΉ β likes this.
reshared this
jakob π¦πΉ β reshared this.
utopiArte
in reply to Random Penguin • • •Roland Häderπ©πͺ likes this.
Random Penguin
in reply to Random Penguin • • •Random Penguin
in reply to 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?
Roland Häderπ©πͺ likes this.
utopiArte
in reply to Random Penguin • • •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 • • •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 wha
... Show more...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?
jakob π¦πΉ β
in reply to Random Penguin • • •@Random Penguin @utopiArte
This
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?
only means, you are VERY welcome, and the friendica-community is thankful for your work on the project πππ
It's german humor... π
Friendica Developers reshared this.
Nanook
in reply to jakob π¦πΉ β • • •utopiArte
in reply to Nanook • • •jakob wrote:
true.
And actually it was written in italic irony, as this profile states:
> [i] wie [italic] => most likely a humorous ironic underlying tone
@Nanook @jakob π¦πΉ β @Random Penguin
utopiArte
in reply to Random Penguin • • •btw @Random Penguin
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.
Roland Häderπ©πͺ likes this.
Roland HΓ€derπ©πͺ
in reply to utopiArte • • •Friendica Developers reshared this.