CINXE.COM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr"> <head><script type="text/javascript" src="/_static/js/bundle-playback.js?v=HxkREWBo" charset="utf-8"></script> <script type="text/javascript" src="/_static/js/wombat.js?v=txqj7nKC" charset="utf-8"></script> <script>window.RufflePlayer=window.RufflePlayer||{};window.RufflePlayer.config={"autoplay":"on","unmuteOverlay":"hidden"};</script> <script type="text/javascript" src="/_static/js/ruffle/ruffle.js"></script> <script type="text/javascript"> __wm.init("https://web.archive.org/web"); __wm.wombat("http://codex.wordpress.org/Using_Smilies","20110415170542","https://web.archive.org/","web","/_static/", "1302887142"); </script> <link rel="stylesheet" type="text/css" href="/_static/css/banner-styles.css?v=S1zqJCYt" /> <link rel="stylesheet" type="text/css" href="/_static/css/iconochive.css?v=3PDvdIFv" />  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Style-Type" content="text/css"/> <meta name="generator" content="MediaWiki 1.15.5"/> <meta name="keywords" content="Using Smilies,CSS,FTP Clients,Glossary,Multilingual Codex,zh-cn:使用表情符号"/> <link rel="shortcut icon" href="/web/20110415170542im_/http://codex.wordpress.org/favicon.ico"/> <link rel="search" type="application/opensearchdescription+xml" href="/web/20110415170542/http://codex.wordpress.org/opensearch_desc.php" title="Codex (en)"/> <link rel="alternate" type="application/rss+xml" title="Codex RSS feed" href="/web/20110415170542/http://codex.wordpress.org/index.php?title=Special:RecentChanges&feed=rss"/> <link rel="alternate" type="application/atom+xml" title="Codex Atom feed" href="/web/20110415170542/http://codex.wordpress.org/index.php?title=Special:RecentChanges&feed=atom"/> <title>Using Smilies « WordPress Codex</title> <style type="text/css"> @import url("https://web.archive.org/web/20110415170542cs_/http://s.wordpress.org/style/codex-wp4.css?3"); @import url("https://web.archive.org/web/20110415170542cs_/http://s.wordpress.org/style/wp4.css?10"); </style> <link media="only screen and (max-device-width: 480px)" href="https://web.archive.org/web/20110415170542cs_/http://wordpress.org/style/iphone.css" type="text/css" rel="stylesheet">  <link rel="shortcut icon" href="https://web.archive.org/web/20110415170542im_/http://s.wordpress.org/favicon.ico" type="image/x-icon"/> <script src="https://web.archive.org/web/20110415170542js_/http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript"> _uacct = "UA-52447-1"; urchinTracker(); </script>  <script type="text/javascript" src="/web/20110415170542js_/http://codex.wordpress.org/index.php?title=-&action=raw&gen=js&useskin=codex"></script> <script type="text/javascript">wgBreakFrames=false;wgContentLanguage='en';</script> <script type="text/javascript" src="/web/20110415170542js_/http://codex.wordpress.org/skins/common/wikibits.js"></script> </head> <body id="wordpress-org"> <div id="header"> <div class="wrapper"> <h1><a href="https://web.archive.org/web/20110415170542/http://wordpress.org/" title="WordPress">WordPress.org</a></h1> <form action="https://web.archive.org/web/20110415170542/http://wordpress.org/search/do-search.php" method="get" id="head-search"> <input class="text" name="search" type="text" value="Search the Codex" maxlength="150" onfocus="this.value=(this.value=='Search the Codex') ? '' : this.value;" onblur="this.value=(this.value=='') ? 'Search the Codex' : this.value;"/> <input type="submit" class="button" value="Go"/> </form> <ul> <li><a href="https://web.archive.org/web/20110415170542/http://wordpress.org/" title="Home is where the heart is.">Home</a></li> <li><a href="https://web.archive.org/web/20110415170542/http://wordpress.org/showcase/" title="See some of the sites built on WordPress.">Showcase</a></li> <li><a href="https://web.archive.org/web/20110415170542/http://wordpress.org/extend/" title="Taking WordPress beyond your wildest imagination">Extend</a> <ul class="nav-submenu"> <li><a href="https://web.archive.org/web/20110415170542/http://wordpress.org/extend/plugins/" title="Plugins can extend WordPress to do almost anything you can imagine.">Plugins</a></li> <li><a href="https://web.archive.org/web/20110415170542/http://wordpress.org/extend/themes/" title="Find just the right look for your website.">Themes</a></li> </ul></li> <li><a href="https://web.archive.org/web/20110415170542/http://wordpress.org/about/" title="About the WordPress Organization, and where we're going.">About</a></li> <li><a class="current" href="https://web.archive.org/web/20110415170542/http://codex.wordpress.org/Main_Page" title="Documentation, tutorials, best practices.">Docs</a></li> <li><a href="https://web.archive.org/web/20110415170542/http://wordpress.org/development/" title="Come here for the latest scoop.">Blog</a></li> <li><a href="https://web.archive.org/web/20110415170542/http://wordpress.org/support/" title="Support and discussion forums.">Forums</a></li> <li><a href="https://web.archive.org/web/20110415170542/http://wordpress.org/hosting/" title="Find a home for your blog">Hosting</a></li> <li id="download"><a href="https://web.archive.org/web/20110415170542/http://wordpress.org/download/" title="Get it. Got it? Good.">Download</a></li> </ul> </div> </div> <div id="headline"> <div class="wrapper"> <h2>Codex</h2> <div class="portlet" id="p-personal"> <p class="login">Codex tools: <a href="/web/20110415170542/http://codex.wordpress.org/index.php?title=Special:UserLogin&returnto=Using_Smilies">Log in</a> </p> </div> </div> </div> <div id="pagebody"> <div class="wrapper"> <div class="col-10" id="bodyContent"> <h2 class="pagetitle">Using Smilies</h2>  <p class="LanguageLinks" style="border:1px solid #CCCCCC; line-height:1.5; text-align:left; color:#333333; font-size:90%; padding:10px;"><span style="white-space:nowrap;"><a href="/web/20110415170542/http://codex.wordpress.org/Multilingual_Codex" title="Multilingual Codex" class="mw-redirect">Languages</a>:</span> <strong class="selflink">English</strong> • <a href="https://web.archive.org/web/20110415170542/http://wpdocs.sourceforge.jp/%E3%82%B9%E3%83%9E%E3%82%A4%E3%83%AA%E3%83%BC%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9" class="external text" title="http://wpdocs.sourceforge.jp/%E3%82%B9%E3%83%9E%E3%82%A4%E3%83%AA%E3%83%BC%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9">日本語</a> • <a href="/web/20110415170542/http://codex.wordpress.org/zh-cn:%E4%BD%BF%E7%94%A8%E8%A1%A8%E6%83%85%E7%AC%A6%E5%8F%B7" title="zh-cn:使用表情符号">中文(简体)</a> • <small>(<a href="/web/20110415170542/http://codex.wordpress.org/Multilingual_Codex#Language_Cross_Reference" title="Multilingual Codex" class="mw-redirect">Add your language</a>)</small> </p> <table id="toc" class="toc" summary="Contents"><tr><td><div id="toctitle"><h2>Contents</h2></div> <ul> <li class="toclevel-1"><a href="#What_Are_Smileys.3F"><span class="tocnumber">1</span> <span class="toctext">What Are Smileys?</span></a></li> <li class="toclevel-1"><a href="#How_Does_WordPress_Handle_Smileys.3F"><span class="tocnumber">2</span> <span class="toctext">How Does WordPress Handle Smileys?</span></a></li> <li class="toclevel-1"><a href="#To_Turn_off_Graphic_Smileys"><span class="tocnumber">3</span> <span class="toctext">To Turn off Graphic Smileys</span></a></li> <li class="toclevel-1"><a href="#What_Text_Do_I_Type_to_Make_Smileys.3F"><span class="tocnumber">4</span> <span class="toctext">What Text Do I Type to Make Smileys?</span></a></li> <li class="toclevel-1"><a href="#Troubleshooting_Smileys"><span class="tocnumber">5</span> <span class="toctext">Troubleshooting Smileys</span></a> <ul> <li class="toclevel-2"><a href="#Why_Doesn.27t_it_Work.3F"><span class="tocnumber">5.1</span> <span class="toctext">Why Doesn't it Work?</span></a></li> <li class="toclevel-2"><a href="#Why_Doesn.27t_it_Work_for_Me.3F"><span class="tocnumber">5.2</span> <span class="toctext">Why Doesn't it Work for Me?</span></a></li> <li class="toclevel-2"><a href="#Where_Are_My_Smiley_Images_Kept.3F"><span class="tocnumber">5.3</span> <span class="toctext">Where Are My Smiley Images Kept?</span></a></li> <li class="toclevel-2"><a href="#How_Can_I_Have_Different_Smiley_Images_Appear.3F"><span class="tocnumber">5.4</span> <span class="toctext">How Can I Have Different Smiley Images Appear?</span></a></li> <li class="toclevel-2"><a href="#Why_are_my_Smiley_Images_Blank.3F"><span class="tocnumber">5.5</span> <span class="toctext">Why are my Smiley Images Blank?</span></a></li> </ul> </li> <li class="toclevel-1"><a href="#Smiley_CSS"><span class="tocnumber">6</span> <span class="toctext">Smiley CSS</span></a></li> <li class="toclevel-1"><a href="#More_Information_on_Smileys"><span class="tocnumber">7</span> <span class="toctext">More Information on Smileys</span></a></li> </ul> </td></tr></table><script type="text/javascript"> if (window.showTocToggle) { var tocShowText = "show"; var tocHideText = "hide"; showTocToggle(); } </script> <a name="What_Are_Smileys.3F" id="What_Are_Smileys.3F"></a><h2> <span class="mw-headline"> What Are Smileys? </span></h2> <p>Smileys, also known as "emoticons," are <i>glyphs</i> used to convey emotions in your writing. They are a great way to brighten up posts. <a href="/web/20110415170542/http://codex.wordpress.org/File:icon_smile.gif" class="image" title="smile emoticon"><img alt="smile emoticon" src="/web/20110415170542im_/http://codex.wordpress.org/images/c/c0/icon_smile.gif" width="15" height="15" border="0"/></a> </p><p>Text smileys are created by typing two or more punctuation marks. Some examples are: </p><p><tt>;-)</tt> is equivalent to <a href="/web/20110415170542/http://codex.wordpress.org/File:icon_wink.gif" class="image" title="smile emoticon"><img alt="smile emoticon" src="/web/20110415170542im_/http://codex.wordpress.org/images/4/4b/icon_wink.gif" width="15" height="15" border="0"/></a><br/> <tt>:-)</tt> is equivalent to <a href="/web/20110415170542/http://codex.wordpress.org/File:icon_smile.gif" class="image" title="smile emoticon"><img alt="smile emoticon" src="/web/20110415170542im_/http://codex.wordpress.org/images/c/c0/icon_smile.gif" width="15" height="15" border="0"/></a><br/> <tt>:-(</tt> is equivalent to <a href="/web/20110415170542/http://codex.wordpress.org/File:icon_sad.gif" class="image" title="sad emoticon"><img alt="sad emoticon" src="/web/20110415170542im_/http://codex.wordpress.org/images/1/14/icon_sad.gif" width="15" height="15" border="0"/></a><br/> <tt>:-?</tt> is equivalent to <a href="/web/20110415170542/http://codex.wordpress.org/File:icon_confused.gif" class="image" title="confused emoticon"><img alt="confused emoticon" src="/web/20110415170542im_/http://codex.wordpress.org/images/4/41/icon_confused.gif" width="15" height="15" border="0"/></a><br/> </p><p>To learn more about emoticons and their history, see the <a href="https://web.archive.org/web/20110415170542/http://en.wikipedia.org/wiki/Emoticons" class="external text" title="http://en.wikipedia.org/wiki/Emoticons">Wikipedia entry on Emoticons</a>. </p> <a name="How_Does_WordPress_Handle_Smileys.3F" id="How_Does_WordPress_Handle_Smileys.3F"></a><h2> <span class="mw-headline"> How Does WordPress Handle Smileys? </span></h2> <p>By default, WordPress automatically converts text smileys to graphic images. When you type <tt>;-)</tt> in your post you see <a href="/web/20110415170542/http://codex.wordpress.org/File:icon_smile.gif" class="image" title="smile emoticon"><img alt="smile emoticon" src="/web/20110415170542im_/http://codex.wordpress.org/images/c/c0/icon_smile.gif" width="15" height="15" border="0"/></a> when you preview or publish your post. </p> <a name="To_Turn_off_Graphic_Smileys" id="To_Turn_off_Graphic_Smileys"></a><h2> <span class="mw-headline"> To Turn off Graphic Smileys </span></h2> <p>If you turn off graphic smileys, whatever you type in plain text will remain, and be displayed, as plain text. </p> <ol><li> Go to your Admin Panel </li><li> Select <i>Settings -> Writing</i> </li><li> In the <i>Formatting</i> section, <b>uncheck</b> the box for "<i>Convert emoticons like :-) and :-P to graphics on display</i>" </li></ol> <p>Turning off emoticons means that when you type <tt>;-)</tt> in a post you will see <tt>;-)</tt> when you preview or publish your post. So it doesn't stop you from using emoticons as plain text. <a href="/web/20110415170542/http://codex.wordpress.org/File:icon_wink.gif" class="image" title="wink emoticon"><img alt="wink emoticon" src="/web/20110415170542im_/http://codex.wordpress.org/images/4/4b/icon_wink.gif" width="15" height="15" border="0"/></a> </p> <a name="What_Text_Do_I_Type_to_Make_Smileys.3F" id="What_Text_Do_I_Type_to_Make_Smileys.3F"></a><h2> <span class="mw-headline"> What Text Do I Type to Make Smileys? </span></h2> <p>Smiley images and the text used to produce them*: </p> <table border="1" cellpadding="2" width="90%"> <tr> <th> icon </th><th> text </th><th> text </th><th> full text </th><th> icon </th><th> full text </th></tr> <tr> <td><a href="/web/20110415170542/http://codex.wordpress.org/File:icon_smile.gif" class="image" title="smile"><img alt="smile" src="/web/20110415170542im_/http://codex.wordpress.org/images/c/c0/icon_smile.gif" width="15" height="15" border="0"/></a> </td><td>:) </td><td>:-) </td><td>:smile: </td><td><a href="/web/20110415170542/http://codex.wordpress.org/File:icon_lol.gif" class="image" title="lol"><img alt="lol" src="/web/20110415170542im_/http://codex.wordpress.org/images/1/15/icon_lol.gif" width="15" height="15" border="0"/></a> </td><td>:lol: </td></tr> <tr> <td><a href="/web/20110415170542/http://codex.wordpress.org/File:icon_biggrin.gif" class="image" title="biggrin"><img alt="biggrin" src="/web/20110415170542im_/http://codex.wordpress.org/images/1/1f/icon_biggrin.gif" width="15" height="15" border="0"/></a> </td><td>:D </td><td>:-D </td><td>:grin: </td><td><a href="/web/20110415170542/http://codex.wordpress.org/File:icon_redface.gif" class="image" title="redface"><img alt="redface" src="/web/20110415170542im_/http://codex.wordpress.org/images/4/40/icon_redface.gif" width="15" height="15" border="0"/></a> </td><td>:oops: </td></tr> <tr> <td><a href="/web/20110415170542/http://codex.wordpress.org/File:icon_sad.gif" class="image" title="sad"><img alt="sad" src="/web/20110415170542im_/http://codex.wordpress.org/images/1/14/icon_sad.gif" width="15" height="15" border="0"/></a> </td><td>:( </td><td>:-( </td><td>:sad: </td><td><a href="/web/20110415170542/http://codex.wordpress.org/File:icon_cry.gif" class="image" title="cry"><img alt="cry" src="/web/20110415170542im_/http://codex.wordpress.org/images/9/96/icon_cry.gif" width="15" height="15" border="0"/></a> </td><td>:cry: </td></tr> <tr> <td><a href="/web/20110415170542/http://codex.wordpress.org/File:icon_surprised.gif" class="image" title="surprised"><img alt="surprised" src="/web/20110415170542im_/http://codex.wordpress.org/images/7/79/icon_surprised.gif" width="15" height="15" border="0"/></a> </td><td>:o </td><td>:-o </td><td>:eek: </td><td><a href="/web/20110415170542/http://codex.wordpress.org/File:icon_evil.gif" class="image" title="evil"><img alt="evil" src="/web/20110415170542im_/http://codex.wordpress.org/images/c/ca/icon_evil.gif" width="15" height="15" border="0"/></a> </td><td>:evil: </td></tr> <tr> <td><a href="/web/20110415170542/http://codex.wordpress.org/File:icon_eek.gif" class="image" title="eek"><img alt="eek" src="/web/20110415170542im_/http://codex.wordpress.org/images/c/c0/icon_eek.gif" width="15" height="15" border="0"/></a> </td><td>8O </td><td>8-O </td><td>:shock: </td><td><a href="/web/20110415170542/http://codex.wordpress.org/File:icon_twisted.gif" class="image" title="twisted"><img alt="twisted" src="/web/20110415170542im_/http://codex.wordpress.org/images/a/a8/icon_twisted.gif" width="15" height="15" border="0"/></a> </td><td>:twisted: </td></tr> <tr> <td><a href="/web/20110415170542/http://codex.wordpress.org/File:icon_confused.gif" class="image" title="confused"><img alt="confused" src="/web/20110415170542im_/http://codex.wordpress.org/images/4/41/icon_confused.gif" width="15" height="15" border="0"/></a> </td><td>:? </td><td>:-? </td><td>:???: </td><td><a href="/web/20110415170542/http://codex.wordpress.org/File:icon_rolleyes.gif" class="image" title="rolleyes"><img alt="rolleyes" src="/web/20110415170542im_/http://codex.wordpress.org/images/5/5f/icon_rolleyes.gif" width="15" height="15" border="0"/></a> </td><td>:roll: </td></tr> <tr> <td><a href="/web/20110415170542/http://codex.wordpress.org/File:icon_cool.gif" class="image" title="cool"><img alt="cool" src="/web/20110415170542im_/http://codex.wordpress.org/images/a/a3/icon_cool.gif" width="15" height="15" border="0"/></a> </td><td>8) </td><td>8-) </td><td>:cool: </td><td><a href="/web/20110415170542/http://codex.wordpress.org/File:icon_exclaim.gif" class="image" title="exclaim"><img alt="exclaim" src="/web/20110415170542im_/http://codex.wordpress.org/images/f/fc/icon_exclaim.gif" width="15" height="15" border="0"/></a> </td><td>:!: </td></tr> <tr> <td><a href="/web/20110415170542/http://codex.wordpress.org/File:icon_mad.gif" class="image" title="mad"><img alt="mad" src="/web/20110415170542im_/http://codex.wordpress.org/images/2/2e/icon_mad.gif" width="15" height="15" border="0"/></a> </td><td>:x </td><td>:-x </td><td>:mad: </td><td><a href="/web/20110415170542/http://codex.wordpress.org/File:icon_question.gif" class="image" title="question"><img alt="question" src="/web/20110415170542im_/http://codex.wordpress.org/images/b/bd/icon_question.gif" width="15" height="15" border="0"/></a> </td><td>:?: </td></tr> <tr> <td><a href="/web/20110415170542/http://codex.wordpress.org/File:icon_razz.gif" class="image" title="razz"><img alt="razz" src="/web/20110415170542im_/http://codex.wordpress.org/images/4/4e/icon_razz.gif" width="15" height="15" border="0"/></a> </td><td>:P </td><td>:-P </td><td>:razz: </td><td><a href="/web/20110415170542/http://codex.wordpress.org/File:icon_idea.gif" class="image" title="idea"><img alt="idea" src="/web/20110415170542im_/http://codex.wordpress.org/images/1/18/icon_idea.gif" width="15" height="15" border="0"/></a> </td><td>:idea: </td></tr> <tr> <td><a href="/web/20110415170542/http://codex.wordpress.org/File:icon_neutral.gif" class="image" title="neutral"><img alt="neutral" src="/web/20110415170542im_/http://codex.wordpress.org/images/1/1c/icon_neutral.gif" width="15" height="15" border="0"/></a> </td><td>:| </td><td>:-| </td><td>:neutral: </td><td><a href="/web/20110415170542/http://codex.wordpress.org/File:icon_arrow.gif" class="image" title="arrow"><img alt="arrow" src="/web/20110415170542im_/http://codex.wordpress.org/images/0/03/icon_arrow.gif" width="15" height="15" border="0"/></a> </td><td>:arrow: </td></tr> <tr> <td><a href="/web/20110415170542/http://codex.wordpress.org/File:icon_wink.gif" class="image" title="wink"><img alt="wink" src="/web/20110415170542im_/http://codex.wordpress.org/images/4/4b/icon_wink.gif" width="15" height="15" border="0"/></a> </td><td>;) </td><td>;-) </td><td>:wink: </td><td><a href="/web/20110415170542/http://codex.wordpress.org/File:icon_mrgreen.gif" class="image" title="mrgreen"><img alt="mrgreen" src="/web/20110415170542im_/http://codex.wordpress.org/images/7/7b/icon_mrgreen.gif" width="15" height="15" border="0"/></a> </td><td>:mrgreen: </td></tr></table> <p><i>* In some instances, multiple text options are available to display the same smiley.</i> </p> <a name="Troubleshooting_Smileys" id="Troubleshooting_Smileys"></a><h2> <span class="mw-headline"> Troubleshooting Smileys </span></h2> <a name="Why_Doesn.27t_it_Work.3F" id="Why_Doesn.27t_it_Work.3F"></a><h3> <span class="mw-headline"> Why Doesn't it Work? </span></h3> <p>Smileys may have been disabled by your Wordpress admin. Another possibility is the smiley image files have been deleted from <tt>/wp-includes/images/smilies</tt>. </p> <a name="Why_Doesn.27t_it_Work_for_Me.3F" id="Why_Doesn.27t_it_Work_for_Me.3F"></a><h3> <span class="mw-headline"> Why Doesn't it Work for Me? </span></h3> <p><i>If smileys work for others at your site but not for you:</i> </p><p>Type a space before and after your smiley text. That prevents the smiley being accidentally included in the text around it. <a href="/web/20110415170542/http://codex.wordpress.org/File:icon_redface.gif" class="image" title="redface emoticon"><img alt="redface emoticon" src="/web/20110415170542im_/http://codex.wordpress.org/images/4/40/icon_redface.gif" width="15" height="15" border="0"/></a> </p><p>Make sure not to use quotes or other punctuation marks before and after the smiley text. <a href="/web/20110415170542/http://codex.wordpress.org/File:icon_rolleyes.gif" class="image" title="rolleyes emoticon"><img alt="rolleyes emoticon" src="/web/20110415170542im_/http://codex.wordpress.org/images/5/5f/icon_rolleyes.gif" width="15" height="15" border="0"/></a> </p> <a name="Where_Are_My_Smiley_Images_Kept.3F" id="Where_Are_My_Smiley_Images_Kept.3F"></a><h3> <span class="mw-headline"> Where Are My Smiley Images Kept? </span></h3> <p>The smiley or emoticon image graphics are found in the <tt>/wp-includes/images/smilies</tt> directory. </p><p>Note that smileys is spelled 'eys' in this documentation and the directory name for the smiley images is '<i>smilies</i>, spelled 'ies'. <a href="/web/20110415170542/http://codex.wordpress.org/File:icon_eek.gif" class="image" title="eek emoticon"><img alt="eek emoticon" src="/web/20110415170542im_/http://codex.wordpress.org/images/c/c0/icon_eek.gif" width="15" height="15" border="0"/></a> </p> <a name="How_Can_I_Have_Different_Smiley_Images_Appear.3F" id="How_Can_I_Have_Different_Smiley_Images_Appear.3F"></a><h3> <span class="mw-headline"> How Can I Have Different Smiley Images Appear? </span></h3> <p><i>Simplest way:</i> </p> <ol><li> Find your smiley image files in the <tt>/wp-includes/images/smilies</tt> directory and back them up to another directory </li><li> Note the names of each smiley file. Your files must match these names and should be in the same 'gif' image format. </li><li> For predictable behavior, the image sizes should be similar. </li><li> Upload your new files to the <tt>/wp-includes/images/smilies</tt> directory with an <a href="/web/20110415170542/http://codex.wordpress.org/FTP_Clients" title="FTP Clients">FTP program</a>. </li></ol> <p><i>If you're up to hacking the code:</i> </p><p>If you really must change the file names of the images, edit the file that refers to these images, '<b>vars.php'</b> (in WordPress 2.2, they're located in '<b>functions.php'</b>), situated in the <tt>/wp-includes/</tt> directory. Follow all precautions when "hacking code". </p><p>You can read a tutorial explaining all this in more detail, as well as how to avoid hacking WP code, at <a href="https://web.archive.org/web/20110415170542/http://aranea.zuavra.net/index.php/20/" class="external text" title="http://aranea.zuavra.net/index.php/20/">Ars Aranea</a>. </p><p>There are also WordPress Plugins which allow you to customize your smilies in WordPress. </p> <a name="Why_are_my_Smiley_Images_Blank.3F" id="Why_are_my_Smiley_Images_Blank.3F"></a><h3> <span class="mw-headline"> Why are my Smiley Images Blank? </span></h3> <p>If you recently uploaded the images, it could be that the images have been uploaded in <i><b>ASCII</b></i> format by your FTP program. Re-upload the smileys ensuring that they are transferred in <i><b>BINARY</b></i> format. </p><p>Some FTP programs have an <b>auto-detect</b> setting which will upload files in the correct format without user intervention. If you have such a setting, turn it on. </p> <a name="Smiley_CSS" id="Smiley_CSS"></a><h2> <span class="mw-headline"> Smiley CSS </span></h2> <p>The smiley images in WordPress are automatically given a <a href="/web/20110415170542/http://codex.wordpress.org/Glossary#CSS" title="Glossary">CSS</a> class of <b>wp-smiley</b> when they are displayed in a post. You can use this class to style your smileys differently from other post images. </p><p>For example, it's not uncommon to set up images in a post to appear on the left-hand side of the content with text flowing around the image. The CSS for that might look like this: </p> <pre> .post img { float: left; } </pre> <p>This would typically affect all images in a post, <b>including</b> your smiley images. To <i>override</i> this so that smileys stay inline, you could add this to your CSS: </p> <pre> img.wp-smiley { float: none; } </pre> <p>For more on CSS in WordPress, you might want to <a href="/web/20110415170542/http://codex.wordpress.org/CSS" title="CSS">start here</a>. </p> <a name="More_Information_on_Smileys" id="More_Information_on_Smileys"></a><h2> <span class="mw-headline"> More Information on Smileys </span></h2> <ul><li> <a href="https://web.archive.org/web/20110415170542/http://en.wikipedia.org/wiki/Emoticon" class="external text" title="http://en.wikipedia.org/wiki/Emoticon">Wikipedia - Emoticon</a> </li></ul>  <div class="printfooter"> Retrieved from "<a href="https://web.archive.org/web/20110415170542/http://codex.wordpress.org/Using_Smilies">http://codex.wordpress.org/Using_Smilies</a>"</div> <div id="catlinks"><div id="catlinks" class="catlinks"><div id="mw-normal-catlinks"><a href="/web/20110415170542/http://codex.wordpress.org/Special:Categories" title="Special:Categories">Categories</a>: <span dir="ltr"><a href="/web/20110415170542/http://codex.wordpress.org/Category:Getting_Started" title="Category:Getting Started">Getting Started</a></span> | <span dir="ltr"><a href="/web/20110415170542/http://codex.wordpress.org/Category:WordPress_Lessons" title="Category:WordPress Lessons">WordPress Lessons</a></span> | <span dir="ltr"><a href="/web/20110415170542/http://codex.wordpress.org/Category:Design_and_Layout" title="Category:Design and Layout">Design and Layout</a></span></div></div></div>  </div> <div class="col-2"> <ul class="submenu"> <li id="n-mainpage"><a href="/web/20110415170542/http://codex.wordpress.org/Main_Page">Home Page</a></li> <li><a href="/web/20110415170542/http://codex.wordpress.org/WordPress_Lessons">WordPress Lessons</a></li> <li><a href="/web/20110415170542/http://codex.wordpress.org/Getting_Started_with_WordPress">Getting Started</a></li> <li><a href="/web/20110415170542/http://codex.wordpress.org/Working_with_WordPress">Working with WordPress</a></li> <li><a href="/web/20110415170542/http://codex.wordpress.org/Blog_Design_and_Layout">Design and Layout</a></li> <li><a href="/web/20110415170542/http://codex.wordpress.org/Advanced_Topics">Advanced Topics</a></li> <li><a href="/web/20110415170542/http://codex.wordpress.org/Troubleshooting">Troubleshooting</a></li> <li><a href="/web/20110415170542/http://codex.wordpress.org/Developer_Documentation">Developer Docs</a></li> <li><a href="/web/20110415170542/http://codex.wordpress.org/About_WordPress">About WordPress</a></li> </ul> <h3>Codex Resources</h3> <ul class="submenu"> <li id="n-portal"><a href="/web/20110415170542/http://codex.wordpress.org/Codex:Community_Portal">Community portal</a></li> <li id="n-currentevents"><a href="/web/20110415170542/http://codex.wordpress.org/Current_events">Current events</a></li> <li id="n-recentchanges"><a href="/web/20110415170542/http://codex.wordpress.org/Special:RecentChanges">Recent changes</a></li> <li id="n-randompage"><a href="/web/20110415170542/http://codex.wordpress.org/Special:Random">Random page</a></li> <li id="n-help"><a href="/web/20110415170542/http://codex.wordpress.org/Help:Contents">Help</a></li> </ul> </div> </div> </div> <div id="footer"> <div class="wrapper"> <p> <a href="https://web.archive.org/web/20110415170542/http://wordpress.org/about/privacy/">Privacy</a> | <a href="https://web.archive.org/web/20110415170542/http://wordpress.org/about/gpl/">License / GPL</a>     See also: <a href="https://web.archive.org/web/20110415170542/http://wordpress.com/" title="Hassle-free WP hosting">WordPress.com</a> | <a href="https://web.archive.org/web/20110415170542/http://wordpress.tv/" title="Videos, tutorials, WordCamps">WordPress.TV</a> | <a href="https://web.archive.org/web/20110415170542/http://central.wordcamp.org/" title="Find a WordPress event near your home">WordCamp</a> | <a href="https://web.archive.org/web/20110415170542/http://jobs.wordpress.net/" title="Find or post WordPress jobs">WP Jobs</a> | <a href="https://web.archive.org/web/20110415170542/http://ma.tt/" title="Co-founder of WordPress, an example of what WordPress can do">Matt</a> | <a href="https://web.archive.org/web/20110415170542/http://www.facebook.com/WordPress">Fan WP on Facebook</a> | <a href="https://web.archive.org/web/20110415170542/http://wordpress.org/news/feed/" class="rsslink">Blog RSS</a> </p> <h6>Code is Poetry</h6> </div> </div> </body>  </html>