As I mentioned a few months ago, I updated my website to a new theme. An unfortunate consequence of doing that was that it put these ugly borders around all my smilies:

Frankly, it made them look like they were in prison. What to do? Take a dive into the code of course!

This was actually made easier by a nifty little utility called Firebug. It’s billed as a tool for web development, so in this instance, it definitely served it’s purpose.

I right-clicked on a smiley chose “Inspect Element” from the menu, and that brought up a window that showed me that the style of this image was dictated by the style.css file, and the img selector. It had a border of 1 pixel all around:

img {
border:1px solid #000000;
}

Firebug also showed me the code that was used to display the smiley:

<img class="wp-smiley" alt=":-)" src=.../>

Ah ha! They’re all tagged with the CSS class “wp-smiley”. That’s great because it means I could customize the CSS to remove the border.

So I hopped into the style.css file and added a new bit of code:

img.wp-smiley{
border:0px;
}

That means that for each img tag with the wp-smiley class, the border should be zero pixels.

And there you have it. Smiley’s without borders! 🙂 Happy coding!