How to use your own widget icon in the WordPress Widget customizer

Customize WordPress Widget IconIn developing deeper integration with the Customizer functionality of WordPress, I wanted to use a custom icon for my IDX+ plugin’s widgets.

By default, WordPress defines a list of icons using their dashicons icon set and tries to guess the best icon for your widget based on the CSS class of your widget.

Check out the CSS in customize-widgets.css starting on line 415.

For instance, if your widget’s CSS class contains “music”, “radio”, or “audio”, you will have the format-audio dashicon applied to your widget.

How to change the widget icon

Using Dashicons

Note: In order to choose a new icon, go to the Dashicons website and click on the icon you want to use, then click on the “Copy CSS” link to get the correct CSS content value.

#available-widgets [class*=YOUR_CSS_BASE] .widget-title:before{
    content: "\f217"; /* <-- replace this value */
}

Using your own icon font

#available-widgets [class*=YOUR_CSS_BASE] .widget-title:before{
    font-family: idx-plus!important; /* <-- replace this value */
    content: 'd'; /* <-- replace this value */
}

If you want the icon to change color when it’s hovered over, use the following code:

#available-widgets [class*=YOUR_CSS_BASE]:hover .widget-title:before{
    color: #7da838!important; /* <-- replace this value */
}

I hope this helps!

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. Continue reading “The Google +1 Sprite Animation”

5 Easy Ways to Disable the Gravity Forms CSS Stylesheet

Pliers

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. Continue reading “5 Easy Ways to Disable the Gravity Forms CSS Stylesheet”

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. Continue reading “How to prevent your Google background image from fading in slowly.”

How to Prevent Loading WP-DownloadManager's CSS File

Stop loading WP-Downloads 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.

SteveSpangler.com Web Design Launched

Stevespangler.com Header image

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.

Continue reading “SteveSpangler.com Web Design Launched”

Introducing: the SEO Stylesheet for Safari, Firefox, Opera, and IE

Safari, Opera, IE and Firefox User Stylesheet is like a compass for SEOs

Firefox gets all the cool toys

As 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:

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. Continue reading “Introducing: the SEO Stylesheet for Safari, Firefox, Opera, and IE”

Simple Vertical Align Plugin for jQuery

Everything in it's right place.
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. Continue reading “Simple Vertical Align Plugin for jQuery”

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:

Then:
Google's Sprite Image

Now:
Google Sprite 107

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

Google's Sprite Image
http://www.google.com/images/nav_logo.png


Google's Sprite Image
http://www.google.com/images/nav_logo2.png


Google's Sprite Image
http://www.google.com/images/nav_logo3.png


Google's Sprite Image
http://www.google.com/images/nav_logo4.png


Google's Sprite Image
http://www.google.com/images/nav_logo5.png


Google's Sprite Image
http://www.google.com/images/nav_logo6.png


Google Image Sprite

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


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


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


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


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


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


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


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


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


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


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


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


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


Google Sprite 65
April 12, 2011 – http://www.google.com/images/nav_logo65.png


Google Sprite 70
May 05, 2011 – http://www.google.com/images/nav_logo70.png


Google Sprite 72
May 09, 2011 – http://www.google.com/images/nav_logo72.png


Google Sprite 79
July 15, 2011 – http://www.google.com/images/nav_logo79.png


Google Sprite 82
July 20, 2011 – http://www.google.com/images/nav_logo82.png


Google Sprite 83
July 29, 2011 – http://www.google.com/images/nav_logo83.png


Google Sprite 85
September 14, 2011 – http://www.google.com/images/nav_logo85.png


Google Sprite 86
September 14, 2011 – http://www.google.com/images/nav_logo86.png


Google Sprite 89
September 20, 2011 – http://www.google.com/images/nav_logo89.png


Google Sprite 91
October 9, 2011 – http://www.google.com/images/nav_logo91.png – Lightened some colors


Google Sprite 95
October 28, 2011 – http://www.google.com/images/nav_logo95.png – Added a tick sprite and down-arrow


Google Sprite 99
December 5, 2011 – http://www.google.com/images/nav_logo99.png


Google Sprite 100
December 7, 2011 – http://www.google.com/images/nav_logo100.png


Google Sprite 101
December 7, 2011 – http://www.google.com/images/nav_logo101.png – Added new window sprites


Google Sprite 102
January 26, 2012 – http://www.google.com/images/nav_logo102.png – Changed arrows to carat-style instead of triangles; removed button borders, added “return” sprite. Reduced logo drop shadow & thickness, This is the first of the new “unified” look.


Google Sprite 103
February 17, 2012 – http://www.google.com/images/nav_logo103.png – added G+1 red buttons


Google Sprite 104
February 24, 2012 – http://www.google.com/images/nav_logo104.png – added info circle


Google Sprite 105
March 03, 2012 – http://www.google.com/images/nav_logo105.png


Google Sprite 107
March 16, 2012 – http://www.google.com/images/nav_logo107.png


Google Sprite 110
May 02, 2012 – http://www.google.com/images/nav_logo110.png


Google Sprite 111
May 10, 2012 – http://www.google.com/images/nav_logo111.png


Google Sprite 113
June 11, 2012 – http://www.google.com/images/nav_logo113.png


Google Sprite 114
June 25, 2012 – http://www.google.com/images/nav_logo114.png

You can’t get much more efficient than that…

Disable Styles and Javascript in Safari with Keyboard Shortcuts – How To

Now Safari’s just as cool as Firefox

If 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! Continue reading “Disable Styles and Javascript in Safari with Keyboard Shortcuts – How To”

Tableless, accessible, nearly validating osCommerce — Rewriting the beast

Rocky Mountain Baggers

osCommerce accessibility stinks

osCommerce default installation is a huge mess for accessibility. Every piece of code that the platform spits out has endless tables and poorly coded HTML — finding your way through the code is like trying to clear brush.

The simple solution to osCommerce accessibility is to install the Simple Template System and put together a XHTML/CSS’ed out template.  That only solves one part of the problem, however, because your wonderful template is going to be wrapping around a whole slew of undesirable code.

Over a year ago, a client of mine wanted an osCommerce website. I wanted to create a masterpiece of accessibility. I tackled osCommerce head-on and re-wrote most of the code that creates the HTML.  It was a nightmare, but I created a nearly validating eCommerce website with osCommerce.

The experience was so scarring that I haven’t yet written about it 🙂 Nearly every file was affected, so upgrading it would be a nightmare, but it’s truly an effort of love.

KWD presents: a nearly validating, tableless osCommerce website

Continue reading “Tableless, accessible, nearly validating osCommerce — Rewriting the beast”

Standards-Compliant Shopping Cart with XHTML & CSS!

I’ve been looking for a shopping cart like this for a long time

One of my clients is looking to move from osCommerce to a more user-friendly solution, and I really want to use a shopping cart that is XHTML and standards-compliant…Something that validates and looks pretty with stylesheets off, has a full feature set, and a great admin panel.

I was quite pleasantly surprised when I discovered Tradingeye. They have a well-coded shopping cart solution as well as a CMS. Very, very interesting.  Looks like a pleasure to develop for; like WordPress for eCommerce. Check out their Shopping cart demo. Continue reading “Standards-Compliant Shopping Cart with XHTML & CSS!”

Cars and Code – Not all that different

Customizing under the hood

I was talking with one of my clients who is a mechanic, and he was telling me about how he used to do a lot of car customization and performance enhancing, and that he really loved it.He told me that the problem with customizing cars is that when you start tinkering around under the hood, every little change presents new problems that need fixing, and soon, the project becomes unmanageable.

I’ve done my deal of modifying code (check out this custom XHTML osCommerce installation) and let me tell you: it doesn’t pay. My clients generally don’t care about how the site is tableless, CSS/XHTML valid, et cetera. They want to know that it works properly.

WordPress is beautiful and talks sweet to me.

WordPress is my dream in that regard: it’s beautifully coded out of the box so that creating templates is a logical, simple project. They make functions such as is_page() that allow you to simply ask “Is this the page I think it is?,” then continue to make progress. WordPress is my love. I will continue to be her bedfellow codefellow.

Both my mechanic client and I agreed: customizing is great fun, and very personally rewarding in the end. However, it’s a huge pain in the ass, and the rewards rarely (if ever) equal the effort.

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.

The 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!

I want the three smileys to be combined as one

Continue reading “Multiple Matte Colors for CSS Sprites”