Support Forum - Topic: Replacing logo with Retina Logo

Support Forum - Topic: Replacing logo with Retina Logo http://www.kriesi.at/support/topic/replacing-logo-with-retina-logo Support Forum - Topic: Replacing logo with Retina Logo en-US Sat, 18 May 2013 16:47:44 +0000 http://bbpress.org/?v=1.0.2 <![CDATA[Search]]> q http://www.kriesi.at/support/search.php Nick on "Replacing logo with Retina Logo" http://www.kriesi.at/support/topic/replacing-logo-with-retina-logo#post-97700 Wed, 20 Feb 2013 18:48:27 +0000 Nick 97700@http://www.kriesi.at/support/ Hi, hmmmmm 3 seconds? thats not good. Why don't you encode the image to base64 and stick it in the css , you may have a large css file, but mobiles load css instantly unlike images. It would shave 90% on your load time. Here is the url to the converter <a href="http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/" rel="nofollow">http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/</a> Good luck! Nick Lindsey on "Replacing logo with Retina Logo" http://www.kriesi.at/support/topic/replacing-logo-with-retina-logo#post-97691 Wed, 20 Feb 2013 18:13:02 +0000 Lindsey 97691@http://www.kriesi.at/support/ Thanks Nick, With the Propulsion theme, if I remove my image from the Theme Options, the Propulsion image is the default logo, and displays with my logo as well. After installing WP Retina2X, I was able to remove media queries completely for the logo. All I needed to do was rename the Propulsion logo as p-logo.png and drop in my original size image in named logo.png, as well as a high res version as <a href="mailto:logo@2x.png">logo@2x.png</a>. The high res version loads about 3 seconds after the original version on the iPhone. Thank you so much for all of your help and kindness!! Sincerely, Lindsey Nick on "Replacing logo with Retina Logo" http://www.kriesi.at/support/topic/replacing-logo-with-retina-logo#post-97551 Wed, 20 Feb 2013 01:35:18 +0000 Nick 97551@http://www.kriesi.at/support/ Hi, You could do it like this ... below is pseudo code to give you an idea. <pre><code>#top h1.logo { background-image: url(logo-non-retina.png) !important; } @media ...al the media queries from above only screen and ( min-resolution: 2dppx) { #top h1.logo { background: url("/retina.png") !important; } }</code></pre> and for the html <pre><code><h1 id="logo" class="logo"> <a href="abc.com">Website name</a> </h1></code></pre> Ref: <a href="http://stackoverflow.com/questions/665037/replacing-h1-text-with-a-logo-image-best-method-for-seo-and-accessibility" rel="nofollow">http://stackoverflow.com/questions/665037/replacing-h1-text-with-a-logo-image-best-method-for-seo-and-accessibility</a> Thanks, Nick Lindsey on "Replacing logo with Retina Logo" http://www.kriesi.at/support/topic/replacing-logo-with-retina-logo#post-97543 Tue, 19 Feb 2013 23:48:47 +0000 Lindsey 97543@http://www.kriesi.at/support/ Hello, This is a great article and resource you have given me. I will conquer this! I appreciate your help. Yes, I hard-coded the logo in the Theme Options inside WordPress. I wonder if I should replace it with the high-res one, and just change the background size via CSS in my mobile media query instead of swapping it out. I think that would work. I will try this and also reinstall the plugin and I will update you soon. Thank you so kindly, Nick! - Lindsey Nick on "Replacing logo with Retina Logo" http://www.kriesi.at/support/topic/replacing-logo-with-retina-logo#post-97540 Tue, 19 Feb 2013 23:04:43 +0000 Nick 97540@http://www.kriesi.at/support/ Hi, Hehe. I got the css I posted from the same website. Yet it didn't say to remove the original, it just says to add the variation. You can also look at this <a href="http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/" rel="nofollow">http://www.brettjankord.com/2012/11/28/cross-browser-retinahigh-resolution-media-queries/</a> You have your main logo hardcoded in the html so it will be displayed no matter what <pre><code><h1 class="logo"><a href="http://www.toxicfreechallenge.com/"><img src="http://toxicfreechallenge.com/wp-content/uploads/2011/12/TFC-logo-114x143.png" alt=""></a></h1></code></pre> You need to have both the retina and the original image inside the css and to show one or the other class based on the media query. Please look here for example <a href="http://www.sitepoint.com/css-techniques-for-retina-displays/" rel="nofollow">http://www.sitepoint.com/css-techniques-for-retina-displays/</a> I would still use <a href="http://wordpress.org/extend/plugins/wp-retina-2x/faq/" rel="nofollow">http://wordpress.org/extend/plugins/wp-retina-2x/faq/</a> ... the developer guarantees it and even offers free support. can't beat that. Thanks, Nick Lindsey on "Replacing logo with Retina Logo" http://www.kriesi.at/support/topic/replacing-logo-with-retina-logo#post-97513 Tue, 19 Feb 2013 20:26:18 +0000 Lindsey 97513@http://www.kriesi.at/support/ Thanks Nick, I've updated my CSS and checked my Firefox app on my iPhone, and they look the same. I've read articles on using both types of moz, one from css-tricks.com even says "The super weird min--moz-device-pixel-ratio is probably a bug, might wanna put in -moz-min-device-pixel-ratio also in case they fix it but leave it prefixed". In any event, I have changed mine to your suggestion - thank you so much, although my icons are appearing the same. Regarding the image replacement for the logo, I have it in my media query as such: @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { h1.logo a { background: url("/wp-content/uploads/2011/12/TFC-logo-114x143@2x.png") no-repeat top left; background-size: 60%; } } The image shows up and looks great, except it's peeking out from behind my original logo. I can't display:none on the original logo because they have the same selector. I'm not sure why the original logo isn't disappearing. I have saved my CSS so you should be able to see it on my home page <a href="http://www.toxicfreechallenge.com" rel="nofollow">http://www.toxicfreechallenge.com</a>. This is a very interesting dilemma. Thank you for your help!! - Lindsey Nick on "Replacing logo with Retina Logo" http://www.kriesi.at/support/topic/replacing-logo-with-retina-logo#post-97505 Tue, 19 Feb 2013 19:37:00 +0000 Nick 97505@http://www.kriesi.at/support/ Hi, Please try this <pre><code>@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { /* Retina-specific stuff here */ }</code></pre> Your line 2 is not correct. min moz device ... not ... min moz min device Thanks, Nick Lindsey on "Replacing logo with Retina Logo" http://www.kriesi.at/support/topic/replacing-logo-with-retina-logo#post-97497 Tue, 19 Feb 2013 19:10:35 +0000 Lindsey 97497@http://www.kriesi.at/support/ Thanks Nick, I'm just using my own layout.css document with these media queries, which are successful with all my other images, so I'm not sure why the logo isn't updating: @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) { } I had the Retina2x plugin but it wasn't working, so I just created my own media queries and uploaded <a href="mailto:icon@2x.png">icon@2x.png</a> for all my images and icon and coded it out with the above media query, and everything except the logo worked. Retina2x documentation states "The plugin can transform the images that go through the WordPress API and the 'Image Sizes' properly. Themes often uses a one-time customized size for the logo, and for that reason the image wouldn't be taken care of by the plugin. The easiest way to go around this is to create the Retina image by yourself. For example, if you are logo is 200x100 and named 'logo.png', upload a 400x200 version of that logo named 'logo@2x.png' next to the other one. It should them work immediately." I did that, but it still didn't replace it, so I had no need for the plugin and deactivated and deleted it. So with my own code, my images are fine and retina images are replacing, but the logo isn't. Nick on "Replacing logo with Retina Logo" http://www.kriesi.at/support/topic/replacing-logo-with-retina-logo#post-97487 Tue, 19 Feb 2013 18:33:32 +0000 Nick 97487@http://www.kriesi.at/support/ Hi, What are you using (code) to display retina? Have you tried this <a href="http://conditionizr.com/" rel="nofollow">http://conditionizr.com/</a> or <a href="http://wordpress.org/extend/plugins/wp-retina-2x/" rel="nofollow">http://wordpress.org/extend/plugins/wp-retina-2x/</a> Thanks, Nick Lindsey on "Replacing logo with Retina Logo" http://www.kriesi.at/support/topic/replacing-logo-with-retina-logo#post-97321 Mon, 18 Feb 2013 20:33:01 +0000 Lindsey 97321@http://www.kriesi.at/support/ Hi Team, I've updated all my site's icons and images with retina and all is well on mobile. I'd like to now replace my logo with a retina image. This is what is working for me for site wide images in my media queries: #list .icon { background: url("../images/icon@2x.png") no-repeat top left; background-size: 60%; } However, when I try to implement retina replacement for my logo, my retina image shows up under the logo and to the left, so instead of replacing the original logo on mobile devices, there are two images there. I have tried the following and they are showing up but the original image isn't going away: h1.logo { background: url("../images/TFC-logo-912x1144@2x.png") no-repeat top left; background-size: 60%; } h1.logo a { background: url("../images/TFC-logo-912x1144@2x.png") no-repeat top left; background-size: 60%; } h1.logo a img { background: url("../images/TFC-logo-912x1144@2x.png") no-repeat top left; background-size: 60%; } I've done this for other sites when hand-coding, but this is my first time attempting with a theme and I'm not sure how to correct this in the php. Thank you for your help! - Lindsey