Community.meb.org Modification (userstyles!)

hi! I am CatQuest, Kind Grump Extraordinaire!
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

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 */
```
4 Likes

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.


You can see my trademark yellow background.

5 Likes

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

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

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.