• Support

  • What extension or theme are they using?

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:

              OK, one more hurdle. To accomplish the solution discussed above, I edited my forum.css file manually. It works for a while, but within a few hours it reverts back to the old parameters (this has happened three times so far). Is there some automatic/scheduled process within Flarum that checks and rewrites forum.css on its own?

              If so, how can I make changes that will be permanent? Thanks in advance.

                endlessedits you should use the Custom CSS field of the admin panel to make manual changes. Just make sure the new CSS is equally or more specific than the existing CSS.

                If you have debug mode off, the CSS should only be re-generated when you enable or disable an extension or clear the cache. Extensions might clear the cache themselves but I don't know any that does so automatically.

                  Thanks Clark. I probably both cleared the cache and deactivated an extension at different times, which explains the reversion back to the original forum.css code. Will add the special code to the Custom CSS field (I have some simple modifications there already).

                  Great support -- I appreciate it.

                  This is posted simply to be helpful to anyone like me at my low level of CSS understanding (I can change color codes and add new/different fonts in basic css), not to complain or ask for more help.

                  The concept of "specificity" and overriding hard-coded Flarum css by adding to the Custom CSS box in Flarum Admin requires understanding first the basics and priorities of css elements (ID - CLASS - TYPE).

                  Without a mastery of these basic structural concepts, you are unlikely to be able to address the complex issues of "specificity" which are detailed here:

                  My advice is if simply adding to Custom CSS doesn't work for your situation, just edit forum.css manually, and whenever the workings of Flarum overwrite forum.css and eliminate your modifications, just re-upload your modified forum.css (it helps to save a backup somewhere) periodically as needed. (I guess I could figure out a cron job to just reload it automatically every hour or day). Of course, if you use Cloudflare, dont forget to turn on Developer Mode so the old cached reverted forum.css version doesn't keep appearing. Also don't forget to clear your browser cache entirely and restart the browser for the same reason.

                  Life's too short for me to learn most of CSS to prevent some letter tops from being cut off. But based on my experiments, the above instructions from Clark are accurate, and I was able to get part of the modifications added to Custom CSS to work, but not completely. I needed more understanding of "specificity" and I cannot afford to master CSS basics first in order to tackle it. If I understood the hierarchy of CSS elements and the relative weighting of duplicative elements, I probably wouldn't have had any questions in the first place.

                  This is a vivid example for me of how the last 5% of something eats up 95% of the time and why seemingly simple individual customizations can add enormous complexity to a "simple" piece of software.

                  Thanks again to all who helped. Go Flarum.

                    endlessedits you can postfix any css rule with !important to override anything in Flarum. Recommending to edit the auto compiled forum.css is like trying to replace the ocean with sweet water.

                    margin-top: 5px !important;