Community.meb.org Modification (userstyles!)

Site discussion
1

hi! I am CatQuest, Kind Grump Extraordinaire!
Edit: Hi! I’m ApeKattQuest, MonkeyPython!

Being an irritatingly incompatible person I’ve found ways to modify the community.metabrainz.org site to fit my eh, “needs” somewhat…
By using Userstyles!

However Freso told me to post about it o_O so here we are:

    @namespace url(http://www.w3.org/1999/xhtml);

    @-moz-document domain("community.metabrainz.org") {

    img.avatar {
        border-radius: 0% 0% 0% 0%;
    }

    .docked .d-header {
        position: absolute;
    }

    .badge-wrapper {
        white-space: normal;
    }

    }

This userstyle makes the avatars square (instead of round) and
makes the header non-sticky (so it doesn’t take up so much screen realestate)

Additionally I have created a few filters with adblock,
on the Userspage:

community.metabrainz.org##.me:first-child

This will remove the first persistent entry of your user, so it doesn’t always stick to the top, but leaves the entry of your user where it should be in the list (according to which column you’re sorting by.)

Now, sure, many might not have use for these two things, but I found them irritating and was very happy about finding ways to fix it for myself! now if I could only find a way to turn off the “blue colour on the linked post text” effect when clicking a forum link… and make icons into text…

I think this can become a topic where we share different userstyle and userscripts written for community.metabrainz.org itself, to improve, enhance and to remove vexations!

so um, this was my very first topic :s … :D?









TAGS: “Modify!, modify, community site modification, userstyles, userscripts”

5 Likes
2

Something like

.topic-body.highlighted {
    background-color: transparent;
}

should do the trick. Oh, and you can enable syntax highlighting for CSS if you mark your code block with css like so:

```css
/* Your CSS goes here */
```
3 Likes
3

I was always bored to not be able to see and understand abbreviations when I am on mobile.

As this week I am almost only in mobile, I decided to find a way and found this:

abbr[title]:hover {
    border: 2px solid white;
    color: #333;
    background: #FF6;
}
abbr[title]:hover:after {
    content: " (" attr(title) ")";
}

It worked on my Firefox for Android with Stylus.

Just touch any abbreviation that has that characteristical dotted bottom border to see its meaning.
It reverts to normal display as soon as you click anywhere else.

Screenshot_2020-02-18-00-10-13-950_org.mozilla.firefox
Screenshot_2020-02-18-00-10-13-950_org.mozilla.firefox720×1520 295 KB

You can see my trademark yellow background.

5 Likes
4

This is awesome, thank you so much. As I am most of the time reading the community pages on mobile this is a real win. Also I did not even know the user styles worked on Ffx mobile :smiley:

1 Like
5

I have installed a new mobile browser and realised it was not that easy to manually add my above user CSS.
So I have saved it in my konami-command repo as metabrainz-discourse_EXPAND-ABBREVIATIONS.user.css file that anyone can now install by clicking the Raw button.

Here is a test, to see if it works, click that abbreviation: LOL. :face_with_hand_over_mouth:
Oh, we don’t have this one.
Test 2: MBS.

1 Like
6

It used to work in Firefox 68 but it does not work in later versions.
But I am now using Kiwi Browser, in which Stylus and Violentmonkey do work preferctly.

7

Hi @outsidecontext and others interested.

I was little bit bothered of when the abbreviation is near the end of the line, you have real difficulties to display its meaning, inline. Because it appears/disappears, making the text jiggle, and you don’t have time to read it.

So I was about to fix that issue by extracting the meaning as a tooltip, outside of the text flow.

While doing this, I thought of making it a general userstyle, not only MetaBrainz Discourse, as I am missing also this on MusicBrainz.org (for name variation), and other sites.
It’s why I have recently removed the yellow colour. :sweat_smile:

Could you have a look at this new version, at the end of the video, from 1:08 to 1:30 and tell me if you would find it convenient?

2 Likes