Denver SEO Blog » CSS

The Google +1 Sprite Animation

Zack Katz — Thu, 09 Jun 2011 21:03:06 +0000

How the +1 Button Works

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:

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.

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

Zack Katz — Mon, 07 Jun 2010 17:29:58 +0000

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.

Generate CSS Body Classes in Interspire Shopping Cart

Zack Katz — Thu, 20 May 2010 16:18:10 +0000

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 tag.

Let’s do this in three stages:

1. Generate the body class

Starting from Dave Beck’s great canonical link module, I modified the code to create a list of classes based on what page is being viewed. This provides a lot of great information:

Brand
- Brand ID
- Brand name
Category
- Category ID
- Category Name
Home
Page
- Page ID
- Page Name
Sorted/Filtered/Paginated
- Shop by Price
- Tag
- Sort type
- Page number
Checkout/Account
- Cart
- Gift Certificate
- Login
- Search
- SSL
- Wishlist

This is very helpful stuff for custom styling using CSS.

Add to the bottom of the `/lib/general.php` file:

function BodyClass() {
	$bodyClass = array();

	if(isset($GLOBALS['ISC_CLASS_BRANDS'])) {
		$bodyClass[] = 'brand';
		$bodyClass[] = "brandID-".$GLOBALS['ISC_CLASS_BRANDS']->GetId();
		$bodyClass[] = "brandName-".$GLOBALS['ISC_CLASS_BRANDS']->GetBrandName();
	}

	if(isset($GLOBALS['ISC_CLASS_CATEGORY']) && isset($GLOBALS['CatId'])) {
		$bodyClass[] = 'category';
		$bodyClass[] = "catID-{$GLOBALS['CatId']}";
		$bodyClass[] = "catName-".$GLOBALS['ISC_CLASS_CATEGORY']->GetName();
	}

	if(isset($GLOBALS['ISC_CLASS_INDEX'])) {
		$bodyClass[] = "home";
	}

	if(isset($GLOBALS['ISC_CLASS_PRODUCT']) && $GLOBALS['ISC_CLASS_PRODUCT']->GetProductId() > 0) {
		$bodyClass[] = 'product';
		$bodyClass[] = "productID-".$GLOBALS['ISC_CLASS_PRODUCT']->GetProductId();
		$bodyClass[] = "productName-".$GLOBALS['ISC_CLASS_PRODUCT']->GetProductName();
	}

	if(isset($GLOBALS['ISC_CLASS_PAGE']) && !isset($GLOBALS['ISC_CLASS_INDEX']) && $GLOBALS['ISC_CLASS_PAGE']->GetPageId() > 0) {
		$bodyClass[] = 'page';
		$bodyClass[] = "pageID-".$GLOBALS['ISC_CLASS_PAGE']->GetPageId();
		$bodyClass[] = "pageName-".$GLOBALS['ISC_CLASS_PAGE']->GetPageTitle();
	}

	if(isset($GLOBALS['PriceMin']) && isset($GLOBALS['PriceMax'])) {
		$bodyClass[] = 'price';
		$bodyClass[] = "shopByPrice";
	}

	if(isset($GLOBALS['ISC_CLASS_TAGS'])) {
		$bodyClass[] = 'tag';
		$bodyClass[] = "productTags";
	}

	if(isset($_REQUEST['page']) && !empty($_REQUEST['page'])) {
		$bodyClass[] = 'paginated';
		$bodyClass[] = 'page'.(int)$_REQUEST['page'];
	}

	if(isset($_REQUEST['sort']) && !empty($_REQUEST['sort'])) {
		$bodyClass[] = 'sort';
		$bodyClass[] = 'sort'.ucfirst($_REQUEST['sort']);
	}

	$current_url = $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];

		$noindex_url = str_replace("http://", "", $GLOBALS['ShopPathNormal'].'/cart.php');
		if($current_url == $noindex_url) {
			$bodyClass[] = "cart";
		}

		$noindex_url = str_replace("http://", "", $GLOBALS['ShopPathNormal'].'/giftcertificates.php');
		if($current_url == $noindex_url) {
			$bodyClass[] = "giftCertificates";
		}

		$noindex_url = str_replace("http://", "", $GLOBALS['ShopPathNormal'].'/login.php');
		if($current_url == $noindex_url) {
			$bodyClass[] = "login";
		}

		$noindex_url = str_replace("http://", "", $GLOBALS['ShopPathNormal'].'/search.php');
		$split_url = explode('?', $current_url);
		$split_url = $split_url[0];
		if($split_url == $noindex_url) {
			$bodyClass[] = "search";
		}

		$noindex_url = str_replace("http://", "", $GLOBALS['ShopPathNormal'].'/login.php?from=wishlist.php%3F');
		if($current_url == $noindex_url) {
			$bodyClass[] = "wishList";
		}

		if(($GLOBALS['ISC_CFG']["UseSSL"] >= 1) && ($_SERVER['HTTPS'] == 'on')) {
			$bodyClass[] = "ssl";
		}
	$i = 0;
	foreach($bodyClass as $class) {
		$class = preg_replace('/\%[0-9]{2}/', '', $class); //mixed pattern, mixed replacement, mixed subject [, int limit [, int &count]])
		$class = str_replace(array('+','\'',' ','<','>','&'),'', $class);
		$bodyClass[$i] = $class;
		$i++;
	}
	$bodyClass = implode(' ', $bodyClass);

	// WordPress integration
	if(function_exists('get_body_class')) {
		$wpBodyClass = get_body_class();
		$wpBodyClass = implode(' ', $wpBodyClass);
		$wpBodyClass = str_replace('home', '', $wpBodyClass);
		$wpBodyClass = trim($wpBodyClass);
		if(!empty($WPBodyClass)) {
			$bodyClass .= ' blog wordpress '.$wpBodyClass;
		}
	}

	return $bodyClass;
}

2. Generate the global variable `BodyClass`

Since code placed in general.php is available to every script in the cart, we can use the result of the function in the script that generates the website’s , HTMLHead.php. We’re going to create a global variable named BodyClass, and add it to our template.

Add to the bottom of the `/includes/display/HTMLHead.php` file:

$GLOBALS['BodyClass'] = ' class="'.BodyClass().'"';

3. Add to your template

Now the not-terribly-fun part: in every template file, find and replace with — you may need to go into the __master folder to do this, depending on your setup.

This will generate CSS classes like this: , and will give you microscopic control over your template’s styling.

How would you do it?

Manually adding the BodyClass variable into each template is cumbersome, but the only other way to do it is to use ob_start() and process the page before it’s displayed to the browser, and that would add load time. Any other ideas on how to achieve this?

Denver Roofing Company – Website Launched!

Zack Katz — Thu, 15 Jan 2009 23:15:46 +0000

Katz Web Design has completed a website for Mountain High Roofing, Inc., a Denver roofing company.

The Mountain High Roofing website is built on WordPress. It’s what I would consider to be a medium level of customization; the website is a custom website design with a few plugin customization options. It allows Mountain High to easily update their own content, and add articles to their blog. The code is well-structured for really good SEO results.

The project went quite smoothly; the copywriting was done by The Write Touch, and the previous website was easy to redirect: it had only been 4 pages.

Incorporating ServiceMagic.com ratings

One of the interesting things developing this site was trying to incorporate the company’s ServiceMagic.com rating. ServiceMagic is the 800 pound gorilla on the web for the service industry. My customers often love the website because it sends them lots of leads, but it charges a lot. One client told me that ServiceMagic charges $55.00 for every lead.

I hoped, since they charge so much, that the website would at least offer a quality API so that I could pull Mountain High’s ratings from their website using PHP or Javascript. I was hoping for a ServiceMagic API with a JSON feed of testimonials and ratings. Instead, there was nothing. I called their support team, and they confirmed no options for incorporating.

A sneaky CSS trick to get around ServiceMagic

Service Magic doesn’t allow access to their pages using techniques such as cURL, which would be easily manipulated and added to the website. I tried all sorts of better options before realizing I’d have to go old-school!

ServiceMagic gets a new header using CSS

Since there was no way to create an RSS feed using some RSS feed creation services, I had to resort to CSS trickery. I used an old-school iFrame that pulled in their rating summary pop-up, and then used css to add a header to the sidebar iFrame using absolute positioning. I added an invisible link that covers the entire iFrame and goes to the company’s full reviews. Voila, an external iFrame that is styled just like the company’s website. The end result I think looks great and serves its purpose.

Google’s Sprite Image is a Thing of Beauty

Zack Katz — Tue, 03 Jun 2008 22:40:24 +0000

Google Sprite changes over time:

If you want to know more about CSS sprites and how to put them together, feast your eyes on Google’s:

Here’s the history of Google’s PNG sprite image

http://www.google.com/images/nav_logo.png

http://www.google.com/images/nav_logo2.png

http://www.google.com/images/nav_logo3.png

http://www.google.com/images/nav_logo4.png

http://www.google.com/images/nav_logo5.png

http://www.google.com/images/nav_logo6.png

http://www.google.com/images/nav_logo7.png

http://www.google.com/images/srpr/nav_logo8.png

http://www.google.com/images/srpr/nav_logo9.png

March 25, 2010 – http://www.google.com/images/srpr/nav_logo10.png

April 1, 2010 – http://www.google.com/images/srpr/nav_logo11.png

April 21, 2010 – http://www.google.com/images/srpr/nav_logo12.png

May 4, 2010 – http://www.google.com/images/srpr/nav_logo13.png

July 2, 2010 – http://www.google.com/images/srpr/nav_logo14.png (Added a magnifying glass)

July 16, 2010 – http://www.google.com/images/nav_logo15.png (Made logo bigger for Instant Search results layout)

November 8, 2010 – http://www.google.com/images/nav_logo26.png (Added the Instant Preview images)

November 15, 2010 – http://www.google.com/images/srpr/nav_logo27.png

November 15, 2010 – http://www.google.com/images/nav_logo28.png

November 16, 2010 – http://www.google.com/images/nav_logo29.png – seems to be color correction as well as logo size.

January 14, 2011 – http://www.google.com/images/nav_logo34.png

February 1, 2011 – http://www.google.com/images/nav_logo36.png – added star ratings and close x’s

February 14, 2011 – http://www.google.com/images/nav_logo38.png – added another star

March 24, 2011 – http://www.google.com/images/srpr/nav_logo39.png – added unhappy faces, hover state for happy face

March 24, 2011 – http://www.google.com/images/nav_logo40.png

April 09, 2011 – http://www.google.com/images/srpr/nav_logo41.png

You can’t get much more efficient than that…

Found: Barack Obama's Web Designer

Zack Katz — Thu, 10 Apr 2008 23:09:37 +0000

Update: The New WhiteHouse.gov Website

Update: Who will be the White House web designer?

ArrayA lot of people have wanted to know who designed Barack Obama’s website. With good reason: Obama’s website is beautiful. It even conveys Obama’s message of hope in it’s wistful design. Well, here it is:

Barack Obama’s web designer is:

SimpleScott. SimpleScott designed Barack Obama’s website, so here’s to SimpleScott for a gorgeous design.

From Scott Thomas, of SimpleScott:

I am the creative director of New Media for Obama for America. The team consisted of many people in house as well as many volunteers. Project leads were myself and John Slabyk. We are maintaining site and brand in-house. Sol Sender designed the logo before I joined the campaign.

How did I find out SimpleScott was involved? Just check out Obama’s main style sheet. SimpleScott uses CSSEdit, a great program for Mac CSS web design.

The CSS code gives it away:

CSS Version 2: – View the stylesheet

/* CSS Author: Scott Thomas Client: Obama for America Created: 12-15-07 Modified: 12-22-07 */

CSS Version 3: – View the stylesheet

/* CSS Author: Scott Thomas Created: 12-15-07 Author: Walker Hamilton Modified: 08-10-07 */

Did you notice there are two authors for Version 3? If you’re like me, you want to know who this Walker Hamilton fella is that is referenced in Version 3 of the CSS.

This is from Walker’s resume at walkerhamilton.com:

I architected and implemented the deployment mechanisms and technologies for the campaign’s various web properties. I implemented various applications to improve some processes, automate others, and facilitate instate/headquarters communications for departments within the campaign. Other duties included general maintenance, day to day content administration, and feature planning and development for the social network tied into the site.

Update: I’ve learned a couple of more people who were involved in the BarackObama.com website:

Matt Ipcar (from frog design)
Kyle Crouse (from frog design)

The Barack Obama logo design is by Sender, LLC

Sender, LLC developed the Obama ’08 logo.

From Brian Drum, of Sender LLC

Sender designed the original mark, but the site is developed and maintained in-house by the campaign’s web team.

Sender was involved *only* with the development of the “sunrise” mark, and had no role whatsoever in the design, development, or maintenance of barackobama.com.

Leave your reactions here

Do you like the design, or not? What aspects work best for you? Drop a line below.

Which design do you like? I prefer the lighter, more optimistic “Primary Obama” website, not the Obama/Biden serious, solumn “General Election Obama” site. What do you think?

Multiple Matte Colors for CSS Sprites

Zack Katz — Thu, 07 Feb 2008 19:14:24 +0000

Here’s the problem: I want to use CSS Sprites for transparent images, and they require different matte colors.

ArrayThe promise of CSS Sprites is great: you can combine many small images into one bigger image, and use CSS to reveal only the revelant parts. But what if you have a background image, and the background changes color on :hover? When trying to save the smilies, you can only choose one matte color. I need multiple matte colors!

The issue really is a pain when you have already given your object a stroke. Using the Appearance panel, we’ll make everything happy in the world again!

My solution: Making a Multiple Matte Sprite (“MMM Sprite”)

In order to solve this issue, we must first declare it: one matte color is not enough! And if we can’t use one, we must use no matte. In order to reproduce the matte effect, we will use multiple strokes on an object in Illustrator. There is a similar solution for Photoshop, described in less detail below.

The MMM Sprite Process:

Create as many objects as you’ll need (often just two, but for this example, I show three. Each smiley will have a different matte color.
Select one of the smiley’s yellow circles, and go to the Illustrator Appearance Panel.
In the upper-right corner of the Appearance panel, click the downward facing arrow. This brings up a contextual menu. Select “Add New Stroke”. Note: we’re doing it this way in case your object already has a stroke applied to it. You can apply multiple strokes to an object using this method.
The stroke should be selected by default now, but if not, select the stroke in the Appearance Panel
Give the stroke a color in the Color panel. For the first smiley, we want it to have a white stroke (for the white background).
Go to the Stroke panel. In the Stroke panel (with the circle still selected, and the stroke selected in the Appearance Panel) align the stroke to the outside. This makes it so the object does not change.
Give each smiley its own stroke color based on the background you have. Notice the smileys have the same background colors as the first graphic (white, blue, and red). You can use the eyedropper tool to accurately select the stroke color (be sure to hold down Shift to not affect the object’s fill!)
When you have finished giving your objects the strokes they need, then Save for Web. In the GIF settings, turn on transparency, and choose ‘None’ for the Matte setting (!important)
When you’re finished, you have a single GIF image with multiple Matted sprite images.

A summary:

This simple process allows you to further reduce the number of HTTP Requests that your site is making, just because of a silly matte issue. You can, by adding strokes, make any transparent GIF work in most situations.

But what about Photoshop?

In Photoshop, you can do a similar trick:

Select your layer by Command/Ctr clicking your layer thumbnail in the Layers panel.
Go to the menu bar and click on Select > Modify > Expand
Expand by 1 pixel
Save for Web with no matte

What are your solutions?

Do you have a better way? Share your methods below!