CODEWITHSUNDEEP
adblock
Vitalii
Vitalii

Reputation: 11091

Adblock. Add css class or remove attribute from element

Is it possible to add css rule to an element at some page by adblock? Something like this

#myElement {
    color: white !important;
}

I tried to find a script that updates style of this element on page load but it seems that it is not a best way.

Upvotes: 23

Views: 28196

Answers (5)

andromeda947
andromeda947

Reputation: 1113

It's possible to do it on uBlock Origin and AdGuard. Each has its own syntax for the styling rules, but each is now capable understanding both.

Here is an example of a CSS rule that changes Twitter background:

twitter.com#$#body.logged-in{ background-color: #8c8787 !important; }

The styling filters should be constructed like this:

<domain> + #$# + <selector> + { <style> }

Just avoid puting a space between the selector and the opening brace. Cause it can give you some trouble. Reference:

https://github.com/gorhill/uBlock/wiki/Static-filter-syntax#subjectstylearg, https://adguard.com/kb/general/ad-filtering/create-own-filters/#cosmetic-css-rules

Upvotes: 41

asyncClipboard
asyncClipboard

Reputation: 31

or remove attribute from element

uBlock Origin and AdGuard added the option to remove attributes and specific classes from sites.

example.com###myElement:remove-attr(id)
example.com##.myClass.hidden:remove-class(hidden)

scheme like:

<domain>##<selector/-s>:remove-attr/class(<attribute/-s or class/-es>)

https://github.com/gorhill/uBlock/wiki/Static-filter-syntax#subjectremove-attrarg-subjectremove-classarg

example.org#$#//scriptlet('remove-attr', 'id', '#myElement)
example.org#$#//scriptlet('remove-class' , 'hidden' , '.myClass.hidden')

Scheme like:

<domain>#%#//scriptlet('remove-class/attr', 'classes/attributes', 'selector', 'applying')

where selector and applying is optional (to remove on any element without observation backs).

https://github.com/AdguardTeam/Scriptlets/blob/master/wiki/about-scriptlets.md#-%EF%B8%8F-remove-attr, https://github.com/AdguardTeam/Scriptlets/blob/master/wiki/about-scriptlets.md#-%EF%B8%8F-remove-class

Upvotes: 0

flntzr
flntzr

Reputation: 372

The other answers weren't working for me but there is a way to change an element's style:

example.com##h1:style(background-color: blue !important)

Make sure not to use curly brackets.

There is also some documentation on GitHub.

EDIT: As BeeLabeille mentioned this advice seems specific to uBlock.

Upvotes: 19

EditLw Ru
EditLw Ru

Reputation: 1

For AdBlock Plus, you can try this:

##.ytp-pause-overlay, .ytp-scroll-min
##.html5-endscreen, .ytp-player-content, .videowall-endscreen, .ytp-endscreen-paginate, .ytp-show-tiles
##.ytp-endscreen-content

This should disable the display of ads during the pause, and recommended videos, at the end of the video.

PS: Ah.. this is not the subject of the question.. this removes the class from the div element. Well, maybe someone will come in handy, to delete unnecessary blocks in the Youtube player.

Upvotes: -2

Joshua Brown
Joshua Brown

Reputation: 52

I don't think it's possible for AdBlock to change CSS properties, you can use an extension like Stylish (available for Firefox and Chrome) to do just that though.

Upvotes: 0

Related Questions