What extension or theme are they using?

Wlork

If you don't want to put tags on the side, you can use this CSS until this extension out....

@media (min-width: 768px) {
  .IndexPage .DiscussionListItem-info > .item-tags, .UserPage .DiscussionListItem-info > .item-tags {
    position: initial !important;
    -webkit-mask-image: unset !important;
  }
}

Wlork

@luceos Any news about this extension ? 🙂

luceos

Wlork no news yet.

Subarist

Wlork
I just made some attempts with CSS, it's not very difficult.
Is there anything special about it?

Wlork

Subarist Oh ? How did you do that ? 🙂

HasanMerkit

Subarist sometimes CSS is magic 🙂

Subarist

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.

luceos

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.

dragsugur

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?

treyb

Thank you @luceos

luceos

dragsugur I can look into that yeah. I am a bit swamped so, it might take a bit 🙈

dragsugur

luceos hey, did you get any time to look into this?

ernestdefoe

@luceos any chance of this extension being available on the managed hosting?

tolgaaaltas

ernestdefoe You can install via Extension Manager.

luceos

ernestdefoe yeah no problem.

tolgaaaltas Ernest implies managed flarum hosting 😊

ernestdefoe

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.

ernestdefoe

luceos thanks @luceos I'm really enjoying the level of service I’m getting from you guys.

endlessedits

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:

Subarist

endlessedits

Oh, yes. It comes from a tip by @RelicSystem. It seems to be causing the issue. Increasing the top space seems to improve it:
@ernestdefoe

.DiscussionListItem .TagsUnderDiscussion {
padding-top: 1px !important;
}

RelicSystem

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.

endlessedits

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:

luceos

Feel free to do a PR, otherwise I'll change it when I can.

RelicSystem

luceos PR was done last week - based on my limited testing of course.

« Previous Page Next Page »