Theme developers that submit themes on wordpress.org (like we do) have to usage the built-in logo design choice in WordPress. But the integrated logo alternative doesn’t have a second retina variation for the logo design.
You are watching: Why is my logo blurry on my website
As a design template developer, I have actually no clue what your logo will certainly look like, so I can’t develop a pre-identified dimension without making points worse.
The result is a logo design that only displays at traditional definition which appears blurry on high resolution displays.
WordPress will certainly need to add a retina variation for logos in the Customizer, but for currently, I have an easy workaround for you.
This customization functions for every one of our themes and have to occupational for the majority of various other WordPress themes as well.
How to fix your pixelated logo
This solution is a tiny little bit technological, but I’ve outlined the measures as clearly as I can.
What you’re going to do is uppack a variation of your logo design that is 2x the normal size and then usage CSS to shrink it dvery own to constant dimension (I composed the code already for you).
For instance, if the logo design photo you have presently displaying is 300px wide, then you’ll uppack a 600px wide version. When your photo file is exactly twice as huge as it mirrors up on your site, it screens perfectly sharp on high-resolution screens. If you look at the logo on this webwebsite right now, that’s basically what I’m doing.
Now let’s obtain to the measures.
Find out what your ideal size is
The first step is to login to your site and also open up the Live Customizer.
Upfill your new 2x version of the logo design and it will show up nice and also sharp on the website.
To summarize, you adjust the logo dimension with CSS until it fills the right amount of area in the header. Then you upfill a picture that is twice that size, and also it will certainly look sharp on high resolution screens.
This is fundamentally what retina support for imperiods on the web does behind-the-scenes and also this is a straightforward method to implement it yourself.
That’s all tbelow is to it!
It’s a shame that WordPress doesn’t have an excellent means to display high resolution logos, yet the workroughly is straightforward sufficient.
You deserve to alternatively upload an SVG version of your logo, however this also calls for including SVG support.
While you may not recognize anything about CSS, the steps right here greatly requiring copying & pasting, and also I hope that you appreciated picking up some brand-new technological skills by following this tutorial.
See more: Why Is The Act So Hard - Why Is The Act English Test So Hard
If you desire to learn even more around using CSS to customize your website, examine out this tutorial:
How to Customize Your Theme via Custom CSS
And if this write-up helped you out today, please consider sharing it with someone else prior to you leave.