How to disable specific graphic website elements from loading with uBlock Origin [and with a userstyle, in comment #5]

Community-Created Courses How To's
1

Hello all more serious Memrise website learners,

have you ever heard about this great add-on “uBlock Origin”?: uBlock Origin – Holen Sie sich diese Erweiterung für 🦊 Firefox (de)

I found this type of filter (Firefox) addon a view weeks ago because of a great forum/blog tip somewhere on the Internet.

You can use “uBlock Origin” with it’s pipette (element picker) tool and easily createable and editable custom filters (e.g cosmetic filters) to disable e.g quite annoying “Please register/login” Facebook account/site permanent popups (when you are not registered), or just any web elements which you do not like to be loaded.
You just have to click on the elements with the pipette to select the code part, modify the filter, add/save it…done.

The same applies to any pictures which you want to blend out…

I have seen several requests on 2+ community threads from Memrise website long-term higher rank power users and Overlands, how to be able to actually disable the new Ziggy mascot icons, until the rank icons are more user customizable (back to serious)…if this enhancement or user requested change is ever planned for the future by the Memrise team…

I would not say that I have any intentions to approve these Memrise frontend code changes myself. The Ziggy mascot icon is overlaying my own image on the left side.
.
.
Actually the best review Memrise solutions have been for me all the powerful user scripts, coded by Cooljingle and other script gods…they are the best workarounds for Memrise I can imagine (see for example how many limitations DuoLingo has got nowadays since at least 10-11++ user scripts do not work anymore because of new Scala code portal rewrite).
I definitely could not live without them.

I was successfully testing with uBlock Origin to remove the two Ziggy icons from my home and user profile Memrise website.
This also includes the course leaderboard user profiles, where the Ziggy icons showed up for each user.

Before sample:

xiX1w01.png1122×793 84.4 KB

uBlock in action:

3mPZZyC.png1122×793 63.8 KB

Actually you do not setup a network filter to a cloudfront.net hostname but you have to choose the cosmetic filter ## element from below.

You also can directly edit and save the text file in the “My filters” registers of the “uBlock Origin” plugin. See the solution.

After sample:

C6cBzhj.png1122×793 81.2 KB

After sample - without any (useless) picture stuff and Ziggy H2 text stuff:

EoAZ6AF.png1122×793 37.7 KB

Now we would have even enough space for the old global streak badget :slight_smile:

Therefore instead of endlessly waiting for the Memrise team to develop something what we really want (we were looking for small improvements, aren’t we?), according to the 1st ranking thread, we can “quick fix” the new frontend changes ourselves.

May the script power be with you :slight_smile:

2 Likes
2

(OT: how heavy is uBlock on your firefox? adblock got so bulky and cosuming that i had to take “lighter measures”)

3

If you’re an Adguard user, you can achieve the same thing, i.e. the removal of the awful Ziggy rank icon, using the following custom filter:

memrise.com##img.rank-icon

The avatar will still be displayed, but no longer overlaid with Ziggy.

4

There is another bigger problem with the course leader dashboards.

When I hover over the weekly/monthly top 10 learner names, their Ziggy level icon is also shown right besides their image.

As this is a dynamic popup window, I can not use the uBlock element picker as the popup window closes as soon as I try to move the mouse pointer over one of the two images.

Have you checked @ianmacd how your custom filter acts on those dashboard user popups for those images?
Or maybe you can find out what filter code does address these little Ziggy rank icons?

5

I have seen 2 places that have the avatar and 1 place that has the “Ziggy” text, the below targets those in a userstyle. Install with Stylish or similar. This should work in Firefox. In Chrome, in Stylish, I think you can just paste the img.rank… line into a new userstyle and have it apply to memrise.com.

@-moz-document domain("memrise.com") {

img.rank-icon, div.rank-badge img, div.rank-text h2{display: none;}

}
1 Like
6

thanks for the line, pasted it, the big one and the one who supposed to have done my learning are gone

7

Hi @Thomas.Heiss,

I’ve just checked and my filter works on the leaderboards, too. In fact, it will work anywhere on memrise.com where images with a class of rank-icon are used, filtering them instead of displaying them.

Adguard really is a super product, not just for busting ads, but for rewriting and blocking HTML, too. It’s great for cases like this. The Chrome extension implementation of it is completely free of charge.

I used to use separate products for blocking ads and rewriting HTML, but Adguard does both really well and you can write very complex filters for it.

1 Like
8

The final “uBlock Origin” working solution in the “My filters” looks like that:

! Ziggy icon from the left on home dashboard
www.memrise.com##.rank-icon

! top right user profile Ziggy badget
www.memrise.com##.rank-badge.profile-col

! H2 “Ziggy” text in top right user profile
www.memrise.com##.rank-text.profile-col > h2

1 Like
9

Thanks for your feedback.

Finally with the correct ## cosmetic uBlock filters the smaller Ziggy icons are also filtered successfully in the course leaderboard user profiles :slight_smile:

I updated my above text from my #1 posting and also added #8 “uBlock Origin” solution.