September 21, 2010 
Ever wanted to customize the default WordPress emoticons to match your website? Changing out the icon set is a possibility, but you still need to hunt for one that will compliment your site’s design. Why not design your own emoticons using CSS?
The new Pure-CSS Emoticons plugin lets you do that by harnessing the power of CSS3. It overrides WordPress’ default icons and outputs a new set based on CSS. At first glance they look like images, but they’re actually pure CSS and entirely customizable. This means that you can change their colors, box-shadow, gradients, and much more – all within the CSS file!
Browser Notes:
This plugin uses the CSS3 properties, including transform, border-radius, box-shadow, gradient, and transition, when supported by your browser. It is important to note that the emoticons work with FireFox, Chrome, Safari, and Opera. They also work on the iPhone and Android phone browsers, including the animations. In Internet Explorer the emoticons will simply appear as the original textual emoticons. Don’t worry, IE is bound to catch up someday.
Why use CSS for emoticons instead of images?
There are solid benefits to be gained from using pure CSS emoticons. Steve Schwartz of Alpha Jango, who inspired the Pure-CSS Emoticons plugin, lists the benefits as such:
- Keeps text markup semantic (plugin only wraps textual emoticons in a single element).
- Retains original text, as typed, for copy/paste and page indexing.
- Automatically sizes to fit the text. No need for multiple emoticon image sets of varying sizes.
- Does not break the line-height of paragraphs like most of the image-replacement methods.
The Pure-CSS Emoticons plugin allows you to select which part of your site you want to apply them to – posts or pages. It also shows you a preview of your emoticons based on the CSS file. When mousing over an emoticon, it will turn to the left, showing you what text was inputed to achieve that particular face.
Have a look at the demo of these emoticons in action if you want to check them out before installing the plugin. It’s the little things that make your site beautiful. Your users will appreciate your attention to detail and the unique emoticons will make a subtle impression.
Sarah Gooding on Google+
