Can I turn off your IMG emoji replacement?
-
Something (probably the Nov 2014 emoji support) broke the look of one of my old blog posts. Specifically, I was using a large check-in-box unicode character (☑) in a floating box. It looked good.
Now it looks like this: https://memesteading.wordpress.com/2010/10/17/rise-of-the-web-tick/
It still looks OK in the editor. And, when the page loads, it looks OK for a second… but then some later-loading WordPress.com styling arrives, and the oversized-misplaced-blue graphical emoji replaces the sleek black-and-white character I’d prefer.
Can I turn off the automatic replacement of characters with IMG class=’emoji’?
The blog I need help with is: (visible only to logged in users)
-
Woah. I can honestly say that’s not supposed to happen.
I just removed some styling that was set on the checkmark. Can you take a look at that post now and let me know if it looks how you want?
I’ll do some testing to see why that mark is being set to ‘float: right’ and ‘font-size: 2500%’ which is why its going crazy like that.
-
The “float:right; font-size:2500%” is my styling, which used to work for the desired effect (making the unicode checkmark-box into a floating graphic). You can still see that desired effect, with those styles, in the editor. It’s the new PNG-insert which breaks it.
-
I’ve restored the prior explicit HTML styling…
<span style="display:block;float:right;font-size:2500%;line-height:1.7em;margin-top:-1.1ex;margin-left:20px;margin-bottom:-1ex;font-family:helvetica;">☑</span>…to create the following screenshot of the editor, showing the way it also used-to-look on the published page:
I’m pretty sure it’s a bad-interaction between my styling that used to work, with the native unicode character, and the ’emoji’ css class styling WordPress is now applying to its IMG-insert emoji-replacements. The single character ‘☑’ is being replaced with…
<img class="emoji" draggable="false" alt="☑" src="https://s0.wp.com/wp-content/mu-plugins/emoji/twemoji/72x72/2611.png" scale="0">…which is then also subject to this CSS (among other)…
img.emoji { background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important; border: medium none !important; box-shadow: none !important; height: 1em !important; margin: 0 0.05em 0 0.1em !important; padding: 0 !important; vertical-align: -0.1em !important; width: 1em !important; }If I could turn off this new emoji-replacement feature (on either a whole-blog basis, or a specific-post, or even just a range of HTML), I could get the old look to work. (If I could add my own JS, I could probably also disable the after-page-load step, or undo it after it happens… but I understand why arbitrary JS isn’t allowed.)
-
Oh! Okay. I’m sorry; I completely misunderstood what you wanted. :(
If I could turn off this new emoji-replacement feature (on either a whole-blog basis, or a specific-post, or even just a range of HTML), I could get the old look to work.
There’s no way to do this, but I just did some testing and it looks like if you add your custom span styles through the CSS pane instead of the editor, the content doesn’t get stripped and replaced. Here’s the code with the selector for your site:
.post-120 .main:before { content:"☑"; display:block; float:right; font-size:2500%; line-height:1.7em; margin-top:-1.1ex; margin-left:20px; margin-bottom:-1ex; font-family:helvetica; }I’m so sorry I didn’t read your initial post carefully enough. Let me know if you run into any issues with this solution.
-
Thanks, the :before CSS
content:"☑";workaround is helpful & sufficient!I applied it slightly differently – via a CSS class .ballot_box_with_check, that just adds the check, leaving the post-specific CSS tweaking as inline styling. And, it looks as desired. Thank you!
-
Oh great! I’m glad that’s a good workaround for you. :)
Let me know if you need help with anything else!
- The topic ‘Can I turn off your IMG emoji replacement?’ is closed to new replies.
WordPress.com Forums 