Categories
CSS Google

The Google +1 Sprite Animation

How the +1 Button Works

Google +1 Button The +1 Button uses an advanced sprite technique to simulate an animated `gif`. The animation occurs when hovering over search results with +1 enabled, and the shine moves across the button. (The image to the right is an animated `gif` I made…)

The +1 Button is not an animated `gif`, however. It’s a sprite image that moves a background image across the “window” of the button using Javascript. The code, if you care, goes something like this:

`onmouseover=”window.gbar&&gbar.pw&&gbar.pw.hvr(this,google.time())”`

The sprite image Google uses for the +1 button is below:

Google +1 Sprite

Pretty neat, huh?

Yeah, the +1 Button animation is pretty neat…
…now turn it off!

Oh goodness gracious, the animation is annoying. After hovering over one search result, it’s obvious how awful the animation is and I want to claw my eyes out with a rusty nail. I wanted to find a way to disable the animation.

Note: To use the code below, you must have a user stylesheet with the code shown added to the file. Here are links that will help you set it an user stylesheet: Safari, Internet Explorer, Firefox, Opera. Set that up, and then proceed below!

Disable the +1 Button Animation

`.esws { background-position: -400px 0px!important; } /* Disables animation of the +1 button */`

Hide the +1 Button

`.esw { display:none!important; } /* Hides the +1 Button completely */`

Improve the +1 Button

I want to use the +1 Button, so I’ve left it enabled. What I’ve done, however, is make the image lighter so it stands out less when you hover over a listing. When you hover over the button, it increases the brightness to 100%. It’s the best of both worlds:

`/* Disabled the animation, makes the +1 button lighter yet full brightness on hover */
.esws, .eswh { background-position: -300px 0px!important; }
.eswh:hover { background-position: -400px 0px!important; }`

I hope this helps people who love the +1 Button but hate the animation.

By Zack Katz

Zack Katz is the creator of GravityView and the President of Katz Web Services. He lives in Denver with his wife and cute beast of a cat.

9 replies on “The Google +1 Sprite Animation”

Thank you for sharing this. I’m fed up with companies ramming stuff down our throats- what happened to the concept of “personal space”?

Exactly. The problem isn’t that it isn’t useful to certain people, but that it’s too IN YOUR FACE.
And in defiance, I won’t be using it anytime soon.

On latest Chrome on OSX you can put the CSS in this file: “/Users/francis/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css”

No need to reload – it picks it up straight away (at least, in a new window).

Firefox users:  Print and follow steps to turn off
/disable/remove Google +1 Buttons from search results with or without AdBlock
or AdBlock Plus:

 

 

1) 
Go to Firefox Profiles folder on your hard drive.   To locate your Firefox

     
Profiles in Windows XP, Vista, 7, 
press:

 

                 [Windows Key]+[R] → Type in
(minus the quotes):   

 

                      
“%APPDATA%MozillaFirefoxProfiles”   
→ click OK

 

 

             or from the Taskbar click:

 

                  START  →  RUN  → Type in (minus the quotes):  

 

                       
“%APPDATA%MozillaFirefoxProfiles”  
→ click OK

 

 

      
The Profiles Folder will open.  
There will probably be only one folder in the

      
Profiles folder.

 

 

 

 

2)  
Open the folder with the 
“.default”  extension
name.

     

     

 

 

3)  
Look for a folder named Chrome in the .default folder.   If Chrome folder does

     
not exist, you need to create it. 
(If the Chrome folder exists, skip to #4).

 

         
To create the Chrome folder:  

 

               Right click inside the .default
folder  → Select NEW FOLDER

               → Type in (without the
quotes):   “Chrome”

 

 

 

 

4)  
Open the Chrome folder and create a .text file named
userContent.css. 

            (The contents of this file tells
Firefox not to display +1 Buttons on

              web pages.)  

 

            To create a text file named
userContent.css:

 

                  Right click inside the Chrome
folder  → Select NEW → TEXT

                  DOCUMENT → Type in (without
the quotes):  userContent.css

 

 

       
Windows will bring up “Rename” warning dialogue box that says:

 

                   If you change a file name
extension, the file may become unusable.

                   Are you sure you want to
change it?

                                             Yes     No

                

        
Select  YES

 

         

 

 

 

5)  
Open userContent.css. 

        

         
(It will open in Notepad with a box titled:  userContent.css – Notepad).

 

 

 

 

   

6)  
Paste the following into Notepad (minus the quotes):

 

              ” .esw {
display:none!important; } /* Hides the +1 Button completely */  ”

 

      
Be sure to include the period (.) before “esw” in the above.

 

 

 

 

 

7)  
Save the Notepad file and Close it:  

 

          
Select FILE → SAVE →  FILE → CLOSE
(or select X on folder title bar

          
to Close)

 

 

 

 

8) 
Close remaining open folders.

 

 

 

 

9)  
If Firefox Browser is not closed, close it.   Re-open Firefox Browser.  Navigate to Google’s

     
search page and perform a search. 
Google +1 Buttons will be gone from all future search

     
results.

Here’s how Firefox users can turn off
/disable/remove Google +1 Buttons from search results with or without AdBlock
or AdBlock Plus:

1) 
Go to Firefox Profiles folder on your hard drive.   To locate your Firefox

     
Profiles in Windows XP, Vista, 7, 
press:
     [Windows Key]+[R] → Type in
(minus the quotes):  %APPDATA%MozillaFirefoxProfiles”   
→ click OK

    or from the Taskbar click:
    START  →  RUN  → Type in (minus the quotes): “%APPDATA%MozillaFirefoxProfiles”  
→ click OK 

   The Profiles Folder will open.  
There will probably be only one folder in the Profiles folder.

 

2)  
Open the folder with the 
“.default”  extension
name.

 

3)  
Look for a folder named Chrome in the .default folder.   If Chrome folder doesnot exist, you need to create it. 
(If the Chrome folder exists, skip to #4).To create the Chrome folder:  Right click inside the .default
folder  → Select NEW FOLDER → Type in (without the
quotes):   “Chrome”

 

4)  
Open the Chrome folder and create a .text file named
userContent.css. The contents of this file tells
Firefox not to display +1 Buttons on web pages.)  To create a text file named
userContent.css:  Right click inside the Chrome
folder  → Select NEW → TEXT DOCUMENT → Type in (without
the quotes):  userContent.css
Windows will bring up “Rename” warning dialogue box that says:  If you change a file name
extension, the file may become unusable.  Are you sure you want to
change it?   Yes     No                

Select  YES

 

5)  
Open userContent.css. (It will open in Notepad with a box titled:  userContent.css – Notepad).

   

6)  
Paste the following into Notepad (minus the quotes):
         ” .esw {
display:none!important; } /* Hides the +1 Button completely */  ”

     
Be sure to include the period (.) before “esw” in the above.

 

7)  
Save the Notepad file and Close it:  Select FILE → SAVE →  FILE → CLOSE
(or select X on folder title barto Close)

8) 
Close remaining open folders.

 

9)  
If Firefox Browser is not closed, close it.   Re-open Firefox Browser.  Navigate to Google’ssearch page and perform a search. 
Google +1 Buttons will be gone from all future search 
results.

Comments are closed.