# Community.meb.org Modification (userstyles!)

**URL:** <https://community.metabrainz.org/t/community-meb-org-modification-userstyles/14371>\
**Category:** Site discussion\
**Tags:** userstyles\
**Created:** [March 29, 2016, 5:34pm UTC](https://community.metabrainz.org/t/community-meb-org-modification-userstyles/14371 "2016-03-29T17:34:09Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ApeKattQuest\_MonkeyPython](https://community.metabrainz.org/user_avatar/community.metabrainz.org/apekattquest_monkeypython/32/81496_2.png) [@ApeKattQuest\_MonkeyPython](https://community.metabrainz.org/u/ApeKattQuest_MonkeyPython)\
**Post date:** [March 29, 2016, 5:34pm UTC](https://community.metabrainz.org/t/community-meb-org-modification-userstyles/14371/1 "2016-03-29T17:34:09Z")

</div>

~~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](http://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:

```css
    @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~~ filter ~~s~~ with adblock,  
on the [Userspage](https://community.metabrainz.org/users?order=topics_entered&period=all):

`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](http://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”

---

<div class="post-metadata">

**Author:** ![outsidecontext](https://community.metabrainz.org/user_avatar/community.metabrainz.org/outsidecontext/32/90_2.png) [@outsidecontext](https://community.metabrainz.org/u/outsidecontext)\
**Post date:** [March 29, 2016, 7:24pm UTC](https://community.metabrainz.org/t/community-meb-org-modification-userstyles/14371/2 "2016-03-29T19:24:19Z")

</div>

> [@CatCat](#):
>
> 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…

Something like

```css
.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 */
```

````

---

<div class="post-metadata">

**Author:** ![jesus2099](https://community.metabrainz.org/user_avatar/community.metabrainz.org/jesus2099/32/36_2.png) [@jesus2099](https://community.metabrainz.org/u/jesus2099)\
**Post date:** [February 17, 2020, 4:43pm UTC](https://community.metabrainz.org/t/community-meb-org-modification-userstyles/14371/3 "2020-02-17T16:43:11Z")

</div>

I was always bored to not be able to see and understand [abbreviations](https://community.metabrainz.org/t/abbreviations-in-community-posts/379352) when I am on mobile.

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

```css
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](https://github.com/openstyles/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](https://community.metabrainz.org/uploads/default/original/3X/d/8/d82208a3146a186436b580861c2fc6a72a560f4c.jpeg)  
You can see my trademark yellow background.

---

<div class="post-metadata">

**Author:** ![outsidecontext](https://community.metabrainz.org/user_avatar/community.metabrainz.org/outsidecontext/32/90_2.png) [@outsidecontext](https://community.metabrainz.org/u/outsidecontext)\
**Post date:** [February 17, 2020, 6:40pm UTC](https://community.metabrainz.org/t/community-meb-org-modification-userstyles/14371/4 "2020-02-17T18:40:20Z")

</div>

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 😃

---

<div class="post-metadata">

**Author:** ![jesus2099](https://community.metabrainz.org/user_avatar/community.metabrainz.org/jesus2099/32/36_2.png) [@jesus2099](https://community.metabrainz.org/u/jesus2099)\
**Post date:** [February 1, 2021, 3:29pm UTC](https://community.metabrainz.org/t/community-meb-org-modification-userstyles/14371/5 "2021-02-01T15:29:49Z")

</div>

I have installed [a new mobile browser](https://community.metabrainz.org/t/user-scripts-on-mobile/134406/14) and realised it was not that easy to manually add [my above user CSS](https://community.metabrainz.org/t/community-meb-org-modification-userstyles/14371/3).  
So I have saved it in my konami-command repo as [metabrainz-discourse\_EXPAND-ABBREVIATIONS.user.css](https://github.com/jesus2099/konami-command/blob/master/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. 🤭  
Oh, we don’t have this one.  
Test 2: MBS.

---

<div class="post-metadata">

**Author:** ![jesus2099](https://community.metabrainz.org/user_avatar/community.metabrainz.org/jesus2099/32/36_2.png) [@jesus2099](https://community.metabrainz.org/u/jesus2099)\
**Post date:** [September 24, 2022, 4:49pm UTC](https://community.metabrainz.org/t/community-meb-org-modification-userstyles/14371/6 "2022-09-24T16:49:36Z")

</div>

> [@outsidecontext](#):
>
> Ffx mobile

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](https://community.metabrainz.org/t/user-scripts-on-mobile/134406/17).

---

<div class="post-metadata">

**Author:** ![jesus2099](https://community.metabrainz.org/user_avatar/community.metabrainz.org/jesus2099/32/36_2.png) [@jesus2099](https://community.metabrainz.org/u/jesus2099)\
**Post date:** [August 22, 2024, 4:42pm UTC](https://community.metabrainz.org/t/community-meb-org-modification-userstyles/14371/7 "2024-08-22T16:42:04Z")

</div>

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](http://MusicBrainz.org) (for name variation), and other sites.  
It’s why I have recently removed the yellow colour. 😅

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?

> <https://github.com/jesus2099/konami-command/issues/848#issuecomment-2305180114>
>
> Using my inline "tooltips" (abbr title reveal) changes the flow and, when the ab…breviation is near the end of a row, it appears and immediately disappears.
> 
> It's a long-standing bug but, as it does not often happen, I did not bother. 
> 
> As today I need this same feature on all websites, not only on MB Discourse, I want to first fix this.
