# Пользовательские реакции в Discourse

**URL:** https://meta.discourse.org/t/custom-discourse-reactions/198043
**Category:** Developers
**Tags:** reference
**Created:** [24.Июль.2021 02:06:56 UTC](https://meta.discourse.org/t/custom-discourse-reactions/198043 "2021-07-24T02:06:56Z")
**Posts on this page:** 1
**Showing post:** 1

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [24.Июль.2021 02:06:56 UTC](https://meta.discourse.org/t/custom-discourse-reactions/198043/1 "2021-07-24T02:06:56Z")

</div>

Здравствуйте,

Я внес некоторые изменения в CSS для [плагина Discourse Reactions](https://meta.discourse.org/t/discourse-reactions-beyond-likes/183261). Теперь он выглядит очень похоже на кнопки реакций в Facebook.

Вот код для 6 кнопок реакций, включая стандартную, которая на моём сайте — ❤.

**ОБЩИЕ НАСТРОЙКИ / SCSS**  
Разместите этот код в разделе общих стилей CSS.  
**Важное замечание** : Вы можете изменить эмодзи над подписями, отредактировав строки `content: 'Love it!'`, `content: 'Beautiful'` и т. д. Конечно, вы можете использовать любые реакции, какие захотите. Это просто подписи над реакциями.

```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!';
      }
    }
  }
}

```

![react-buttons](https://global.discourse-cdn.com/meta/original/3X/e/0/e0056318f848ada8e7d3f721c5b974da73222ccd.gif)

* * *

## Мобильные устройства

На мобильных устройствах я установил фиксированное позиционирование для панели выбора реакций.

Это один из возможных вариантов, чтобы избежать такого странного поведения. ⬇  
 ![raction-no-fixed](https://global.discourse-cdn.com/meta/original/3X/4/a/4aad41835bca82b9d20f28ef2241859663e46083.gif)

Выглядит это так ⬇  
 ![reactions-fixed](https://global.discourse-cdn.com/meta/original/3X/9/4/94206633324c244db44630d68ad97237c9102479.gif)

Аналогичная ситуация происходит с панелью состояния на мобильных устройствах, которая также находилась в панели выбора реакций, поэтому здесь тоже используется фиксированное позиционирование.

**МОБИЛЬНЫЕ УСТРОЙСТВА / 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;
}

```

* * *

## Скрыть стандартный раздел «Кто поставил лайк»

**ОБЩИЕ НАСТРОЙКИ / CSS**

Я скрыл стандартный раздел «Кто поставил лайк», так как панель состояния реакций также отображает эту информацию.

```plaintext
.who-liked {
  display: none;
}

```

---

_[View the full topic](https://meta.discourse.org/t/custom-discourse-reactions/198043)._