Para quem usa o plug-in de estatísticas do WordPress.com, notará que ele insere uma pequena imagem sorridente no rodapé. Essa imagem precisa ser carregada para rastrear as estatísticas.
Algumas pessoas podem achar essa carinha sorridente “fofa”. O restante das pessoas achará a imagem do smiley feia (e possivelmente com aparência maligna) e procurará maneiras de removê-la. Esta postagem abordará o assunto:
- Em primeiro lugar, o que não se deve fazer ao ocultar o smiley
- Como ocultá-lo corretamente, com algumas vantagens adicionais de posição absoluta para determinados layouts
- Se você preferir não ocultá-lo, como centralizar facilmente a imagem do smiley
O que não fazer
Nunca use display:none para ocultar o WP Stats Smiley.
Antes de mais nada, quero falar sobre a única coisa que você não deve fazer ao tentar ocultar o WP Stats Smiley, que é usar: display:none. Sim, eu disse isso duas vezes, mas estava apenas me certificando de que você não havia perdido isso.
Sim, esse é o mesmo código que você pode usar para obter um efeito CSS Killswitch, mas definitivamente não é algo que você queira usar para não exibir uma imagem, que precisa ser carregada para exibir estatísticas com precisão.
O que fazer em vez disso
De acordo com esta publicação, o desenvolvedor recomenda usar o seguinte código em sua folha de estilo (ou seja, style.css) se quiser ocultar o smiley:
img#wpstats{width:0px;height:0px;overflow:hidden}Algo semelhante ao código acima seria o seguinte:
img#wpstats{visibility:hidden}A diferença entre visibility:hidden e display:none é que visibility:hidden ainda ocupará espaço no design, enquanto display:none não (e lembre-se de que você não pode usar display:none a menos que queira que o rastreamento de estatísticas seja prejudicado).
Em determinados layouts, há um pequeno problema com esse código ocupando espaço abaixo do rodapé, por isso pensei em uma solução mais criativa.
Aqui está um exemplo do que estou falando, observe o smiley no canto inferior esquerdo que está causando a quebra do layout do rodapé.
Com os dois exemplos acima, a imagem, embora não visível, ainda ocuparia espaço no layout, fazendo com que a barra cinza-clara (que é a cor de fundo) aparecesse no rodapé.
Posicionamento absoluto
Uma combinação de posicionamento absoluto com o código acima é uma boa maneira de eliminar esse problema. Você poderia tentar algo assim:
img#wpstats{position:absolute;top:0;width:0px;height:0px;overflow:hidden}Centralizando a imagem
Dependendo do seu layout, em vez de ocultá-la, pode ficar um pouco melhor se a imagem do smiley estiver centralizada. Você pode fazer isso facilmente com o seguinte trecho de código.
img#wpstats{display:block;margin: 0 auto}Explicação:
- Define a imagem para ser exibida como bloco (em vez de inline, por padrão).
- Define as margens esquerda e direita como automáticas para centralizar efetivamente a imagem agora em bloco.
Você pode usar esse CSS para centralizar corretamente praticamente qualquer tag “img” sem usar marcação adicional.
Conclusão
A propósito, se você usar o plug-in WP Stats Smiley Remover, não o faça. Porque tudo o que ele faz é adicionar o CSS “display:none” ao seu cabeçalho. Exatamente o que você não deve fazer.
Espero que você tenha gostado da dica sobre WordPress/CSS. Como a anterior, sei que essa foi relativamente simples. Posso fazer outras mais avançadas, portanto, se você tiver alguma solicitação de dicas rápidas de CSS como essa, avise-me nos comentários.
I tried your absolute positioning method and it did work for me. Then I saw the comment about turning off the smiley face. Then I tried that and it did work for me. So I decided not to take the coding route.
Instead I did this
jetpack>site stats>configure>Hide the stats smiley face image
It did work for me. Anyway thank you for your post, so that I could find this solution.
Thank you… this resolved the problem for me, using CSS. Unfortuantely the “hide smiley” option in the Site Stats configuration area didnt work.
how instead can I specify the image dimension to satisfy GTmetrics requirement?
3 years later… thanks for the help Leland! Fixed me up.
Thanks Mark!
Just as an update to the post, you may want to check if the image is actually loading before using any of the methods above.
Some browsers might not load 0px/0px images, for example, and will affect stat accuracy.
Hello there… Just wanted to stop by and say THANK YOU! The “Absolute Positioning” method worked perfectly for me. The other methods didn’t work for me because it caused the background color to show after the footer bar.
So what’s really happening with the “Absolute Positioning” method? Where did the smilely face actually go? LOL…
Chris M:
It’s just pushed out of the screen.
You would be surprised about how often this technique is used for different reasons 😉
Is there a possible way of changing it’s location. My problem with it is that I installed it on a friend’s blogger and it inserted itself right after the footer image thus there’s a white space beneath the footer and it doesn’t look appealing @ all 🙁
I went over this issue in the post, read the part about “Absolute Positioning.”
Ooops! My bad. I’ll try that and see if it solves the problem. Sorry my eyes kinda skipped that part. 😉
Have a great week.
Wow I didn’t know display:none is bad. Thanks, stealing the CSS now 🙂
Thanks – so quick and easy. Glad to know how to do it in a way that doesn’t screw anything else up.
HAHA, this really was bothering you wasn’t it mate. I think thats been most of the issue with this is that someone just used the bad code to start with and word got out about thats how to do it before anyone else really looked into the issue. A bit of common though should tell anyone that if you hide anything, its not going to work right.
See you on twitter mate.
Yeah, it would be so simple if it was just a 1×1 transparent image.
thanks leland!
I think that the smiley is kind of cute. I don’t see why anyone would want to hide him.
Heather, you’d be surprised how many people look to hide the smiley.
Unfortunately a lot of people do it the wrong way (display:none) and get messed up stats.
this is awesome info! i was wondering what the heck that was. i just ignored it until i read this post. i’ll be adding this to my to do list for the week.
Checked out your site, really awesome customization of the Metro theme by StudioPress!
Try adding this code to your stylesheet, I think I found a way to blend it into the black background of your footer.
img#wpstats {display:block;
margin:0 auto;
position:relative;
top:-21px;
}
Works in Firefox, might have to test it out in other browsers too.
“According to this post, the developer recommends to use the following code if you wish to hide the smiley:”
Add it where?
That line of CSS would need to be added to your stylesheet, usually in style.css.
Sorry if it wasn’t clear, just updated the post.