How to Hide the WordPress Stats Smiley the Right Way
Last updateJanuary 26th, 2024by Editorial Team
FacebookTweetLinkedInPinShares0
SmileyFor anyone using the WordPress.com stats plugin , you'll notice that it inserts a little smiley image into your footer. This image needs to be uploaded in order to track stats.
Some people will think this smiley face is “cute.” The rest of you will find the image unsightly (and possibly evil) and will look for ways to remove it. This post will go over that:
First of all, what not to do when hiding the smiley.
How to hide it properly, with some additional absolute positions for certain layouts.
If you prefer not to hide it, how to easily center the smiley image
What not to do
Never use display:none to hide the WP Stats Smiley.
First, I want to go over the one thing you should not do canada number for whatsapp when trying to hide the WP Stats Smiley, and that is to use: display:none. Yes, I said that twice, but I was just making sure you don't miss it.
Yes, that's the same code you can use to get a CSS Killswitch effect , but it's definitely not something you want to use to not display an image, which needs to be loaded to accurately display stats.
What to do instead
According to this post , the developer recommends using the following code in your stylesheet (i.e. <head> style.css) if you want to hide the smiley:
img#wpstats{width:0px;height:0px;overflow:hidden}
Something similar to the previous code would be the following:
img#wpstats{visibilidad:oculto}
The difference between visibility:hidden and display:none is that visibility:hidden will still take up space in the layout, while display:none will not (and remember, you can't use display:none unless you want to mess up your stats tracking).
In certain designs, there is a small problem with this code taking up space below the footer, so I've thought of a more creative solution.
Here is an example of what I'm talking about, notice the smiley in the bottom left corner that is causing the footer layout to break.
Evil Smiley
With both examples above, the image, although not visible, still takes up space in the layout causing the light grey bar (which is the background color) to appear in the footer.
Absolute positioning
A combination of absolute positioning plus the above code is a good way to eliminate this problem. You could try something like this:
img#wpstats{position:absolute;top:0;width:0px;height:0px;overflow:hidden}
Center the image
Depending on your design, instead of hiding it, it may look a bit better if the smiley image was centered. You can easily do this with the following code snippet.
img#wpstats{display:block;margin: 0 auto}
Explanation:
Sets the image to display as a block (instead of inline, the default).
Set left and right margins to auto to center the block image.
You can use this CSS to properly center virtually any img tag without using any additional markup.
Conclusion
By the way, if you use the WP Stats Smiley Remover plugin , don’t do it. Because all it does is add the CSS “display:none” to your header. The exact thing it ’s not supposed to do .
I hope you enjoyed this WordPress/CSS tip. Like the previous one , I know it's relatively simple. I can do more advanced ones, so if you have any requests for quick CSS tips like this, let me know in the comments.