Emoji size (4.3)

[Square Wheels]

Can he default size of the emoji that is displayed be increased?  I have no idea what most of them are.

[Day_]

In your custom.css add span.ipsEmoji {font-size: number px}

[Square Wheels]

1 hour ago, dayh said:

In your custom.css add span.ipsEmoji {font-size: number px}

Thanks, I tried it.  Didn't work for ones already posted, does it only affect new ones?  I even tried 1000 px just to make sure.

[AlexWright]

25 minutes ago, Square Wheels said:

Thanks, I tried it.  Didn't work for ones already posted, does it only affect new ones?  I even tried 1000 px just to make sure.

It should look like this in the theme custom css:

.ipsEmoji {font-size: 12px!important}

[Square Wheels]

6 minutes ago, AlexWright said:

It should look like this in the theme custom css:

 

.ipsEmoji {font-size: 12px!important}

 

Thanks!

Is there a way for a resized one to maintains it's custom setting?  I set them to 20px, but some members have resized them to be bogger when they post them, now they are all 20px.

[AlexWright]

42 minutes ago, Square Wheels said:

Thanks!

Is there a way for a resized one to maintains it's custom setting?  I set them to 20px, but some members have resized them to be bogger when they post them, now they are all 20px.

My apologies, I thought you meant to limit them. Remove the important property on the css.

.ipsEmoji {font-size: 12px}

[Square Wheels]

8 minutes ago, AlexWright said:

My apologies, I thought you meant to limit them. Remove the important property on the css.

.ipsEmoji {font-size: 12px}

Hmm, that is what I tried, but it's still resizing ones people resized on their own.

https://squarewheelscycling.com/index.php?/topic/67241-i-love-love-love-the-new-emoticon-listing/

[AlexWright]

5 minutes ago, Square Wheels said:

Hmm, that is what I tried, but it's still resizing ones people resized on their own.

https://squarewheelscycling.com/index.php?/topic/67241-i-love-love-love-the-new-emoticon-listing/

It should only do so if the post author doesn't explicitly size it using the Size menu. Emoticons should take the default text size set for posts. I was only fixing what Dayh had posted.

[Nathan Explosion]

Here's the problem....

Normal emoji code (taking Native as the chosen type....it's different if you go for Twitter or Emojione style as they convert the <span> to <img> tags there)

<span class="ipsEmoji">?</span>

Resized emoji code:

<span style="font-size:72px;"><span class="ipsEmoji">?</span></span>

So targeting the .ipsEmoji class overrides what is in place via the containing <span>

[Square Wheels]

29 minutes ago, AlexWright said:

It should only do so if the post author doesn't explicitly size it using the Size menu. Emoticons should take the default text size set for posts. I was only fixing what Dayh had posted.

Here's a test, it didn't work. https://squarewheelscycling.com/index.php?/topic/67241-i-love-love-love-the-new-emoticon-listing/&do=findComment&comment=608066

15 minutes ago, Nathan Explosion said:

Here's the problem....

Normal emoji code (taking Native as the chosen type....it's different if you go for Twitter or Emojione style as they convert the <span> to <img> tags there)

<span class="ipsEmoji">?</span>

Resized emoji code:

<span style="font-size:72px;"><span class="ipsEmoji">?</span></span>

So targeting the .ipsEmoji class overrides what is in place via the containing <span>

Bummer.  Do you think there is a work around?  I'm old, I cannot decipher what the images are supposed to be.  I want the default size a little bigger, but also allow people to resize them on their own, if they want.

[Nathan Explosion]

22 minutes ago, Square Wheels said:

Do you think there is a work around?

I don't think it's possible with CSS but might be with jquery - I'll take a look later.

[Square Wheels]

2 minutes ago, Nathan Explosion said:

I don't think it's possible with CSS but might be with jquery - I'll take a look later.

I'd pay for a solution.  

[Nathan Explosion]

A quick and dirty solution....

1. Edit your theme's globalTemplate
2. Prior to the closing </body> add the content from the code box below
3. Save the template

<script type="text/javascript">
	$(document).ready(function(){
		var a;
		$('.ipsEmoji').each(function(){
			var i = $(this);
			var p = $(this).parent();
			if(p.is("span")) {
				a = p.prop("attributes");
				$.each(a, function() {
					if (this.name == "style") {
						i.attr(this.name, this.value);
					}
				});
			}
		});
	});
</script>

 

[Nathan Explosion]

1 hour ago, Square Wheels said:

I'd pay for a solution.  

oooohhhh....I didn't see that. Feel free to throw me some beers ?

[Square Wheels]

15 minutes ago, Nathan Explosion said:

oooohhhh....I didn't see that. Feel free to throw me some beers ?

I'll give your other solution a try later, but yes, if you released this as an add on, I'd happily pay.

[jcdesign]

I am using this css code to control the size.

 

.chatboxEmoji {
    font-size: 20px;
    max-height: 27px;
    max-width: 27px;
}

 

[Nathan Explosion]

20 hours ago, Square Wheels said:

I'll give your other solution a try later, but yes, if you released this as an add on, I'd happily pay.

Had some more time today to play around and there is no plugin or jquery required...here's the css solution:

div[data-role="commentContent"] > p > span.ipsEmoji{
	font-size:12px; 
}

 

[Square Wheels]

31 minutes ago, Nathan Explosion said:

Had some more time today to play around and there is no plugin or jquery required...here's the css solution:

div[data-role="commentContent"] > p > span.ipsEmoji{
	font-size:12px; 
}

 

Hmm, I set mine to 20px, but they seem to have gone back to their original size.  Here's a test post (only for Novus theme): https://squarewheelscycling.com/index.php?/topic/67241-i-love-love-love-the-new-emoticon-listing/&do=findComment&comment=608692

The large one was set manually at 64 px.

[Nathan Explosion]

OK.... you're not using the native Emoji, but using emojione. I'll see what can be done...

div[data-role="commentContent"] > p > .ipsEmoji{
	font-size:22px; 
}

That works for me - but may not for you. I don't actually see a difference in size in your html:

You:

<img src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/64/1f603.png" class="ipsEmoji" alt="?">

Mine:

<span style="font-size:72px;"><img src="https://cdn.jsdelivr.net/emojione/assets/3.1/png/64/1f603.png" class="ipsEmoji" alt="?"></span>

Note the <span> around mine - that is the result of me doing the following to resize the emoji:

1. Add the emoji
2. Highlight it, and then choose 'Size' and change the value.

That places the span around it.

How are you doing the resize?

This post shows resized ones correctly:

https://squarewheelscycling.com/index.php?/topic/67241-i-love-love-love-the-new-emoticon-listing/&do=findComment&comment=607891

They have the <span> wrapped for the resize (although maybe as a result of the css in place not affecting it at all)

Let me know how you are doing your resize for those test posts.

[Square Wheels]

4 minutes ago, Nathan Explosion said:

OK.... you're not using the native Emoji, but using emojione. I'll see what can be done...

 

Sorry about that.  I am on Windows 7, native doesn't work for me.

You'll need to send my your paypal address if you get this worked out.  :)

[The Old Man]

Thanks for looking at this. Default emoji font-size should be a built-in AdminCP option in Theme Settings. They are far too small when posted.

[Genestoy]

1 hour ago, Nathan Explosion said:

Had some more time today to play around and there is no plugin or jquery required...here's the css solution:

div[data-role="commentContent"] > p > span.ipsEmoji{
	font-size:12px; 
}

 

I just tried this on 4.2.9 and did not work either, maybe only works for 4.3? Thanks Nathan for all you do trying to help folks!

[Nathan Explosion]

21 minutes ago, Genestoy said:

I just tried this on 4.2.9 and did not work either, maybe only works for 4.3? Thanks Nathan for all you do trying to help folks! 

Not surprised - this emoji functionality that I'm targeting was introduced in 4.3

Emoji on prior versions....no idea....they are just plain content, nothing special around them to target with css.

<div data-role='commentContent' class='ipsType_normal ipsType_richText ipsContained' data-controller='core.front.core.lightboxedImages'>
	<p>
	&#128512;
	</p>
  <p>
	<span style="font-size:36px;">&#128512;</span>
  </p>

 

[Square Wheels]

28 minutes ago, The Old Man said:

Thanks for looking at this. Default emoji font-size should be a built-in AdminCP option in Theme Settings. They are far too small when posted.

@Charles, any chance this could be considered?

[Yamamura]

img.ipsEmoji {
  height: 1.5em;
  width: 1.5em;
}

1.5 — the size you want by default (for example 1.5). The size must be specified in em, not in px.