Creating a retina friendly logo

Hi,

I’m working on a site using Fashionistas at the moment - love the theme!

I want to add a logo but am a bit confused as to what pixel dimensions to use - ideally I want it to be centred across the header but the main thing is I really need it to be retina / high dpi screen friendly - I currently used the WP Retina 2 x plugin which provides retina versions for images, I don’t think this works for logos too however.

Can anyone advise what I need to do here - ie the css modification so the logo goes middle top, an adviseable size for a ‘normal’ logo and then how I get a 2 x retina one to appear

Many thanks!

oh and I guess I need smaller versions too so that it will re-size for mobile screens, so I would need to use media queries? (sorry I’m kind of new at this!)

Hi,

You can use a 500x150px image and can be limited to have the same height as the demo’s logo ( 75px ) via CSS, so it will be half-size then the actual image, so it will be double-size ( retina ), so use a 500x150px image and post a link to your website, so I can give you the Custom CSS to center the logo and make it look perfectly sharp on retina displays.

Best Regards,
Csaba

Thanks very much Csaba, that’s really helpful! I’m working in Desktop Server locally at the moment but once I’ve got the site online I’ll post the link here - thanks again for your help

Hi,

You’re most welcome! After you publish your site online post here a link, so I can give you a Custom CSS to limit the logo size ( if that will be needed ).

Best Regards,
Csaba

Hi, could you add the css, so we can follow your advice here on another site using same theme (500x150px logo css customized) Thx

Hi,

Please post a link to your site ( one of your site using this theme with the image added ), so I can give you a working Custom CSS.

Best Regards,
Csaba

Using the Perth theme, how can a retina logo be used and automatically resize correctly for tablet and mobile?

Test site link: http://66.147.244.245/~stronhb1/

Hi,

Just add a 160px high image, because the max-height is set to 80px, so your logo image quality will be double ( retina ) but the size will be maxed to 80px height, so on retina displays the logo will be crisp clear.

Best Regards,
Csaba