Creating a custom Reactions sprite sheet

[Paul B]

Brogan submitted a new resource:

Creating a custom Reactions sprite sheet - like, dislike, wow, cool, etc.

By default, XF ships with a Reactions sprite sheet with 7 emojis: https://xenforo.com/community/styles/default/xenforo/reactions/emojione/sprite_sheet_emojione.png
View attachment 208790

Adding new Reactions is fairly straightforward either as individual images, or using a secondary custom sprite sheet, but why not combine them all into a single sprite sheet?

Doing so has several benefits; the browser only has to download one file and if XF ever changes the sprite sheet in the...

Read more about this resource...

 

[ssj2_ssbm]

Thanks for this guide.
I just tried it myself using your sprite sheet to test it. But when I follow your steps, the new added reaction looks like this



These are the settings:



What did I do wrong?

 

[Paul B]

Set the background size to 100% - the same as the default reactions.

 

[Bimble]

Very handy guide - thank you - much appreciated.

 

[SilentGround]

Loved you guide, thanks Borgan.

Here is what i made

 

[sbj]

Are there any other sites where we can get the emojis? Joxpixels seems to be down for 2 days now. I mean it keeps loading the page but it never loads the page for me.

 

[Paul B]

The site loads fine for me - https://www.joypixels.com/emoji

You can use any images you like, as long as the license allows for it.

 

[sbj]

Thanks, strange, the site keeps loading and loading. I had to use a VPN to access it. Maybe my internet ISP is blocked or has problems in my area. Thanks!

 

[sbj]

I added the reactions as png files and not in a single spritesheet. What is the reason that they are blurry when you hover on it?

 

[Oblivion Knight]

I wonder how much my members will abuse this..



Probably a good thing I've set the Negatives to be Neutral.

 

[Mouth]

Has something changed with stitch.io? I cannot get this to show correctly, following the steps closely.
The icon size, or padding, doesn't seem to work. Even tried "-1" as the padding on stitch.io


https://www.toptal.com/developers/css/sprite-generator/ worked, as expected.

 

[Captilist Swine]

I can't get this to work at all. Even setting everything exactly as stated in this thread the image is too big. When I compare the old reaction sprite sheet to the new one they're the same width, same resolution, everything. I can create a new reaction with the old sheet and it works perfectly. But any time I try to use a new one with the same exact settings it messes up even though both images are the same size.

I'm completely lost.

 

[Paul B]

Screenshot the reaction settings.

What is the URL to the sprite?

 

[Captilist Swine]

Here's the settings on that reaction:



And here is the actual file I'm using that I uploaded to the same directory as the original sprite:

 

[Paul B]

Even setting everything exactly as stated in this thread

Well not really.

You didn't follow the instructions related to the sprite dimensions and your settings are not correct.

 

[Captilist Swine]

The -64 pixels for position isn't going to magically make the image half the size it should be. Here it is with your settings:

 

[Captilist Swine]

And the dimensions of the sprite file are exactly the same as the original file: 64 pixels wide with 0 space padding created by the same site posted in this thread.

 

[Paul B]

I note that you've once again overlooked an important detail.

 

[Captilist Swine]

Background size 100 is clearly shown in every screen shot I've posted. I don't know what you're looking at, but clearly you're not looking at the screen shots I posted.

And if you took my file and it worked with your settings, then why doesn't it work on mine?

 

[Paul B]

clearly you're not looking at the screen shots I posted

Actually I am.