Changes to wp-smiley CSS Class

  • Unknown's avatar
    lorelle · Member ·

    The long-time settings for the wp-smiley CSS class on WordPress.com has changed. We’ve been using wp-smiley for almost 10 years as a default style in WordPress Themes for emoticons (smileys), as well as removing borders and spacing around images. Now it has a size in the CSS and all images using this class are tiny tiny tiny.

    The alternative is to style every image to remove the borders and spacing around the images and overwrite the Theme’s spacing and borders, adding bulk and confusing clients and others with extra code. I’m doing this as fast as I can find it with my own clients on WordPress.com, and on my own sites, and I live for the day when search and replace in the content areas is available.

    I’m not sure why the size was added to the wp-smiley class, but it is and it exists globally across WordPress.com. I’ve tested this with multiple sites and Themes.

    Is there another CSS class to remove the spacing and borders from images?

    Thanks.

    The blog I need help with is: (visible only to logged in users)

  • supernovia · Staff ·

    Hi @lorelle, ahh, sorry to hear that. Let me see what I can find for you, but in the meantime, can you send a few screenshots of the issue in action? You could upload them to cloudup.com or dropbox or your media library, even, then link them here. Thanks!

  • supernovia · Staff ·

    Also, if you’ll send a link to some pages where you’re having trouble now, that would be even more useful. Thanks!

  • Unknown's avatar
    lorelle · Member ·

    Below the signature of every post (save the most recent when the issue was found) here: https://lorelle.wordpress.com/

  • Unknown's avatar
    lorelle · Member ·

    Ah, I should explain. The little dots under the signature should be “buttons” for social media, etc., links. They should be about 50px wide, not microscopic dots.

    Thanks.

  • supernovia · Staff ·

    Oh, so not your sharing icons but these other sharing icons you’ve added as part of your signature?
    https://cloudup.com/cU6So87uwsO

    Were you adding the wp-smiley class manually to some HTML? Let me think on this; in the meantime you might consider putting your entire signature in its own div so you can better control its settings.

  • Unknown's avatar
    lorelle · Member ·

    Sorry for the delay responding. I’ve explained it well in the first post. wp-smiley was a class used on emoticons/smileys for nearly a decade in the core of WordPress to remove the border around a graphic. It is now gone.

    I will not be able to go through 3K posts to change the DIV as search and replace is still not on WordPress.com (dreaming!).

    Here is what I’ve tried with the Custom CSS to no avail:

    img[src$=".gif"] {width:100%;}
.wp-smiley {width:60px; border:none;}

    I’ve also played with a variety of pixel widths, even though the gif images all have a set width. The signature, also a gif, changes sometimes with the first CSS statement, but the hand-crafted social icons do not.

    The icons use the wp-smiley style, and something is over-powering the custom CSS on the Theme, which led me to believe that the change happened in the core. If the set width doesn’t control the width of the image, and if the Child Theme can’t overwrite wp-smiley what is?

    This isn’t the end of the world, but it could lead to bigger issues if the core CSS for WordPress has changed, or is possibly broken on WordPress.com. It could be a symptom. Who knows. I’m just maintaining my long-time reputation as an expert at breaking WordPress since 2003. LOL!

  • Unknown's avatar
    lorelle · Member ·

    If this helps, though you can see it on the site:

    <p><img src="http://lorelle.files.wordpress.com/2006/08/sig.gif" alt="Signature."></p>
<p><font size="-1"><a href="http://lorelle.wordpress.com/subscribe/" title="Subscribe."><img class="wp-smiley" src="https://lorelle.files.wordpress.com/2015/01/swirl-subscribe.gif" width="50" alt="Subscribe." /></a> <a href="http://lorelle.wordpress.com/feed/" title="Feed"><img class="wp-smiley" src="https://lorelle.files.wordpress.com/2015/01/rss-swirl.gif" width="50" alt="Feed."></a>...

    The signature has no CSS class but the icons do. I can change the icons wp-smiley class but nothing I do changes what they look like, so something in wp-smiley at the core, parent, or somewhere is changing the styles, not allowing modification.

  • supernovia · Staff ·

    Thanks @lorelle , I’ll see if we can find a way to help fix this.

  • supernovia · Staff ·

    @lorelle, would you be willing to use something like this to override all of the wp-smiely settings?

    body img.wp-smiley {
width: auto !important;
height: auto !important;
}
  • Unknown's avatar
    lorelle · Member ·

    That works. I forgot about the auto width. Thanks! I’ll apply it to other WordPress.com sites, though most aren’t using the paid customization feature so it will have to be manually changed. SIGH. Hard to charge them to fix something WordPress.com changed without warning.

    I’d still like to know why it changed, but this works for those with custom CSS. Thanks.

  • The topic ‘Changes to wp-smiley CSS Class’ is closed to new replies.