Styling Emojis?

Yes the emojis added by WP have a class of wp-smiley that can be used for styling, etc.

Hi Jeff, that’s weird as mine don’t appear to have any class attached to them.

Are they added by WP or are you entering actual emoji characters into chat?

They’re added by users in the chat room when entering text. What do you mean added by WordPress?

WP automatically converts text like :) to emojis ?? and such emojis have the class wp-smiley added for styling, etc. I’m not sure about adding actual emoji characters. Do you have an example?

Here’s a grab of the output:

Yeah great but I can’t copy and paste an emoji from your screenshot.

Like actually copy/paste an emjoi or two in your next reply, so I can grab it and try it in the demo to see what’s up.

Sorry Jeff, I thought that would be enough to visualise the formatting is not being applied. Here’s a link to my demo. The only reason I didn’t supply this before is I’m getting spammed already by someone attempting to use HTML links in the body of the chats and the chatname. I tried using the url block in settings but that didn’t work. I’ll take this link down once you’ve had a look.

• This reply was modified 4 years, 6 months ago by deeve.

Got it, feel free to edit/delete as needed.

Yeah if you examine the source code for the chats, you will see that all user-entered emoji characters are classed with emoji. So you can target any/all emjois with the following CSS:

.emoji, .wp-smiley { property: value; }

I’ve tried that but no joy. Why is there no class applied in the output then?

It works in Chrome code inspector. Maybe there is a bug or issue with how you are adding the CSS.

If I look at the output again in Chrome console I see a span for the name but nothing for the chat itself or the emojis:

Here is what I am seeing as a logged-out visitor:

https://perishablepress.com/share/sac-emoji-class.jpg