Is there a way with the Firefox userContent.css to block social media widgets?

An example (bottom of the page):

http://www.usatoday.com/news/world/2...protests_N.htm

I understand there is an Adblock Plus extension that can do that, but I don't use Adblock Plus.

Thanks much.

Hi Woodsman, Is this something NoScript might be able to handle?

Good luck. ;-)

CSS doesn't truly block anything on the page; it only modifies how the content is displayed, including hiding it from view. But the code for the object is still there embedded in the page.

So if all you want to do is hide the things from view, you can usually do it with css. But each site and object would likely have to be coded for individually. You'd have to learn some of the basics of css scripting and how to use the dom inspector.

The stylish extension provides a much more convenient way to use css than userContent.css, and there may already be scripts available for some sites.

RIP (remove it permanently) hides content in a way similar to css, and can be used in a point-and-click manner to hide content.


To actually keep widgets from phoning home, if that's a concern for you, you'd need to find some way to disable the scripts they use.

Noscript can keep most button scripts from functioning, but I don't think it can hide them from display usually.

I imagine there are probably also greasemonkey scripts already available for many sites. Since the javascript greasemonkey uses is capable of rewriting page content on the fly, it's able to modify or delete objects.

Adblock can block objects from being downloaded in the first place, as well as hide them. But it usually only works on simple image objects and iframes. It may or may not be able to affect hovering toolbars like the one at the above link, which are created using a combination of html and css.


A possible higher-level approach that would work in all browsers would be to use privoxy or a similar filtering proxy. Again, filters would probably have to be coded by hand for each site you want to modify.

1 members found this post helpful.

Wonder if a good hosts file can stop part of it?

I don't know. I use NoScript. I don't think the widget bars are created through JavaScript. I have very few sites white listed in NoScript. I see these widget bars appear in sites not in my white list.

I will settle with hiding. I doubt these widgets use any bandwidth to be concerned about. I just find them a nuisance and in the way of my viewing the page.

I use a secondary hosts file along with dnsmasq to block nefarious URLs. Works wonderfully. In the case of the sample link in my original post, the bar's functionality seems to be derived from addthis.com and JavaScript. I also have iframes disabled in NoScript. As I do not have usatoday.com in my NoScript white list, I am not concerned about the bar doing anything. I tried blocking the entire addthis.com domain to no avail. The widget still appears. I temporarily disabled JavaScript and NoScript (and restarted Firefox) and the widget still appears. I'm guessing the bar appears as a function of html and css.

I prefer not to run Yet Another Extension to block these widgets. I don't mind adding something to my usercontent.css. I already have a decent collection of exceptions/overrides. I know little about css and I do not know which element in the usatoday css files to block/hide/modify.

Chrome has an addon called Widgetblock. Sounds exactly what Firefox needs.

I've attached what I believe is the offending code. Maybe this will help sort the problem?

Good luck. ;-)

Attached Files

possible_offending_code.txt (529 Bytes, 28 views)

I dunno. If that is the offending code causing the widget to appear, why doesn't NoScript prevent the object from appearing?

That may only be part of the code, but after looking at the source again I'd say the bar is a javascript function. Did you get this sorted yet?

Nope. Haven't had time to tinker.