How To (Mostly) Block Ads in Fluid Apps

Fluid for the mac is a terrific piece of software. It allows you to create a separate “app” for specific web sites, and works especially well for websites that you frequently visit. For me, my RSS reader (which is google) is a constant go-to; it’s how I keep up with tons of blogs, etc. Other fluid apps I have setup are Brizzly, The New York Times web site, and Pandora. All good stuff.

One of my big frustrations, though, is that there is no ad blocking capability built-in to Fluid. (And there never will be.) Even if you add in an adblocker for Safari (Fluid basically runs a Safari browser), it will not carry through on Fluid apps.

I’ve searched several times for a solution, but have not found anything…until today. It’s not perfect, but works well enough.

Here’s how to do it.

I’m assuming here you have some experience with setting up Fluid, setting the allowed URLs, and all that. If not, please leave a comment, and I’m happy to provide more of a step-by-step.

First, download the CSS file found here at this site (the file is called userContent.css). This is built specifically built to block the images from well-known ad services.

Next, following the instructions here on a site for an unrelated application for Fluid, goto the Preferences inside your Fluid app, and select the “Userstyles” option. Once there, you’ll hit the plus sign, and check the box next to “URL Pattern.” in the right column box, type in an expression to allow the URL of your app. (This is the same thing you do under “Advanced,” where you allow the site’s URL.) For example, in my google reader fluid app, I simply put “**” (without the quotes…).

Below that, you’ll want to paste in the contents of the CSS file you downloaded in the first step. It’s easy to do — open the CSS file on your mac (using TextEdit, or, as on my mac, DashCode), select it all, and paste it into the field in the Fluid preferences.

Close the preferences window, reload your app, and the ads should (mostly) be gone. No more eye-burning ads on your screen!!!

Well, again, it’s mostly. It doesn’t work perfectly, as some get through. And I’ve only done limited testing, in just a couple apps.

But, so far, it’s the simplest way I’ve found to do this.


16 responses

  1. If you install glimmerblock, it runs a system-wide local proxy that filters out ads for all http client devices on your machine (all browser, and fluid)


    1. I should have mentioned that I did look at that, but it’s a bit too all-or-nothing for me…have you tested it? Does it work?

  2. In fact, you can even run it so that it’s more conservative than a typical adblocker+ setup on FF. that’s what i do.

  3. Hmmm…what I’m doing (above) has been working out pretty well so far, but maybe I’ll check it out!

  4. Thanks!! It worked perfect for grooveshark fluid app.

  5. An old post perhaps, but just wanted to point out that the css idea works on the main page of any window only. Subsequent tabs for some reason do not apply the css style to block ads.

  6. I’m personally not a fan of GlimmerBlocker. It’s been a couple of months since I have used it, but as I remember it blocked a lot of elements that were not ads and would oftentimes render a harmless/mostly ad-free website completely useless. Seems like everyone else likes it though so…I must be doing something wrong??

  7. GlimmerBlocker worked for me, quite easily, just had to download, install and select a few filters! Thanks for the tipoff John.

  8. A bit late to the party, but this is brilliant! Worked a treat! Thanks for taking the time to test this out and post.

  9. bfilter: is another good adblocking proxy.
    I used it on my old Linux PC and now again on Mac OS. Works like a charm.

  10. It seems that “userstyles” are not listed under preferences in fluid based applications anymore (1.6). Is there any other way to do this?

    1. Sorry, not sure. This post was from a while ago and I haven’t kept up. But it still seems to work in my fluid instances…

      1. Thanks; maybe it’s the version I am using… I don’t see the “Userstyles” panel under the preferences of the fluid instances. There is a “Userstyles.plist” file in Finder in the folder for the application and I cannot modify it (deletes the pasted contents of the usercontent.css when the application is activated). Maybe, it’s due to the different versions of fluid we use. Anyway, thank you

      2. Oh, sorry, just found it! In 1.6, “Userstyles” is under the “Window” heading of the menubar.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: