•  · 44 friends

Change Reactions

I am not a huge fan of the orange color so, is there a way to change the reaction icons to a different color and/or use an actual emoticon instead of the 'outlined' one? I am still going through all of the options in Studio to see if I can find them somewhere.ย 

๐Ÿ’“0 ๐Ÿ˜†1 ๐Ÿ˜ฒ0 ๐Ÿ˜ฅ0 ๐Ÿ˜ 0 0
  • 657
  • More
Replies (16)
    • Hey Anton L - Can you assist with this question. I would like to change the reaction to like what is listed here:

      https://github.com/unaio/una/issues/1691



      ๐Ÿ’“0 ๐Ÿ˜†0 ๐Ÿ˜ฒ0 ๐Ÿ˜ฅ0 ๐Ÿ˜ 0 0
      • Still looking for assistance on this. I would like to make them full colored emojis like the ticket number posted above. Thanks.ย 

        ๐Ÿ’“0 ๐Ÿ˜†0 ๐Ÿ˜ฒ0 ๐Ÿ˜ฅ0 ๐Ÿ˜ 0 0
        • Some help on this one would be nice too ๐Ÿ˜

          ๐Ÿ’“0 ๐Ÿ˜†0 ๐Ÿ˜ฒ0 ๐Ÿ˜ฅ0 ๐Ÿ˜ 0 0
          • Alex or Anton?ย 

            ๐Ÿ’“0 ๐Ÿ˜†0 ๐Ÿ˜ฒ0 ๐Ÿ˜ฅ0 ๐Ÿ˜ 0 0
            • Chris colors are not adjustable, I did like this but it is difficult to find colors that go well on both dark and light theme. So you would need to inject different colors for each theme.


              /* ย  Color reactions */
              .col-red3 {
              color: ;
              }
              .col-red1 {
              color: ;
              }

              image_transcoder.php?o=bx_froala_image&h=1487&dpx=1&t=1561638636

              ๐Ÿ’“0 ๐Ÿ˜†0 ๐Ÿ˜ฒ0 ๐Ÿ˜ฅ0 ๐Ÿ˜ 0 0
              • Thanks Baloo - I did find that I could go into Developer > Forms > Data Items then choose System and then Reactions from the second field. If you click the edit button there, you can see the colors assigned as well. For example, "Love" reaction looks like this:

                a:2:{s:4:"icon";s:26:"heart sys-colored col-red1";s:6:"weight";s:1:"1";}

                I do not understand that enough to make changes outside of red1, 2, 3 etc. Seems anything else I do breaks the reaction emoji. I am hoping someone will tell me how to add the ones displayed in https://github.com/unaio/una/issues/1691


                ๐Ÿ’“0 ๐Ÿ˜†0 ๐Ÿ˜ฒ0 ๐Ÿ˜ฅ0 ๐Ÿ˜ 0 0
                • Aww come on fellas.. Help me out here ๐Ÿ˜ I want my reactions to look like this:

                  image_transcoder.php?o=bx_froala_image&h=1506&dpx=1&t=1561742857

                  ๐Ÿ’“0 ๐Ÿ˜†0 ๐Ÿ˜ฒ0 ๐Ÿ˜ฅ0 ๐Ÿ˜ 0 0
                  • I'm sure there are some open source animated emojis on the net. Can we upload our own emojis?

                    ๐Ÿ’“0 ๐Ÿ˜†0 ๐Ÿ˜ฒ0 ๐Ÿ˜ฅ0 ๐Ÿ˜ 0 0
                    • Well, That is what I am trying to find out actually ๐Ÿ˜ . Even if we were able to upload our own, we need still to know where they can be changed

                      ๐Ÿ’“0 ๐Ÿ˜†0 ๐Ÿ˜ฒ0 ๐Ÿ˜ฅ0 ๐Ÿ˜ 0 0
                      • OK, so I figured out how to change these Reactions however, there really should be an easier way of just changing them within Studio somehow.ย 


                        I amย NOTย recommending doing this as you will need to change a core icon.css file and it will get overwritten by any updates to Font Awesome. However, if you want to do this, this is what I did to change them.ย 


                        As I mentioned above, these are located in the modules/boonex/fontawesome/template/css/icons.css file. I would make a backup of this file first. I tried to put these changes in my Custom Styles area but it didn't work. You will need to download whatever emojis you want to use for you reactions. I changed all of my sizes to 20px x 20px as it seems to "fit" a little better.ย 

                        From there, I created a folder called "emoji" in the modules/boonex/fontawesome/template/css/ directory. I uploaded these emojis into that folder. Then you will need to locate the following entries in modules/boonex/fontawesome/template/css/icons.css for each reactions (I put names to them so you know what they are like haha, love, etc):

                        HAHA/LOL
                        .sys-icon.grin-squint:before, .fa-grin-squint:before

                        LOVE
                        .sys-icon.heart:before, .fa-heart:before

                        SAD
                        .sys-icon.sad-tear:before, .fa-sad-tear:before

                        ANGRY
                        .sys-icon.angry:before, .fa-angry:before

                        LIKE
                        .sys-icon.thumbs-up:before, .fa-thumbs-up:before


                        Each one of these entries have a "content" entry like this:

                        .sys-icon.sad-tear:before, .fa-sad-tear:before {
                        content: "\f5b4"; }


                        You will need to change that "content" to point to the folder you uploaded your emojis in :

                        Change from:

                        .sys-icon.sad-tear:before, .fa-sad-tear:before {
                        content:ย "\f5b4"; }

                        TO (assuming you named your sad emoji as sad.png)

                        .sys-icon.sad-tear:before, .fa-sad-tear:before {
                        content:ย url("emoji/sad.png"); }


                        Keep replacing each one above with ย url("emoji/xxxx.png"); xxxx = the file name of the emoji


                        You're welcomeย ๐Ÿ˜€ย 

                        image_transcoder.php?o=bx_froala_image&h=1508&dpx=1&t=1561760208

                        ๐Ÿ’“0 ๐Ÿ˜†0 ๐Ÿ˜ฒ0 ๐Ÿ˜ฅ0 ๐Ÿ˜ 0 0
                        • Thank you so much. I am going to try to use animated .gif emojis to add some extra flavor to the sauce.

                          ๐Ÿ’“0 ๐Ÿ˜†0 ๐Ÿ˜ฒ0 ๐Ÿ˜ฅ0 ๐Ÿ˜ 0 0
                          • Good, I do not know how to try for now, what does it look like on the dark theme?

                            ๐Ÿ’“0 ๐Ÿ˜†0 ๐Ÿ˜ฒ0 ๐Ÿ˜ฅ0 ๐Ÿ˜ 0 0
                            • Hey Baloo - Doesn't look too bad with the emojis I have picked.

                              image_transcoder.php?o=bx_froala_image&h=1509&dpx=1&t=1561818734

                              ๐Ÿ’“0 ๐Ÿ˜†0 ๐Ÿ˜ฒ0 ๐Ÿ˜ฅ0 ๐Ÿ˜ 0 0
                              • You're right, it's much better as well. Let's say more expressive ! ๐Ÿ˜ฎ

                                ๐Ÿ’“0 ๐Ÿ˜†0 ๐Ÿ˜ฒ0 ๐Ÿ˜ฅ0 ๐Ÿ˜ 0 0
                                • Does anyone know how I can make different icons for the Thank you! and Like reaction? When I use this code in Custom Styles: .sys-icon.thumbs-up:before, .fa-thumbs-up:before{content: url("--"); } I end up changing both Thank you and Like Thumb up icons... (screenshot attached)

                                  And another question: does anyone know how I can deactivate the pop-up with other reactions?

                                  I need to have two buttons with two different icons.

                                  ๐Ÿ’“0 ๐Ÿ˜†0 ๐Ÿ˜ฒ0 ๐Ÿ˜ฅ0 ๐Ÿ˜ 0 0
                                  • I got it working on my sites and they are animated on my sites. Took a bit of time and playing about. UNA really need to make it easy to change the reactions and to add new ones. Anyone want to see a video of it working message me.ย 

                                    ๐Ÿ’“0 ๐Ÿ˜†0 ๐Ÿ˜ฒ0 ๐Ÿ˜ฅ0 ๐Ÿ˜ 0 0
                                    Not logged in users can't 'Comments Post'.
                                    10
                                    1
                                    1
                                    2
                                    3
                                    Added:
                                    Category:

                                    UNA - Network Infrastructure for Communities

                                    Close