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”

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

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. Continue reading “Generate CSS Body Classes in Interspire Shopping Cart”

Denver Roofing Company – Website Launched!

Mountain High Roofing, Inc. - Denver roofing intstallation & repair

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. Continue reading “Denver Roofing Company – Website Launched!”

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…

Found: Barack Obama's Web Designer

Update: The New WhiteHouse.gov Website

Update: Who will be the White House web designer?

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

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

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”