In: , ,
On: 2014 / 12 / 20 Viewed: times
Shorter URL for this post: http://ozh.in/xp

Last night I was reading something interesting then stumbled, in the comments, on a WordPress smiley. Bleeeh. There's a reason one of the first things I do when I setup a new site is uncheck "Convert emoticons like :-) and :-P to graphics on display": 90's phpBB'esque blocky gifs are *ugly*.

In my opinion those smileys are super outdated (they haven't changed since the very beginning of WordPress which, in internet times, is the equivalent of Pleistocene) and they suck for three reasons:

  • they're ugly. Did I already mention that? :)
  • they're too old to live on retina screens
  • it's very inefficient to load one image for each and every emoticon, as Julio points out

Over the years a few people have proposed alternatives for core but this is unlikely to happen, as very nicely summed up by WP Tavern. You can find several alternative as plugins, like New Smileys, but they're just another batch of images.

In the short discussion my tweet sparked, Greg pointed me to his way of doing it and I thought it was wonderful: 100% CSS, no image loaded, ideally tuned and adapted for his theme.

A coffee break later*, here is a sample plugin that replaces your smilies with pure and simple HTML markup that you can then easily style: Ozh' CSS Smilies. Hooo those super annoying cute animated little ghosts!

ghosts_smiley

The plugin is just meant to be a start for those who'll want to style their own smilies. Feel free to use and modify to match your theme!

* yeah right. I took me like 90 minutes just to get that half ugly CSS working :/

Shorter URL

Want to share or tweet this post? Please use this short URL: http://ozh.in/xp

Metastuff

This entry "Revisiting WordPress smilies in a pure CSS way" was posted on 20/12/2014 at 6:32 pm and is tagged with , ,
Watch this discussion : Comments RSS 2.0.

No Comment yet

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
Gravatars: Curious about the little images next to each commenter's name ? Go to Gravatar and sign for a free account
Spam: Various spam plugins may be activated. I'll put pins in a Voodoo doll if you spam me.

Read more ?