Archives for 

CSS

How to prevent your Google background image from fading in slowly.

Google fade-in loads slowly. Real slowly.

Google + slow loading = not worth having background images.

In trying to keep their homepage as minimal as possible, in December Google switched to fading in the home page links only on an event: moving your mouse or tabbing out of the search box. This was fine when the home page was only white, as it wasn’t taxing on computers to fade in on white.

Now that Google allows for custom image backgrounds (likely in response to how beautiful the Bing backgrounds are), the fading in process can be tedious, even using blazing-fast Chrome. I can only imagine what users using Internet Explorer 6 are going through: fading in images takes a lot of work and time!

This was annoying me, so I made a quick modification to my SEO Stylesheet (a Custom Stylesheet to display search results and no-follow nicely in Safari, IE and Firefox). This mod will make the image load solid, with no fading or resulting lag.

Add to your User Stylesheet CSS file:

#fpdi,#cpBackgroundImg { opacity: 1.0!important; }

Once the image loads, it will be displayed as solid, and Google will be fast-loading again.

For more information on user stylesheets, check out the SEO Stylesheets post.

To prevent the home page links from being hidden…

If you want to prevent the new “fade-in” look, use the following code in your user stylesheet instead:

#ghead *, span#footer center#fctr, #fpdi,#cpBackgroundImg { opacity: 1.0!important; }

Updated

I realized that when logged out and logged in, Google changes the ID of the background image. I’ve updated to code from #cpBackgroundImg to #fpdi,#cpBackgroundImg to reflect that.

Related posts:

  1. Google's Sprite Image is a Thing of Beauty
  2. How to Prevent Loading WP-DownloadManager’s CSS File
  3. SEO Google Profiles – Google Adds NoFollow to Links

Generate CSS Body Classes in Interspire Shopping Cart

 If you’re used to WordPress’ body_class() function, this post for you. Working with WordPress, it’s easy to get accustomed to some of its nice features, like the body_class() function introduced in WP 2.8. When working with Interspire Shopping Cart, I wanted the same level of information added to the page’s <body> tag. Let’s do this in […] Related posts:
  1. Add ‘Customers Also Purchased’ to the Cart Page on Interspire Shopping Cart
  2. How to Add an `Edit Product` Link for Interspire Shopping Cart
  3. Preview Hidden Products in Interspire Shopping Cart
Continue reading →