About Katz Web Services
Katz Web Services is a web development company operated by Zack Katz.
-
Plugin Support Topics
Popular Posts
- Simple Vertical Align Plugin for jQuery
- How to Create a Custom RSS Feed in WordPress in 12 Lines of Code
- Contact Form 7 Modules - A Plugin
- iContact Widget for WordPress
- Gravity Forms Shortcode Explained
- WordPress Content Spinner Plugin - SEO WordSpinner
- jQuery validator annoyances
- Weather Forecasts for WordPress - WP Wunderground Plugin
Tag Cloud
Links Functions.php WordPress Development Denver SEO SEO WordPress Denver Code Google SEO Blogging Shopping Cart Interspire Shopping Cart Nofollow WP Plugins Marketing Website Redesign Google WordPress Plugins Search Engine Optimization CSS Plugin eCommerce Interspire Customization Interspire Development Search Design Web Design Optimization Domains WordPress SEO
Category Archives: CSS
The Google +1 Sprite Animation
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.
How to prevent your Google background image from fading in 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.
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.
Denver Roofing Company – Website Launched!
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.
Google’s Sprite Image is a Thing of Beauty
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)
Multiple Matte Colors for CSS Sprites
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!
