# Custom Discourse Reactions
**URL:** https://meta.discourse.org/t/custom-discourse-reactions/198043
**Category:** Developers
**Tags:** reference
**Created:** [July 24, 2021, 2:06am UTC](https://meta.discourse.org/t/custom-discourse-reactions/198043 "2021-07-24T02:06:56Z")
**Posts on this page:** 14
**Page:** 1
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [July 24, 2021, 2:06am UTC](https://meta.discourse.org/t/custom-discourse-reactions/198043/1 "2021-07-24T02:06:56Z")
Hello,
I made some CSS modification on [Discourse Reactions Plugin](https://meta.discourse.org/t/discourse-reactions-beyond-likes/183261). So it looks much like Facebook reaction buttons.
These for 6 reaction buttons including the default which is on my site is ❤ .
**COMMON / SCSS**
Place this code to common - css section.
**Important notice** : You can modify the emojis above label with edit `content: 'Love it!'`, `content: 'Beautiful'` etc… lines: Of course you can use whatever reaction you want. It is just a label above the reactions.
```plaintext
.discourse-reactions-picker {
.discourse-reactions-picker-container {
width: 330px;
height: 50px;
max-width: calc(100vw - 2em);
border: 1px solid var(--primary-low) !important;
border-radius: 50px;
.pickable-reaction {
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
}
.pickable-reaction {
background: transparent !important;
.emoji {
height: 40px;
width: 40px;
padding: 0 !important;
transform: scale(0.9);
}
&.is-used {
transform: scale(1.3);
transform-origin: bottom;
border: none !important;
}
&:hover {
transform-origin: bottom;
}
&:hover:after {
position: absolute;
font-size: 10px;
top: -15px;
background: var(--secondary-low);
color: var(--secondary);
padding: 2px 5px;
border-radius: 20px;
}
&:first-child {
&:hover:after {
content: 'Love it!';
}
}
&:nth-child(2) {
&:hover:after {
content: 'Beautiful';
}
}
&:nth-child(3) {
&:hover:after {
content: 'Hug';
}
}
&:nth-child(4) {
&:hover:after {
content: 'Congrats!!';
}
}
&:nth-child(5) {
&:hover:after {
content: 'Hmm...';
}
}
&:nth-child(6) {
&:hover:after {
content: 'Wooow!';
}
}
}
}
```
* * *
## Mobile
On mobile I set position fixed the reactions picker position.
This is a possible option to prevent this strange behaviour. ⬇
Looks like this ⬇
Same thing happening with state panel on mobile that was on reactions picker so also use position fixed.
**Mobile / SCSS**
```plaintext
.discourse-reactions-picker {
position: fixed;
.pickable-reaction {
&:hover:after {
font-size: 12px;
top: -8px;
}
&.is-used {
&:hover:after {
transform: scale(0.8);
top: -15px;
}
}
}
}
.discourse-reactions-state-panel {
position: fixed;
}
```
* * *
## Hide default who liked section
**COMMON / CSS**
I hide the default who’s liked section because the Reactions State Panel also show those informations.
```plaintext
.who-liked {
display: none;
}
```
---
### Author:  [@frold](https://meta.discourse.org/u/frold)
#### Post date: [July 24, 2021, 10:56am UTC](https://meta.discourse.org/t/custom-discourse-reactions/198043/2 "2021-07-24T10:56:39Z")
Like it very much 🤟 …
---
### Author:  [@Heliosurge](https://meta.discourse.org/u/Heliosurge)
#### Post date: [July 24, 2021, 9:23pm UTC](https://meta.discourse.org/t/custom-discourse-reactions/198043/3 "2021-07-24T21:23:46Z")
Awesone this works really nice. Thanks for sharing
🍻😎👍✨
---
### Author:  [@PaulinaMX](https://meta.discourse.org/u/PaulinaMX)
#### Post date: [August 27, 2021, 4:39am UTC](https://meta.discourse.org/t/custom-discourse-reactions/198043/4 "2021-08-27T04:39:27Z")
I have it installed and I love it.
**A question:**
Is it possible to remove that black hover?
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 27, 2021, 9:02am UTC](https://meta.discourse.org/t/custom-discourse-reactions/198043/5 "2021-08-27T09:02:55Z")
Hi Paulina,
I am really glad you like it ❤ Thank you!
To hide the dark hovered user list panel use this code 🙂
```plaintext
.discourse-reactions-list .reactions .user-list {
display: none;
}
```
---
### Author:  [@PaulinaMX](https://meta.discourse.org/u/PaulinaMX)
#### Post date: [August 29, 2021, 6:26pm UTC](https://meta.discourse.org/t/custom-discourse-reactions/198043/6 "2021-08-29T18:26:37Z")
It worked for me! I love the way it looks, thank you very much. ❤
---
### Author:  [@neo](https://meta.discourse.org/u/neo)
#### Post date: [August 29, 2021, 8:37pm UTC](https://meta.discourse.org/t/custom-discourse-reactions/198043/7 "2021-08-29T20:37:53Z")
Hi Don,
I like your customization very much. A great Job and thanks! ❤
but I still have a question, how to get rid of the black hover like this?
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [August 30, 2021, 2:20am UTC](https://meta.discourse.org/t/custom-discourse-reactions/198043/8 "2021-08-30T02:20:37Z")
Hi Neo,
Thank you ❤
Unfortunately that is not possible to hide title attribute with css but you can edit the `js.discourse_reactions.picker.react_with` text on `/admin/customize/site_texts` to make it less longer.
---
### Author:  [@neo](https://meta.discourse.org/u/neo)
#### Post date: [August 30, 2021, 11:56am UTC](https://meta.discourse.org/t/custom-discourse-reactions/198043/9 "2021-08-30T11:56:26Z")
Thanks, I’ve done with it, now it looks better! 👋
---
### Author:  [@jayarr](https://meta.discourse.org/u/jayarr)
#### Post date: [May 20, 2022, 10:30pm UTC](https://meta.discourse.org/t/custom-discourse-reactions/198043/10 "2022-05-20T22:30:47Z")
This is fantastic, @Don. Thanks so much.
I’m looking at using this on my Discourse setup, but we currently have _two_ rows of reaction options (six emojis per row, so 12 emojis total).
I know just enough CSS to get by, but it really isn’t my strength.
How difficult would it be to adjust this code so that it’d work for that sort of arrangement?
Really appreciate your sharing this (even if I’m quite late to the party!).
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [May 21, 2022, 9:23pm UTC](https://meta.discourse.org/t/custom-discourse-reactions/198043/11 "2022-05-21T21:23:33Z")
Thank you JR 🙂 I think I will create a theme component from this to make it easier to use and fit to reactions, add some fixes etc… I hope that will help. I’ll try to make it next week.
---
### Author:  [@jayarr](https://meta.discourse.org/u/jayarr)
#### Post date: [May 22, 2022, 7:20pm UTC](https://meta.discourse.org/t/custom-discourse-reactions/198043/12 "2022-05-22T19:20:32Z")
Thanks so much, @Don! That would be incredible and a much appreciated supplement/addition. I’ll definitely keep an eye out for it.
---
### Author:  [@PaulinaMX](https://meta.discourse.org/u/PaulinaMX)
#### Post date: [May 26, 2022, 6:43pm UTC](https://meta.discourse.org/t/custom-discourse-reactions/198043/13 "2022-05-26T18:43:35Z")
> [@Don](#):
>
> Thank you JR 🙂 I think I will create a theme component from this to make it easier to use and fit to reactions, add some fixes etc… I hope that will help. I’ll try to make it next week.
---
### Author:  [@Don](https://meta.discourse.org/u/Don)
#### Post date: [May 29, 2022, 3:40pm UTC](https://meta.discourse.org/t/custom-discourse-reactions/198043/14 "2022-05-29T15:40:23Z")
Hello,
I made a theme component from this. I think it makes it easier. 🙂
Thanks to @manuel’s previously made theme component [Category List with Banners](https://meta.discourse.org/t/category-list-with-banners/201280) I can easily implement the list setting to the reactions label. Thank you ❤
I added fixes and some settings:
1. `reactions_label`
Separate with semicolon `;`
`reaction name;reaction label`
2. `reactions picker rounding`
Reactions picker (border-radius) corners rounding. You can use px, em, etc
Default 1em.
3. `state panel rounding`
Reactions State Panel (border-radius) corners rounding. You can use px, em, etc
4. `user list rounding`
Reactions User list (border-radius) corners rounding. You can use px, em, etc
5. `hide user list heading`
This option will hide this user list heading on panel. The heading is **smiley** on this image.
6. `hide user list`
This option will hide the user list panel. This is the dark hovered panel.
7. `hide who liked`
This option will hide the default who liked section.
I have a few more plans with this component, which I will add later. 🙂
[https://github.com/VaperinaDEV/discourse-custom-reactions](https://github.com/VaperinaDEV/discourse-custom-reactions)