Monkey House

Alex says to me the other night, “Any way to fix the emoticons on the blog?” (this was after her first post in which I am assuming she wanted to use some emoticons).

Easy peasy! Says I.

The problems are that the emoticon is going off to the left and have spacing/border, as per this image:

First step: see what’s going on with the existing emoticons. Using FireFox, bust open a blog post with an emoticon, KABLAM, open up Firebug and focus on that image. Firebug tells me that the styles for the emoticon image are applied to “img” (images) within the class “entry”:

Well, if you know CSS, you already see the problems: the border, the float, the margin, and the paddings. So basically, the whole class is messing up the emoticons! Non-destructively inside Firebug, I modified those declarations just to prove concept, but the problem was so obvious that I probably needn’t have bothered.

Newbies to CSS or who just sort of learn by trial and error (and we all were at one time) might look up the “.entry img” class in the CSS and start making the changes. However, this would break the rest of the images inside the “entry” div. The example image of “what was wrong” above in this post would be affected along with the emoticons. And we probably don’t want that. What we want is to zero in on the smiley images and style them accordingly.

Back to Firebug.

Firebug tells me that although the styles are inherited from “.entry img” there is in fact another class that the smileys belong to which is even higher up in the hierarcy: “wp-smiley”. THAT is the class that needs to be either added or changed. I know not everyone goes all guerrilla style, so use whatever editing method you think is safest or best for your site. Me, I just went right over to WP’s built-in Appearance Editor and selected Stylesheet (“style.css”). Doing a search for “smiley” turns up the fact that although the post uses that class, there are no styles assigned to it. In other words, “.wp-smiley img” does not exist. No problem, just have to add it to any reasonable place in the CSS. The original author commented a few “categorized” blocks for CSS, so I’ll put it somewhere in the “Main Content” area:

Float is set to none. Margins are set to zero. Padding is set to zero. Border is set to none. Note: I don’t know why it has to be “img.wp-smiley” instead of “.wp-smiley img” but it does. Something to do with inheritance? Dunno.

All done. Update Stylesheet (“style.css”) and you should be ready to rock. If you apply this change to your own site, you MAY need to SHIFT+Refresh to grab a new non-cached version of the CSS. Here’s the end result:

It seems like a small thing, but if you’re a non-developer just trying to fix some niggling little things with this or any other theme, sometimes the small things count!