Free Mod How to re-order Reaction Emojis

[glennrocksvb]

In vBulletin 6, the Likes system was replaced by Reactions system where it displays emojis in the following order:

1. Grinning face
2. Smiling face with hearts
3. Nauseated face
4. Smiling face with sunglasses
5. Enraged face
6. Thumbs up
7. Thumbs down

The Thumbs up will probably be the most used reaction emoji in every forum. But notice that it is the last in the list which means it would be harder for a user to Like a post than to hate it. Make love not war , right? ☮️

If you want to re-order the list to make Thumbs up the first in the list, then add the following custom CSS in css_additional.css template:

/* Re-order reaction emojis - START */
.reactions__list {
    flex-direction: row-reverse;
}
.reactions__list-item[data-votetypeid="6"] { /* Thumbs up */
    order: 1;
}
/* Re-order reaction emojis - END */​

The above code reverses the order of the emojis which makes the Thumbs down as the first emoji. And then swaps Thumbs up and Thumbs down making the Thumbs up as the first emoji.

If you want to re-order by positive reactions first before the negative ones, then use the following code instead:

/* Re-order reaction emojis - START */
.reactions__list-item[data-votetypeid="6"] { /* Thumbs up */
    order: 1;
}
.reactions__list-item[data-votetypeid="1"] { /* Grinning face */
    order: 2;
}
.reactions__list-item[data-votetypeid="2"] { /* Smiling face with hearts */
    order: 3;
}
.reactions__list-item[data-votetypeid="3"] { /* Smiling face with sunglasses */
    order: 4;
}
.reactions__list-item[data-votetypeid="7"] { /* Thumbs down */
    order: 5;
}
.reactions__list-item[data-votetypeid="4"] { /* Enraged face */
    order: 6;
}
.reactions__list-item[data-votetypeid="5"] { /* Nauseated face */
    order: 7;
}
/* Re-order reaction emojis - END */​

UPDATED CSS as of vB 6.0.2:
New emojis have been added in 6.0.2. Please use the updated CSS below instead.

/* Re-order reaction emojis - START */
.reactions__list-item[data-votetypeid="6"] { /* Thumbs up */
    order: 1;
}
.reactions__list-item[data-votetypeid="1"] { /* Grinning face */
    order: 2;
}
.reactions__list-item[data-votetypeid="8"] { /* face with tears of joy */
    order: 3;
}
.reactions__list-item[data-votetypeid="2"] { /* Smiling face with hearts */
    order: 4;
}
.reactions__list-item[data-votetypeid="9"] { /* Face blowing a kiss */
    order: 5;
}
.reactions__list-item[data-votetypeid="3"] { /* Smiling face with sunglasses */
    order: 6;
}
.reactions__list-item[data-votetypeid="11"] { /* Hot beverage */
    order: 7;
}
.reactions__list-item[data-votetypeid="10"] { /* Disappointed face */
    order: 8;
}
.reactions__list-item[data-votetypeid="7"] { /* Thumbs down */
    order: 9;
}
.reactions__list-item[data-votetypeid="4"] { /* Enraged face */
    order: 10;
}
.reactions__list-item[data-votetypeid="5"] { /* Nauseated face */
    order: 11;
}
/* Re-order reaction emojis - END */​

If you want the Thumbs up and Thumbs down to be next to each other or want a totally different order, then simply adjust the order values accordingly.

This is one of the little changes that you can do that goes a long way to a good user experience.

[desmomax]

installed.
thanks!

[Mitch]

Having trouble reorganizing the reactions in 6.0.2 Did something change for this css not to work?

[glennrocksvb]

More emojis have been added in 6.0.2. The CSS has to be updated to accommodate the new emojis. I will post the updated code soon.

[glennrocksvb]

Added new CSS in the first post for vB 6.0.2.

[desmomax]

thanks

[Mitch]

Added new CSS in the first post for vB 6.0.2.

Thanks Glenn for updating the css. Sent ya a few coffees, your work is appreciated.

[glennrocksvb]

Thanks for the ☕ Mitch!

[MahmoudE9]

Wow Man

Thxx

[desmomax]

great thanks Glenn

what is still missing in vb reactions is a thanks one... imho

[MahmoudE9]

Thank you for a wonderful amendment that helps and increases love between people