• Support

  • What extension or theme are they using?

Wlork
Forgive my poor English. The general direction is as follows:
.item-tags: Set it to position: absolute and then specify an appropriate position for it.
.DiscussionListItem-content: You can use padding or other methods to make room at the bottom for placing the tag.

    Sorry, I noticed it wasn't that hard but finding the right modifications in a theme that - in all honesty - is swamped with them, wasn't straightforward 🙈

    Here it is:

    https://packagist.org/packages/flarum-com/tags-under-discussion

    composer require flarum-com/tags-under-discussion:"*"

    It also does some sorting based on primary versus sub-tags by the way.

      luceos a bit out of this topic but have you also make an extension to show all of the tags in the tag list for this customer of yours? and if so, is it possible for you to share that part also?

          tolgaaaltas yeah since I’m using the managed Flarum hosting I don’t get the shiny Extension Manger extension but if something happens I have a team of core Flarum developers to fix the issues. Well within reason of course. Having access to the Extension Manager would be nice but I’m sure there’s a very good reason why they don’t include it.

            Thanks @treyb for raising the question, @luceos for writing/providing the extension and Orion browser for opening up their customization for tags-under-discussion. (I am now aware of and trying out Orion browser as a result. Great so far!)

            I know beggars can't be choosers, but my installation of it looks great except on Safari where the tops of all the tag characters are cut off a bit, and on Firefox most of the tags are perfectly rendered, but a percentage of them are cut off in the same way, albeit less severely.

            I figured out to go into forum.css in the Access folder and I made some arbitrary changes to elements inside ".TagsUnderDiscussion" entries.

            These changes all showed up (as a test I removed the switch to all uppercase, decreased the font size from 13px to 10px, and reduced the margin-bottom), but they did not solve the problem (tops of lettering in tags still cut off, even with a smaller font).

            I have only very basic css understanding. Can someone please suggest a simple css element that I could change to provide more space somewhere so that the tag text is not crimped at the top?

            The extension is such a nice addition I may keep it even if the tops are crimped, but it would be better of course to learn how to tweak it and have my Flarum be at its best look.

            Here is the Firefox example -- the first listing is crimped and the next one is perfect.

            Thanks very much.

            Safari example:

              seems to come from
              .DiscussionListItem {
              .TagsUnderDiscussion {
              display: inline-block !important;
              margin-top: -8px !important;
              margin-bottom: 8px !important;
              vertical-align: middle;
              }
              }

              tinkering with the top and bottom margins seems to resolve the issue.

                Thanks to all of you for the quick and helpful responses.

                Once I developed a routine to clear all relevant caches after each experimental change (so I could see the impact they made), I settled on the following modification of:

                .DiscussionListItem {
                .TagsUnderDiscussion {
                display: inline-block !important;
                margin-top: -8px !important;
                margin-bottom: 8px !important;
                vertical-align: middle;
                }
                }

                which RelicSystem posted above.

                Modified to avoid cutting off tops of letters--

                .DiscussionListItem {
                .TagsUnderDiscussion {
                display: inline-block !important;
                margin-top: -2px !important; (changed '8' to '2')
                margin-bottom: 8px !important;
                vertical-align: middle; (changed 'middle' to 'bottom')
                }
                }

                This allowed the text-based tags to be seen completely. Then I could make further modifications to the size and capitalization etc.

                I hope this helps another newb. I also belatedly discovered that "Show Page Source" in the browser will let you pull up the forum.css file and make live WYSIWYG changes to it, which can then be changed manually in the forum.css file.

                How it looks now: