Si vous utilisez le plugin de statistiques WordPress.com, vous remarquerez qu’il insère une petite image smiley dans votre pied de page. Cette image doit être chargée pour suivre les statistiques.
Certaines personnes peuvent penser que ce petit smiley est “mignon”. Les autres trouveront l’image smiley inesthétique (et peut-être maléfique) et chercheront à la supprimer. Ce billet traite de ce sujet :
- tout d’abord, ce qu’il ne faut pas faire lorsque l’on cache le smiley
- Comment le cacher correctement, avec quelques astuces de position absolue pour certaines mises en page.
- Si vous préférez ne pas le cacher, comment centrer facilement l’image du smiley
Ce qu’il ne faut pas faire
N’utilisez jamais display:none pour cacher l’émoticône de WP Stats.
Tout d’abord, je veux passer en revue la seule chose que vous ne devez pas faire lorsque vous essayez de cacher l’émoticône de WP Stats, et c’est l’utilisation de : display:none. Oui, je l’ai dit deux fois, mais je voulais m’assurer que vous ne l’aviez pas manqué.
Oui, c’est le même code que vous pouvez utiliser pour obtenir un effet CSS Killswitch, mais ce n’est certainement pas quelque chose que vous voulez utiliser pour ne pas afficher une image, qui doit être chargée pour afficher correctement les statistiques.
Ce qu’il faut faire à la place
Selon cet article, le développeur recommande d’utiliser le code suivant dans votre feuille de style (c’est-à-dire style.css) si vous souhaitez masquer le smiley :
img#wpstats{width:0px;height:0px;overflow:hidden}Un code similaire à celui qui précède serait le suivant : img#wpstats{width:0px;height:0px;overflow:hidden} :
img#wpstats{visibility:hidden}La différence entre visibility:hidden et display:none est que visibility:hidden prendra toujours de la place dans le design, alors que display:none n’en prendra pas (et rappelez-vous que vous ne pouvez pas utiliser display:none si vous ne voulez pas que votre suivi de statistiques soit perturbé).
Sur certaines mises en page, il y a un petit problème avec ce code qui prend de la place sous le pied de page, j’ai donc pensé à une solution plus créative.
Voici un exemple de ce dont je parle, remarquez le smiley dans le coin inférieur gauche qui cause la rupture de la mise en page du pied de page.
Dans les deux exemples ci-dessus, l’image, même si elle n’est pas visible, prend de la place dans la mise en page, ce qui entraîne l’apparition d’une barre gris clair (qui est la couleur d’arrière-plan) dans le pied de page.
Positionnement absolu
Une combinaison de positionnement absolu et du code ci-dessus est un bon moyen d’éliminer ce problème. Vous pouvez essayer quelque chose comme ceci :
img#wpstats{position:absolute;top:0;width:0px;height:0px;overflow:hidden}Centrer l’image
En fonction de votre mise en page, il peut être préférable de centrer l’image du smiley au lieu de la masquer. Vous pouvez facilement le faire avec l’extrait de code suivant.
img#wpstats{display:block;margin : 0 auto}Explication :
- Définit l’image pour qu’elle soit affichée en bloc (au lieu d’être en ligne, par défaut).
- Les marges gauche et droite sont automatiques, ce qui permet de centrer l’image en bloc.
Vous pouvez utiliser ce CSS pour centrer correctement à peu près n’importe quelle balise “img” sans utiliser de balises supplémentaires.
Conclusion
Au fait, si vous utilisez le plugin WP Stats Smiley Remover, ne le faites pas. Parce que tout ce qu’il fait, c’est ajouter le CSS “display:none” à votre en-tête. La chose exacte que vous n’êtes pas censé faire.
J’espère que vous avez aimé cette astuce WordPress/CSS. Comme la précédente, je sais que celle-ci est relativement simple. Je peux en faire de plus avancées, donc si vous avez des demandes pour des astuces CSS rapides comme celle-ci, faites-le moi savoir dans les commentaires.
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.