Automatically change a div with a different one

edited May 2017 in Style Requests Firefox

I'm trying to override Google's emoji css to load different ones, and I've found what variable sets them and what string to replace it with, but I can't figure out how to automate it with Stylish.

Here's an example:

The default for a "face blowing a kiss" emoji is this:

<span data-emo="[emoji]" class="Pt tGvGdc"> <span style="opacity:0.0;width:0;display:inline-block;position:absolute">[emoji]</span> <div class="e1f618 vm" style="display:inline-block;"></div></span>

Note: I have replaced the actual emoji with "[emoji]" in the examples, because in the previews instead of showing the emoji itself it shows a bunch of gibberish characters

When left at the default, Hangouts displays this:

http://i.imgur.com/d1WvTVB.jpg

However, changing that code to this:

<span data-emo="[emoji]" class="Pt tGvGdc"> <span style="opacity:0.0;width:0;display:inline-block;position:absolute">[emoji]</span> <div style="background-image: url(http://i.imgur.com/t3auZ6t.png); height: 28px; width: 28px; display:inline-block;"> </div></span>

Changes it to this:

http://i.imgur.com/e5w20Do.jpg

I'd like to know if there's any way to automate said change via Stylish for that, and any other emoji I pick. The current example was made by editing the page via Firefox's element inspector

Sign In or Register to comment.