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 - A Detailed Explanation
- SEO WordSpinner Plugin - A Killer SEO Plugin for WordPress
- jQuery validator annoyances
- Weather Forecasts for WordPress - WP Wunderground Plugin
Tag Cloud
Denver SEO Marketing Search WordPress Links WP Plugins Search Engine Optimization Blogging Domains CSS Functions.php Website Redesign Interspire Development WordPress SEO Google SEO Google eCommerce Interspire Shopping Cart Shopping Cart WordPress Plugins SEO Nofollow Design Web Design Plugin WordPress Development Denver Optimization Interspire Customization Code
Tag 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.
5 Easy Ways to Disable the Gravity Forms CSS Stylesheet
We can do this the easy way or the hard way. What’ll it be?
The WordPress form plugin Gravity Forms (if you don’t use it, you should — it’s great) comes with a stylesheet found at [plugin-directory]/plugins/gravityforms/css/forms.css. SEODenver.com’s is found here.
If you want to turn off styles for Gravity Forms, there are a few different ways. Here are five examples of how to turn off CSS for the form plugin.
Posted in Plugins, WordPress
Tagged CSS, Gravity Forms, Gravity Forms Mod, Gravity Forms Plugin, WordPress Development, wp_dequeue_style
2 Comments
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.
How to Prevent Loading WP-DownloadManager’s CSS File
If you want to disable the WordPress plugin WP-DownloadManager‘s download-css.css file from being loaded, add the following code to your functions.php file:
remove_action('wp_print_styles', 'downloads_stylesheets');
Alternatively, if you would just like to use your own stylesheet, you can add a file named download-css.css to your theme’s directory, and the plugin will automatically load your stylesheet instead.
Posted in Code, QuickTip, WordPress
Tagged CSS, load time, Plugin, Plugins, WordPress Plugins, WP Plugins, WP-DownloadManager
Leave a comment
WordPress Search Engine Friendly Logo
Optimize your logo using SEO-friendly techniques.
Google’s algorithm likes text more than images. It likes headlines more than paragraphs. You can increase how much weight your headline has by only having one or two of them. Having the same headline across all pages reduces the value of it each time.
Instead of having your logo be an image, or H1 image replacement using CSS, it’s now best practice to use a H1 (heading 1) for your home page and a P (paragraph) for the rest of your pages. Then, you can use the headline for your page’s title instead, and get more bang for your buck.
This is nothing new, but it’s best practice, and I hope those who don’t know this technique or code may find this helpful.
Posted in SEO
Tagged CSS, H1, Logo, SEO, SEO Link, SEO Logo, WordPress header, WordPress SEO
1 Comment
Introducing: the SEO Stylesheet for Safari, Firefox, Opera, and IE
Firefox gets all the cool toys
ArrayAs I’ve written before, Firefox SEO — not Safari — gets all the glory. One of the great things about Firefox is the Add-ons (plugins) that extend its functionality. For web developers and SEOs, it’s vital to easily see what rank your website has when doing searches. There are tons of Firefox SEO Add-ons, but I use the following Firefox SEO addons:
- SEO for Firefox – The best. Gives you all sorts of info about each listing. Invaluable.
- Google Preview – Get a Snaps.com-like screenshot of websites inline with your search
- GoogleEnhancer – Adds item numbers and favicons to Google search results
These add-ons make browsing much easier when you’re doing some SEO research. There are no cool Safari SEO Plugins (ask Google, it’s true), but I wasn’t satisfied…so I made my own (kinda).
I am pleased to announce the best Safari SEO plugin alternative.
Posted in SEO
Tagged CSS, Firefox, Firefox SEO, IE6, IE6 SEO, IE7, IE7 SEO, Nofollow Stylesheet, Opera, Opera SEO, Safari, Safari SEO, SEO Addons, SEO Plugins, SEO Stylesheet, SEO User StyleSheets, User Stylesheets
23 Comments
Simple Vertical Align Plugin for jQuery
Sometimes you may want to vertically align a block item, but the CSS-only vertical aligning methods don’t make you feel clean. Personally, I hate having to style items as a table/table cell to get them to vertically align in Internet Explorer.
jQuery to the rescue. Using a jQuery vertical align snippet as my base code, I modified it to be a jQuery plugin that will allow you to use the function in the jQuery chain.
Posted in Code, jQuery
Tagged CSS, Javascript, jQuery, jQuery Plugin, Plugin, Vertical, Vertical Align
79 Comments
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)
Disable Styles and Javascript in Safari with Keyboard Shortcuts – How To
Now Safari’s just as cool as Firefox
ArrayIf you’re a web developer on the Mac, you may be sick of everyone talking about Firefox Addons that do everything but wipe your ass. True, Firefox is a great browser that is very expandable, but I love Safari, and I want to do as much web development on Safari as possible.
The feature that I missed the most in Safari was Disable Styles and Disable Javascript, both of which are super-easily done in Firefox via the Web Developer Plugin. With the advent of Safari 3, disabling CSS and Javascript is as simple as a keystroke combination of your choice!
Posted in Tutorial
Tagged Apple, CSS, Development, Firefox, Hacks, How To, Javascript, Mac, Safari, Tutorial, Web Developer, Web Development
7 Comments
12
SteveSpangler.com Web Design Launched
Visit Katz Web Design-developed SteveSpangler.com
As announced in August, Steve Spangler chose Katz Web Design to develop their blog. Their previous blog was aging and didn’t provide the functionality they needed. I was provided with a design by Blake Sumrall (at Steve Spangler, Inc.) and was tasked with converting it to a website.
The development of this site required lots of tricks that convert WordPress into more of a CMS (Content Management System). Read on to learn some of the WordPress customization. Read more…