Hey, quick Q.

Is it possible to only show custom emojis:

And hide all other emojis / icons?

 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

 

.ipsIconPicker__container [data-icon-category] {
    order: 1;
    flex: 0 0 auto;
}

This portion puts all categories at the same level as Libar emojis

 

/* List out any category titles you want up top here */.ipsIconPicker__container :is([data-icon-category="Libar Emoji"]) {
	order: 1;
}

Should just be

.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"], [data-icon-category="Libar Emoji"]) {
	order: 0;
}

 

Works not - i have not categoriy "Emoticons" -

I have two custom categories - Classic and Libar Emoji and will have them on place 1 and place 2 (1.Classic - 2.Libar Emoji)

Ah, I didn't see you have it called "Classic", but still if you just put "Classic" in the CSS it will bring them both up top. Here's an example where I created a custom set called "Libar Emoji"

Now, if you need to sort them further, increasing the order one more like you did in the OP is the right idea, but you had conflicting orders set on the base category selector; this works for me

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

/* List out any category titles you want up top here */
.ipsIconPicker__container :is([data-icon-category="Classic"]) {
	order: 0;
}
.ipsIconPicker__container :is([data-icon-category="Libar Emoji"]) {
	order: 1;
}

Thanks for referencing your site, you have a space in the name "Libar Emoji ". Adding that space to the CSS does the trick, or it would probably be better to just rename on the backend to remove the space

 

 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

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.

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.

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

 

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.

 

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

Ah phew not working for me either...

Would be nice to get a patch for this for the official release. I guess it’s not that easy since it hasn’t been offered yet. Hopefully soon. 🤞🏼

The custom (non phone) emoji are still far too small when selected on desktop

I have custom emoji like this and wonder how this will look when selected, tiny I assume

Edited March 15Mar 15 by marklcfc