Custom emojis

February 27Feb 27

Thanks for this! Got it to work. Excited to turn off native emojis and font awesome icons with the upcoming update.
Anyone know how I can add some space and have these emotes (which are 55 x 55 px by default) to display proportionally (even if they display smaller than 55 x 55).
Thank you.

Jordan, you got this to work correctly?

I added the code, and while it did place the custom set I made at the top of the list, when I click on one, it does not insert it in the post. You are not seeing this issue?

Thanks.

February 27Feb 27

Community Expert

I added the code, and while it did place the custom set I made at the top of the list, when I click on one, it does not insert it in the post.

There is an open bug report for that. This happens whether or not you rearrange the emoji panel

Helpful: 1

SC36DC
1

February 27Feb 27

Author

Jordan, you got this to work correctly?

I added the code, and while it did place the custom set I made at the top of the list, when I click on one, it does not insert it in the post. You are not seeing this issue?

Thanks.

Yes, it works for me.

Here is the code I used:

.ipsIconPicker [data-role="icons"] {
    display:flex;
    flex-direction:column;
}
.ipsIconPicker__container [data-icon-category] {
    order: 1;
    flex: 0 0 auto;
}

/* List out any category titles you want up top here */
.ipsIconPicker__container :is([data-icon-category="Emotes"], [data-icon-category="Sass"], [data-icon-category="Happy"], [data-icon-category="Laughing"], [data-icon-category="Memes"], [data-icon-category="Sad"], [data-icon-category="Shocked"]) {
	order: 0;
}

Just replace the names and see if it works.

February 27Feb 27

Anyone know how I can add some space and have these emotes (which are 55 x 55 px by default) to display proportionally (even if they display smaller than 55 x 55).

Did you get this figured out? If you did, I would be interested in the fix. Thank you.

Yes, it works for me.

Here is the code I used:

.ipsIconPicker [data-role="icons"] {
    display:flex;
    flex-direction:column;
}
.ipsIconPicker__container [data-icon-category] {
    order: 1;
    flex: 0 0 auto;
}

/* List out any category titles you want up top here */
.ipsIconPicker__container :is([data-icon-category="Emotes"], [data-icon-category="Sass"], [data-icon-category="Happy"], [data-icon-category="Laughing"], [data-icon-category="Memes"], [data-icon-category="Sad"], [data-icon-category="Shocked"]) {
	order: 0;
}

Just replace the names and see if it works.

Thanks for the reply. @Marc already stated that this was a bug. I'm assuming when people add custom "emojis", and when they try to insert it into a post, it does not work. The problem I am having. Regardless if you rearranged the emoji sets or not.

March 10Mar 10

Author

After the recent IC update, me or my members can no longe select custom emotes. The menu pops up, but when clicking one, it does not populate in the reply editor.

Jordan, you got this to work correctly?

I added the code, and while it did place the custom set I made at the top of the list, when I click on one, it does not insert it in the post. You are not seeing this issue?

Thanks.

Ahh just seeing this again, yea this is happening to me now too

SC36DC
1

March 10Mar 10

After the recent IC update, me or my members can no longe select custom emotes. The menu pops up, but when clicking one, it does not populate in the reply editor.
Ahh just seeing this again, yea this is happening to me now too

Yeah hopefully this gets fixed in the next update, and the Giphy thing.

March 11Mar 11

Community Expert

Yeah hopefully this gets fixed in the next update, and the Giphy thing.

We have them on our radar :)

Jordan Miller and SC36DC
2

March 14Mar 14

I can state we have a local branch where you will be able to toggle any of custom emojis, native emojis and Font Awesome Icons to come in a future release. For the time being, you can do this to show your custom emojis up top, just replace Emoticons in the last rule set with the name of your custom category.
.ipsIconPicker [data-role="icons"] {
    display:flex;
    flex-direction:column;
}
.ipsIconPicker__container [data-icon-category] {
    order: 1;
    flex: 0 0 auto;
}

/* List out any category titles you want up top here */.ipsIconPicker__container :is([data-icon-category="Emoticons"]) {
	order: 0;
}
It also should work with multiple custom categories by adding them inside the :is() clause, separated by commas
.ipsIconPicker__container :is([data-icon-category="Emoticons"], [data-icon-category="Other Custom Icon Category"])
Applying to this site with dev tools, it looks like this

Hi where do I add this code to CSS? Just theme editor and the blank CSS box?

After the recent IC update, me or my members can no longe select custom emotes. The menu pops up, but when clicking one, it does not populate in the reply editor.
Ahh just seeing this again, yea this is happening to me now too

Ah phew not working for me either...