Mapping Flarum

Anomalum

A collaborative approach to understanding core HTML structure

It's really no secret that navigating the intricacies of Flarum can be quite daunting for new forum administrators.

It might be a little less daunting with a handy visual guide that demystifies the core HTML structure, possibly while also generally making customization and troubleshooting a breeze.

This is a resource project I recently began working on, which is intended for the Flarum community.

The overall mission is basically the creation of a user-friendly visual map of Flarum's core HTML structure.

The goal is to identify and document all core HTML components, including their selector codes and screenshots, to assist new Flarum-based forum administrators.

I think that creating a comprehensive visual map of Flarum's core HTML structure would be an ambitious and rewarding endeavor, not only potentially serving as a valuable Flarum community resource for new forum administrators but may also foster a sense of community collaboration.

Obviously Flarum is a fantastic modern forum software that utilizes a unique architecture, so it is essential for new administrators to understand it's core components.

Moreover, by mapping out the HTML structure, we could also generally enhance community members ability to:

a) Identify key components, as it would enable us to more readily recognize/identify the various elements that make up the Flarum forum interface, such as headers, footers, posts, user profiles, and etcetera.

b) Enhance customization: with a clear understanding of the HTML structure, admins could more effectively and independently manage their own forum's theme designs using custom css, less, html and JavaScript.

c) Facilitate troubleshooting: as it seems logical that a visual map could serve as a highly efficient quick reference for troubleshooting technical issues related to layout and design.

To further this initiative, I've created a dedicated thread at Anomalum where we can collectively document our findings and share insights. Your contributions would of course be invaluable in creating this comprehensive Flarum map.

Thank you very much for reading.
🙂Good fortune smiles upon you.

Subarist

Please forgive my straightforwardness, but the full-width layout of Anomalum currently feels uncomfortable.
The disproportionate text size easily causes a loss of focus.
Of course, this is just my personal feeling , perhaps because I’m using a 27” mac right now.

Having more beginner-friendly guides is always a plus. Thank you for your effort.

Anomalum

Subarist Oh there's no need for forgiveness. I appreciate your frank opinion.

Regarding the full width layout, I feel similarly uncomfortable with the default squished-in layout myself. Although I only ever use a 3"×6" Android device on mobile desktop view, and unfortunately I can only work with what I've got.

I'd certainly be happy to try working out how to optimize things like the text as it is presented on your 27" mac if you were able to assist, even just a screenshot would be enough to work off. Otherwise, by myself, I simply wouldn't know where to even begin since I just don't know how things might appear for you and therefore all I could do is arbitrarily guess.

Regardless, thank you for taking the time to provide feedback.

Subarist

I've attached a current screenshot.

At 100% display, you can see that the proportions of various text elements are not well-balanced.
There’s no need to tailor it to any specific screen size—instead, it should adapt to different resolutions.
Most modern display devices now have very high pixel densities, and an excessive focus on a full-width layout can sometimes have the opposite effect.

Anomalum

Subarist Are all desktop views like that? I mean, with the space around the outside?

Edit: (Tuesday 29 October 2024) To add; my above question is infact genuine.
The last time I ever laid eyes on any computer at all would've been roughly four—five years ago now and I haven't actually used one since around 2009-'10ish. I honestly have absolutely no idea about proper computers.

Now regarding my question as to whether all desktop views of Flarum-based forums are presented with the space around them (*as shown in @Subarist's screenshot). The reason I ask this is because I'm unsure if this is the normal presentation of content on desktops nowadays or not(?)

@Subarist may I ask what is meant by "At 100% display"? I'm not quite sure what you mean by that.

wylzn

Anomalum I mean this with nothing but love.. but your site is.. hurting my eyes. and my soul.
screenshot

Anomalum

wylzn 😂Yeah, it appears that the automated dark/light concept needs some more adjustments apparently. (*I'll get onto that right now)

Is it after 6pm where you are?
(*Currently still mid afternoon for me so I'm seeing the light mode version)

wylzn

Anomalum it was more on the size thats an issue :rofl:

wylzn

It's currently 2:56am!

Anomalum

wylzn Ahhh, so you're semi nocturnal too by the sounds of it. 😄 Glad I'm not the only one.

Edit: The Anomalum auto dark/light transition should be functioning more effectively now.

Anomalum

wylzn Honestly, these two desktop screenshots shared so far, by yourself and @Subarist ...🤭 both actually look pretty sweet in my (genuine) opinion aye. It's definitely far from finished though and yeah I certainly will admit I can sort of generally grasp and vaguely share a similar perspective as you've each expressed here regarding the dimensions presented for larger screens.
It's one of the more major items on the 'to-do' list...😅once I learn how to.

Capybara

Anomalum Welcome back, Vercin

Subarist

Anomalum
Hi, Anomalum

Perhaps you could try the following adjustments:

.IndexPage {
    /* width: 90%; */
    /* margin-left: 15%; */
    /* margin-right: 15%; */
    max-width: 1100px;
    margin: 0 auto;
}

.DiscussionListItem-title {
   /* font-size: 3vw; */
    font-size: 2em;
}

Setting a maximum width can prevent the layout from being too spread out on large screens.
For the title font size and any other CSS code you may have, try to avoid using the vw unit. Although many responsive design tutorials promote it as highly effective, it’s actually not easy to control.

Anomalum

Capybara Спасибо, капитан.
I still can't quite put my finger on what exactly it is, but your forum is a legit masterpiece... 😄and somehow it only keeps getting better and better every time I swing by.

The overall design is just downright stunning in my opinion. Then the content, omfg! It's incredibly immersive. I imagine there's very few at the cutting edge of online community fora management, however you're definitely among them.

Subarist

Capybara

How do you make "NPC" generate color?

Anomalum

Subarist Random question: Are you by any chance into Subarus? (eg: WRXs, BRZs, etc...)
It's the first thing that comes to mind from reading your username.

Subarist Setting a maximum width can prevent the layout from being too spread out on large screens.

Yeah, true aye, that is a very good point right there. 🙂Thanks

It's currently looking like this:

.IndexPage {
    width: 95%; /* Retained for <768px control */
    /* margin-left: 2.5%; */
    /* margin-right: 2.5%; */
    max-width: 1100px;
    margin: 0 auto;
}

Seems to be looking better now.

Wasn't so successful with the .DiscussionListItem-title font-size tweaks though. Things rapidly began spiraling out of control...😂 so I reverted back to vw units and did a little fine tuning...hopefully resulting with some degree of improvement...

Capybara

Subarist This is done manually 😅
[color=green]**NPC**[/color]

Subarist

Capybara
😵‍💫 I can’t believe I didn’t think of this…
By the way, forumspace is so beautiful. I’ve never seen such a well-balanced flarum site.
I always feel like all the members on your site are artists.