Skip to content

Instantly share code, notes, and snippets.

@adrianmgg
Last active Jan 4, 2021
Embed
What would you like to do?
spacehey custom emotes

about

this allows you to add custom emotes to your spacehey page. they can even be used in comments, which don't allow <img> tags or custom css.

setup

method 1: copy the contents of spacehey_emotes.css into a <style> tag on your page.

method 2: add this line of css to the top of a <style> tag on your page. this way, you'll automatically get any future updates/improvements/fixes I add to this, but if githack ever shuts down it'll break.

@import url('https://gistcdn.githack.com/adrianmgg/0478d4a6926a271be35eb09e94f689fa/raw/spacehey_emotes.css');

adding emotes

add new emotes with css following this pattern:

[data-emote="EMOTE_NAME_HERE"] { --emote-url: url("EMOTE_IMAGE_URL_HERE"); }

or like this if the image isn't square and you want to specify an aspect ratio:

[data-emote="EMOTE_NAME_HERE"] { --emote-url: url("EMOTE_IMAGE_URL_HERE"); --emote-aspect-ratio: ASPECT_RATIO_HERE; }

the aspect ratio should be a singe number, width divided by height, with no unit.

using the emotes

once you have these set up, you can put the following html:

for normal sized emotes: <span data-emote="EMOTE_NAME_HERE"></span>

for large emotes: <b data-emote="EMOTE_NAME_HERE"></b>

in comments (or anywhere else on your page) to use the emotes.

notes

/* general stuff, everything here is set as important to make sure whatever other css is on your page doesn't mess this up */
[data-emote] {
/* the imgur link here is a fallback that's used when someone uses an emote name that doesn't map to anything */
background-image: var(--emote-url, url("https://i.imgur.com/Wccq4Ns.png"))!important;
background-size: contain!important;
background-repeat: no-repeat!important;
background-position: center!important;
display: inline-block!important; vertical-align: bottom!important;
padding: 0px!important; margin: 0px!important; border: none!important;
--emote-size: 1.35em;
--emote-aspect-ratio: 1;
width: calc(var(--emote-size) * var(--emote-aspect-ratio))!important; height: var(--emote-size)!important;
}
b[data-emote] { --emote-size: 3em; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment