Blog Documentation Try Vanilla Cloud
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

YAGA: How to Use Custom Icons for Reactions

R_JR_J Ex-FanboyMunich Admin
in Tutorials

For those who are used to work with CSS it might have been obvious, but for those who are not so CSS savvy some tutorial like this might come in handy.

The option to allow arbitrary icons is hidden in the "Css Class" field when you edit an action. When you click one of the given icons, that field changes. But that field is a normal text input field and you can enter any text you like. And that's where we will start...

Step 1: the reaction file

I like trees. I don't think a "tree" reaction makes much sense but for the sake of this tutorial, we will create one. I found a nice tree SVG here. I will upload the file into the /uploads folder and it has the name garden.svg which I keep.

Step 2: creating the action

Next step is to add a new action from /action/settings:

grafik.png

As you can see I have entered a custom Css Class value: "ReactionMyTree". Get creative! It's important that your class name doesn't collide with an existing reaction (try "ReactionRocket", save it and you will see what I mean)

Step 3: create an appropriate css style

I suggest you use either the Pockets plugin (pro: comes with Vanilla, con: somewhat bloated if only used for this one purpose) or the CSSEdit plugin (pro: exactly made for this purpose, has a version history, con: needs to be installed additionally). I'll use the Pocket plugin since that will require more explanation.

The css rule for our custom reaction looks like that:

.ReactionMyTree {
   background-image: url('/uploads/garden.svg')!important;
   background-position: center;
   background-size: cover;
}

Now we only have to create a Pocket for that. Enable the Pockets plugin if you haven't already and a new Pocket which has to look similar to this:

grafik.png

It should appear after the Head and it should appear in the dashboard so that we can review our reaction.

Step 4: check it out!

Go to /action/settings and reload the page. You will now see that nice tree in your "Tree Reaction" preview.

Go to any discussion/comment from another user and look at the reactions. It should look like that:

grafik.png


Nice, isn't it?

Comments

  • Options
    R_JR_J Ex-Fanboy Munich Admin

    But wait! That's not all - we can even use Unicode characters here! Endless possibilities: https://unicode.org/emoji/charts/full-emoji-list.html

    From all of this I have chosen quite a senseless one again: let's create a spaceman reaction! The steps to achieve that are similar to the above. Since we use unicode, we do not have to upload anything. In step 2 we certainly need to change the name of the actionand also the Css Class: "ReactUnicodeSpaceman" is what I have chosen.

    The style in step 3 needs to look like that:

    .ReactUnicodeSpaceman::before {
   content: "\01F468 \200D \01F680";
}

    Yes, and that's it already. Step 4, checking it out, will result in something like that:

    grafik.png


Sign In or Register to comment.