Adicionem o novo domínio do blog aos seus favoritos! www.crashcomputer.com.br

Postagens com a tag ‘Emoji’

   segunda-feira, 8 de junho de 2015

Removendo formatação de emoji



1 Star2 Stars3 Stars4 Stars5 Stars (Nenhum voto, seja o primeiro!)
Loading...

Na versão 4.2 do WordPress foi adicionado o suporte a emojis e sem a opção de desligá-lo, o que causou uma boa chiadeira na comunidade. Obviamente já apareceu um plugin que se propõe a remover o maldito suporte, até que não ser oficializada uma opção de desligar essa droga facilmente pela própria interface administrativa. 8x

O plugin, de fato consegue desregistrar o código css dos emoji, que é o trecho de código abaixo:

<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>

Porem, ainda removendo essa formatação, resta um bug, pois contrariando a boa prática fizeram o favor de inserir uma regra de formatação diretamente no código (css inline, hardcoded) :censored: :

<img src="%s" alt="%s" class="wp-smiley" style="height: 1em; max-height: 1em;" />

Note o height e max-height direto no código, e o resultado patético é este, mesmo com o plugin instalado:

emoticons1

Como pode se ver, os emoticons são redimensionados para a altura de 1 linha de texto, o que é ruim, principalmente com o set de emoticons que uso, o kolobok.

Então, como resolver este problema de formatação inline? :-? Vamos usar a declaração !important na folha de estilos do tema, que pelas regras do CSS, vai passar por cima de qualquer outra formatação definida inline.

Pra isso, basta adicionar este pequeno trecho de código em seu arquivo de estilo de seu tema (geralmente style.css):

img.wp-smiley {
  border-width: 0px !important;
  vertical-align: -5px !important;
  height: inherit !important;
  max-height: inherit !important;
}

O resultado será este:

emoticons2

Os parametros border-width e vertical-align são opcionais e podem ser removidos, a função deles é de centralizar o emoticon a linha de texto, logo esse valor também pode ser alterado para se adequar ao tamanho de seu texto. :-P

Lembrando que você deve instalar o plugin que desabilita o suporte aos emoji, e aplicar o patch CSS acima no style.css de seu tema. :coffe:



  Melhor visualizado a
1024 x 768 True color
Proudly powered by WordPress. Theme developed with WordPress Theme Generator.
E altamente gambiarrado por mim mesmo :)
Copyright © 2010 by Crash Computer. All rights reserved.