Hey, quick Q.

Is it possible to only show custom emojis:

And hide all other emojis / icons?

Not currently, only search is the only way. There are some talks about this internally. I've moved this to Feedback so we don't lose sight of this.

It really should be possible, I've never had all these phone emoji showing on the dropdown

 

Not currently, only search is the only way. There are some talks about this internally. I've moved this to Feedback so we don't lose sight of this.

Oh ok gotcha.

I'm not sure if it's just me, but the emojis drop down on my community as well as here loads extremely slow and sometimes crashes the page.

In my custom emojis, they're organized by type (folder) in the adminCP, but after the upgrade it appears that doesn't play a role anymore?

Worth mentioning that I love v5 so bear with me while I sort through some of these items.

 

It really should be possible, I've never had all these phone emoji showing on the dropdown

Yes agree, what's interesting is that the smiley emojis are native to users on their phone (which for my community is 85% of all traffic), so it's a little redundant. Would love to only show custom emojis instead.

 

Yes agree, what's interesting is that the smiley emojis are native to users on their phone (which for my community is 85% of all traffic), so it's a little redundant. Would love to only show custom emojis instead.

This exactly. Would also love to be able to Group (custom) emojis, have different sets under their own name. 🙏🏼

You can hide default emojis from the drop-down list with CSS, but they will still be searchable and insertable with :emoji_name:.

.ipsIconPicker__container div[data-role="icons"] section:nth-child(1),
.ipsIconPicker__container div[data-role="icons"] section:nth-child(2),
.ipsIconPicker__container div[data-role="icons"] section:nth-child(3),
.ipsIconPicker__container div[data-role="icons"] section:nth-child(4),
.ipsIconPicker__container div[data-role="icons"] section:nth-child(5),
.ipsIconPicker__container div[data-role="icons"] section:nth-child(6),
.ipsIconPicker__container div[data-role="icons"] section:nth-child(7),
.ipsIconPicker__container div[data-role="icons"] section:nth-child(8) {
  display: none;
}

Alternatively, you could re-order the list (which is what I've done in my community). There are 8 default groups. Let's say you add 2 custom emoji groups and want them on top of the list, you would do something like this:

.ipsIconPicker__container {
  display: block;
  overflow: scroll;
}

.ipsIconPicker__container div[data-role="icons"] {
  display: flex;
  flex-direction: column;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(9) {
  order: 1;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(10) {
  order: 2;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(1) {
  order: 3;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(2) {
  order: 4;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(3) {
  order: 5;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(4) {
  order: 6;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(5) {
  order: 7;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(6) {
  order: 8;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(7) {
  order: 9
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(8) {
  order: 10;
}

Edited February 13Feb 13 by Eleeist

 

Not currently, only search is the only way. There are some talks about this internally. I've moved this to Feedback so we don't lose sight of this.

This would be helpful, or a way to organize them so the custom ones show up first (or whatever order I want them in).

Thanks

 

You can hide default emojis from the drop-down list with CSS, but they will still be searchable and insertable with :emoji_name:.

.ipsIconPicker__container div[data-role="icons"] section:nth-child(1),
.ipsIconPicker__container div[data-role="icons"] section:nth-child(2),
.ipsIconPicker__container div[data-role="icons"] section:nth-child(3),
.ipsIconPicker__container div[data-role="icons"] section:nth-child(4),
.ipsIconPicker__container div[data-role="icons"] section:nth-child(5),
.ipsIconPicker__container div[data-role="icons"] section:nth-child(6),
.ipsIconPicker__container div[data-role="icons"] section:nth-child(7),
.ipsIconPicker__container div[data-role="icons"] section:nth-child(8) {
  display: none;
}

Alternatively, you could re-order the list (which is what I've done in my community). There are 8 default groups. Let's say you add 2 custom emoji groups and want them on top of the list, you would do something like this:

.ipsIconPicker__container {
  display: block;
  overflow: scroll;
}

.ipsIconPicker__container div[data-role="icons"] {
  display: flex;
  flex-direction: column;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(9) {
  order: 1;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(10) {
  order: 2;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(1) {
  order: 3;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(2) {
  order: 4;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(3) {
  order: 5;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(4) {
  order: 6;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(5) {
  order: 7;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(6) {
  order: 8;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(7) {
  order: 9
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(8) {
  order: 10;
}

I tried the first set of CSS code, and didn't see a change. So I tried the second set of code, which basically crashed the front and back end of my site. In my current session, any page I tried to access produced this:

I was able to open my site in a private browser tab, go to custom CSS, and the first set of CSS code was still there. So I removed it entirely, cleared my cache, and my community showed up for me again.

Not sure what happened, but safe to say I will not be trying to edit this functionality with CSS 😂. Hopefully there's a native solution down the road. For now, my members will have a secret menu lol.

Sorry, it's literally copy pasted from my site where it works perfectly 😅

Is there any way to somehow remove the emojis option from the menu? When I or my members go to create a new topic or reply, it takes a really long time to load. I suspect it's from the amount of custom emojis we have trying to load. It's the only thing that is making the site lag, otherwise it's way faster than v4.

 

Is there any way to somehow remove the emojis option from the menu? When I or my members go to create a new topic or reply, it takes a really long time to load. I suspect it's from the amount of custom emojis we have trying to load. It's the only thing that is making the site lag, otherwise it's way faster than v4.

This must be readded to be an option

 

This exactly. Would also love to be able to Group (custom) emojis, have different sets under their own name. 🙏🏼

After looking into things, you can create NEW GROUPS of custom emojis. So this option is already there. If we can not REMOVE the original set already in place, what about just reordering the emoji groups, so the originals can be placed at the bottom of the list?

 

You can hide default emojis from the drop-down list with CSS, but they will still be searchable and insertable with :emoji_name:.

.ipsIconPicker__container div[data-role="icons"] section:nth-child(1),
.ipsIconPicker__container div[data-role="icons"] section:nth-child(2),
.ipsIconPicker__container div[data-role="icons"] section:nth-child(3),
.ipsIconPicker__container div[data-role="icons"] section:nth-child(4),
.ipsIconPicker__container div[data-role="icons"] section:nth-child(5),
.ipsIconPicker__container div[data-role="icons"] section:nth-child(6),
.ipsIconPicker__container div[data-role="icons"] section:nth-child(7),
.ipsIconPicker__container div[data-role="icons"] section:nth-child(8) {
  display: none;
}

Alternatively, you could re-order the list (which is what I've done in my community). There are 8 default groups. Let's say you add 2 custom emoji groups and want them on top of the list, you would do something like this:

.ipsIconPicker__container {
  display: block;
  overflow: scroll;
}

.ipsIconPicker__container div[data-role="icons"] {
  display: flex;
  flex-direction: column;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(9) {
  order: 1;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(10) {
  order: 2;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(1) {
  order: 3;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(2) {
  order: 4;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(3) {
  order: 5;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(4) {
  order: 6;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(5) {
  order: 7;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(6) {
  order: 8;
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(7) {
  order: 9
}

.ipsIconPicker__container div[data-role="icons"] section:nth-child(8) {
  order: 10;
}

Can you go into a little detail on reordering the groups. In your css code, what part of the code targets the different groups?

Thank you.

 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

 

 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

Incredibly helpful. Thank you so much!!

 

 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

Awesome thanks! Will give this a try and swoop back with an update.

 

 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

 

Awesome thanks! Will give this a try and swoop back with an update.

Need some help

I have two categories (emoji) what have on place 1 and two

1. Classic

2. 2. Libar Emoji

   Used this code

   .ipsIconPicker [data-role="icons"] {
       display:flex;
       flex-direction:column;
   }
   .ipsIconPicker__container [data-icon-category] {
       order: 1;
       flex: 0 0 auto;
   }
   
   .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;
   }
   
   /* List out any category titles you want up top here */
   .ipsIconPicker__container :is([data-icon-category="Libar Emoji"]) {
   	order: 1;
   }

   Works not - only classic category is only on first place and "default - 520 icons) and last Libar Emoji

   Some help?

 

.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;
}

 

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

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)

Please some help

 

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;
}

 

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;
}

Work not on me - shows only Classic (1) latest Libar Emoji (3) - second place 2 - default (all categories)

 

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;
}

Please see video - my test site

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

 

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

Now everything works fine! Thanks 😀👍

 

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;
}

Possible att emoji works with same way in Admin cp - editor❓❓😀😒

 

 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.