Posted October 6, 20195 yr It would be convenient to have a function (or, even a plugin/extension) that relies emojis, if they are on a line of their own, to a definable size. emojis are generally pretty small, which works fine if they are inline - but on a line of their own, they look better when enlarged. Most of the messaging apps do that nowadays. It's cool like this --> 🙂 But by itself, looks better like this:🙂
October 7, 20195 yr You could actually do this already - add this to your custom.css theme file: .ipsType_richText span.ipsEmoji:only-child { font-size: 48px; }
October 7, 20195 yr Author 17 hours ago, Rikki said: You could actually do this already - add this to your custom.css theme file: .ipsType_richText span.ipsEmoji:only-child { font-size: 48px; } Awesome trick - thanks!
October 8, 20195 yr Author On 10/6/2019 at 8:06 PM, Rikki said: You could actually do this already - add this to your custom.css theme file: .ipsType_richText span.ipsEmoji:only-child { font-size: 48px; } Except - this makes ALL emoji larger -- even those that are inline on the same line (which, in my example, should have remained untouched). Any extension to that custom CSS to make that distinction?
October 8, 20195 yr yeah well that truly does not work that well too. if you put 2 smileys in one line the last one is big instead of both being small. goal what I think it was just as in skype. if an emoji is the only thing in one line then it is big size. if there is text or more than 1 emoji - all remains as usual.
October 8, 20195 yr 5 hours ago, DaffyDuck said: Except - this makes ALL emoji larger -- even those that are inline on the same line (which, in my example, should have remained untouched). That's because the emoji is the only child: <p> Hello <span class="ipsEmoji">😃</span> </p> The text does not count as a child. I'm not sure what the answer is though.
October 8, 20195 yr 5 hours ago, DaffyDuck said: Except - this makes ALL emoji larger -- even those that are inline on the same line (which, in my example, should have remained untouched). Any extension to that custom CSS to make that distinction? Whoops, you're right. Text isn't a 'child' in CSS, so actually I don't think there'd be a way to do this with CSS alone. Sorry for the confusion!
October 8, 20195 yr 1 hour ago, DaffyDuck said: Bummer. Doesn’t the emoji identify itself differently than text? Yes, but this requires that the emoji is the only child of the container it is in. Since text is not considered a child it doesn't work.
October 10, 20195 yr Do you mean this: or this: First one: .ipsEmoji:not(:only-child):first-child { font-size:48px; } Second one: .ipsEmoji:not(:only-child) { font-size:48px; }
October 10, 20195 yr I guess this would be the version that makes sense. Some messaging apps use it this way.
October 10, 20195 yr Yeah, that's definitely more difficult....and my suggestions earlier fall over if it's a single emoji on its own. Back to the drawing board!!
October 10, 20195 yr If I’m to be totally honest, I’d prefer this be done through the editor. The whole point of a WYSIWYG editor is to be able to see how it’ll look when posted, not for it to be displayed differently to how it was composed. I therefore think this is a good feedback post and something best accomplished through the editor.
October 10, 20195 yr 2 minutes ago, The Heff said: If I’m to be totally honest, I’d prefer this be done through the editor. The whole point of a WYSIWYG editor is to be able to see how it’ll look when posted, not for it to be displayed differently to how it was composed. This assumes it would show differently in the editor, which is not necessarily the case. The CSS could apply there as well.
October 10, 20195 yr Just now, opentype 2 minutes ago, The Heff said: If I’m to be totally honest, I’d prefer this be done through the editor. The whole point of a WYSIWYG editor is to be able to see how it’ll look when posted, not for it to be displayed differently to how it was composed. This assumes it would show differently in the editor, which is not necessarily the case. The CSS could apply there as well. I hadn’t considered that. 👍🏻
October 13, 20195 yr Author On 10/10/2019 at 7:18 AM, Nathan Explosion said: Do you mean this: or this: First one: .ipsEmoji:not(:only-child):first-child { font-size:48px; } Second one: .ipsEmoji:not(:only-child) { font-size:48px; } Somehow, either of these doesn't do anything, once added to the theme's custom.css file. Anything else I should do?
October 20, 20195 yr Author On 10/10/2019 at 9:14 AM, opentype said: This assumes it would show differently in the editor, which is not necessarily the case. The CSS could apply there as well. It actually doesn't - in the case of my forum's theme, it does work in the editor. It makes the emoji larger within the editor, but once posted, the emojis shows in the regular size. So, we're missing something in this CSS. I'm using this one: .ipsEmoji:not(:only-child) { font-size:48px; } This may be related to the theme.
October 21, 20195 yr On 10/20/2019 at 7:10 AM, DaffyDuck said: This may be related to the theme Most likely, yes. Provide a link to your site so that people can see the CSS that is being applied.
October 21, 20195 yr 2 things could be happening... You added the css in the wrong stylesheet. Or, something is overwriting it. Try using... font-size:48px !important;
Archived
This topic is now archived and is closed to further replies.