Jump to content

Emoji size (4.3)


Square Wheels
 Share

Recommended Posts

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.

Edited by Square Wheels
Link to comment
Share on other sites

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}
Edited by AlexWright
Link to comment
Share on other sites

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/

Link to comment
Share on other sites

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.

Edited by AlexWright
Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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>

 

Edited by Nathan Explosion
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Edited by Nathan Explosion
Link to comment
Share on other sites

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.  :)

Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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>

 

Edited by Nathan Explosion
😀
Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...