Login | Register

teamWeather Blog

Technology: Using FloppyMoose Ad Blocking CSS to Expand iGoogle

A web site called FloppyMoose has published a CSS script that allows users to turn their Firefox or Safari browser into an automatic ad blocker. Tonight I discovered that by expanding CSS functions in the FloppyMoose CSS File “userContent.css” you can expand your iGoogle experience.

You will notice that on iGoogle from time to time that they have a Sandbox message for donations or a way to place a quick ad. You will also notice that if you try and customize your theme on iGoogle to include your own picture it won’t always expand to the header’s width of the page.

When you place an image in your own custom iGoogle page make sure it has a minimum width of 1200 px. Google might not take the image the first few times so you will need to upload it to Google’s photo web service first and then add it to a custom iGoogle theme.

After you have created your theme and added the Ad Blocking script “userContent.css” to your Firefox or Safari browser do the following:

  1. Close the browser
  2. Open the userContent.css file with Notepad or another text file editing utility and place the following code at the end of the file
  3. Restart the browser after placing the code

Here is the code you will need:

*[CLASS*="sandbox_msg"] { background: Black ! important; color: White ! important; display: none ! important; }
*[CLASS*="sandbox_msg"] A { color: White ! important; }
*[CLASS*="personalize_link"] { color: Black ! important }
*[CLASS*="personalize_link"] A { background: Black ! important; color: White ! important; }
*[ID=themes_directory_link] { background: Black ! important; color: White !important; }
*[ID=nhdrwrapinner] { background-size: 100%; -o-background-size:100% 100%; -webkit-background-size:100% 100%; -khtml-background-size:100% 100%; }

That is it! Now when you restart your browser your iGoogle header should be able to expand across the page and you will not be able to see the Sandbox messages anymore. You can modify the CSS above to match your image. The links such as “Change theme” and “Add stuff” have been changed to have a black background with white text to make it visible on top of most images.

Enjoy this technology tip from teamWeather!

Posted by Christopher Zenzel at 4:55 am (January 20, 2010); Filed under Projects, teamWeather

Comments

Comments are closed.