How to create a user style sheet, or: How to remove the Basecamp ad in Ta-da lists

I’ve quickly adopted the excellent Ta-da Lists to manage my to do lists at home and work. My browser start page is set to my @Work list and @Home list at each location. I love the simple utility that they provide, but one thing that bothered me from day one was the Basecamp ad that’s at the top of every page.

My first thought was AlltheWeb.com, a lesser known search engine that allows its users to specify a custom style sheet* for the search page and search results from within the site preferences. “If only Ta-da Lists did that,” I thought. Then I could style my lists however I choose — and get rid of the Basecamp ad.

Then I remembered user styles. Remember them? In case you forgot, they’re the part of the CSS specification that basically says users can specify the way a (standards based) web page will look in a conforming browser. They received a lot of attention when CSS was first coming around, but have sort of fallen by the wayside in the past few years; which is really too bad because they’re still pretty damn cool. Here’s how to create a user style sheet in several major browsers:

Firefox

  1. Find your Firefox profile folder. The location of the profile differs between OS’s, but excellent directions for finding the profile folder are on Mozilla’s support site.
  2. In the chrome subdirectory, there should be a file called userContent-example.css. Rename it to userContent.css and edit it using your text editor.*
  3. Save userContent.css and restart Firefox.

It’s curious that a browser made “for the people” would make it so difficult to specify the location of a user style sheet. Most other browsers have a dedicated section of the preferences for user style sheets.

Internet Explorer

  1. Create a CSS file in a convenient location using your text editor.*
  2. Select the Tools menu, select Internet Options, select the General tab and then select the Accessibility button.
  3. Under User Style Sheet, check Format documents using my style sheet.
  4. Select Browse and then select the CSS file you previously created.

Opera

  1. Create a CSS file in a convenient location using your text editor.
  2. Select the File menu, select Preferences and then select Page Style.
  3. Next to My style sheet, select Choose and then select the CSS file you previously created.

Safari

  1. Create a CSS file in a convenient location using your text editor.
  2. Select the Safari menu, select Preferences and the select Advanced.
  3. Next to Style sheet, select Other and then select the CSS file you previously created.

Finally, here’s the CSS to remove the Basecamp ad in Ta-da Lists.

div#Basecamp { visibility: hidden !important; }

Now don’t you wish you could change all sites that easily?

* New to CSS? Explaining the basics of CSS is beyond the scope of this article, but if you need help I would suggest one of the many CSS tutorials available on the web

Update: I added an !important declaration below to ensure that the rule will have priority. Thanks to missha for reminding me.

Comments

  1. Not if they put an “!important” declaration in the ad’s css rules.

  2. If you’re using Safari with PithHelmet (a kickass ad blocking utility) you can apply stylesheets to individual sites, so you could apply this sheet only to Ta Da Lists

  3. Nice tip! : )

  4. Firefox’s ChromEdit extension makes it significantly easier to edit user stylesheets.

  5. I think that’s pretty lame actually. They are giving you a powerful free tool and in exchange they are displaying an ad at the top of the page. That’s the deal. You use for free and we show you an ad. It’s pretty lame of you to remove the ad and still use the product for free.

  6. Ramsey: I can somewhat understand your argument, but there are several facts that nullify it from my perspective: First, I’m already signed up for the free version of Basecamp. I think it’s an excellent service. But I have no need to upgrade to the pay version. If and when that time comes, I’m happy to upgrade, but for now I simply have no use for it. And telling me to “Checkout Basecamp” isn’t going to change my mind. Secondly, even I was a paying Basecamp customer - even at the $99/month level - I would still see the ad every time I used Ta-da Lists because there’s nothing to associate my Basecamp account with my Ta-da Lists account. Why continually be forced to see an ad for a service that I’m already paying for? Finally, there is no deal. Users can display pages in their browser however they choose. That includes hiding content they don’t wish to see. In fact, if there’s anything about my site that you wish to change, I encourage you to create your own style sheet for unraveled.com. All of my pages have a body id of unraveled-com, allowing you to easily create unraveled.com-specific overrides.

Comments are closed for this entry

Please send your feedback via Twitter to @jmk.