Category: CSS

Categories
Code CSS WordPress

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


Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /srv/users/serverpilot/apps/katzco/public/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /srv/users/serverpilot/apps/katzco/public/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

Warning: WP_Syntax::substituteToken(): Argument #1 ($match) must be passed by reference, value given in /srv/users/serverpilot/apps/katzco/public/wp-content/plugins/wp-syntax/wp-syntax.php on line 383

In 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 […]

Categories
CSS Google

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`, […]

Categories
CSS Google

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, […]

Categories
CSS Interspire

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.

Categories
CSS Web Design Portfolio

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 […]

Categories
CSS

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: Now: 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 […]

Categories
CSS Design Politics

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. […]

Categories
Code CSS Design Tutorial

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 […]