Hi everyone,

As I enjoy flarum so much, I recently had a thought about its tag design. Frequently on my community, I search for the best css enhancements to make nested tags (primary + subtags) more comprehensive, especially to differentiate the subtags from the secondary tags. Recently, it led me to a solution I can only simulate. Before discussing it, I show you the prototype:


Well, I just love it.

Technically, what would this do:

Whenever a primary tag and one or more sub-tag are set, the sub-tag border (1px, solid) and its foreground color are set to the parent tag color.

Why?

  • clear
  • simple
  • beautiful

Should it be added to the tag extension?

Cons: Maybe it's too specific. I can't imagine one situation where it would be undesired for a specific UI/design reason, but maybe you have one to share?

Pros: I would love to see this feature bundled to the original tag extension, because I think this is one of its job to offer clean ways to clarify the different tag types by the UI.

And maybe it could be a general option in the tag admin panel, like automatic nested tag design for sub-tags, with a possibility to override it on per-case.

And if it's not?

IDK, maybe this would become my very first extension attempt!! But I'm far from being a dev, so I guess I should finish my PhD first 😀

Well, whatever happens to this idea I'm happy to let it here, at least I'll remember!

    ornanovitch that sounds like a great idea for an extension!

    Child tags can have background colors. We made the choice to not give them any on this forum. That's something extra to take into account in the styling (background with tag color and border with parent color?)

    I feel like an ideal solution would be to expose all those colors as CSS variables or data attributes so custom CSS can decide which property to reuse as either background or border. I don't think CSS can read data attributes though, and I have never tried to use CSS variables for something like this.

    I wouldn't be against this being the default design in Flarum either. Having the background of the tag transparent might impact readability on some customized page background colors though. Changing the text color could also hurt readability... But that's already an issue with background colors.

        clarkwinkelmann Child tags can have background colors. We made the choice to not give them any on this forum. That's something extra to take into account in the styling (background with tag color and border with parent color?)

        Possibilities are endless, but I implicitly suggested in my prototype to remove the background in such a case, as I like the total opacity/total transparency contrast effect. But I agree this aspect should also be taken into account.

        clarkwinkelmann Changing the text color could also hurt readability... But that's already an issue with background colors.

        Indeed, bg/fg colors are an endless UI war... (On this particular subject, the ultimate solution would be to have an automatic fg color hue adjusting its contrast with the bg). But that's another story

              One option could also be to let the administrator choose the border/text color and background color separately for each individual tag, this would allow both options without having to introduce any new "checkbox"-style settings.

                clarkwinkelmann It would be both very tedious and very flexible, so why not! But the large advantage of an automatic behavior would be to not have to redefine those settings in case the primary tag had changed. A sort of design consistency by default.

                  clarkwinkelmann ornanovitch

                  I found a simpler compromise: let's say that if (and only if) a sub-tag doesn't have a background color set (like on Discuss except for Extensions>Incompatible, the parent tag's color is taken to make a border, but the default bg/fg remains to avoid contrast inconsistency. Take a look 🙂

                  I think that would be enough to have a nice differentiation between sub-tags and parent/secondary tags (even if I still prefer the OP's screenshots 😁 )

                      11 days later
                      2 months later
                      ornanovitch changed the title to Nested tag>child-tags UI proposal .

                      I'd be glad if someone could change this discussion's tag to dev>theming, as I'll use this thread to share my first extension development adventure 🕵️‍♂️