Jump to content


Photo

Logo in header


  • Please log in to reply
10 replies to this topic

#1 raezerj

raezerj

    Advanced Member

  • Members
  • 81 posts
  • Country: Country Flag

Posted 23 March 2012 - 11:06 PM

Hello!

I want to improve the look of my logo on the new iPad (right now it looks blurry on the retina display). I thought the solution could be to enlarge the image to twice its size (800px) and use one of the suggestions above to shrink it back down to the current size (400px).

I tried these two solutions (from this post: http://www.pagelines...and-nav-size/p1), but they didn't work -- the image remained at the uploaded size (800px):

 #brandnav .title-container{width:400px !important;}

 img.mainlogo-img {width: 400px !important;}

My site: www.approachguides.com

Any suggestions? Thanks!

#2 mackenzie

mackenzie

    Advocate

  • Members
  • 333 posts
  • Country: Country Flag

Posted 24 March 2012 - 12:52 AM

Do you have the original copy of your logo, possibly from the graphic? Stretching the image to double it's size and then shrinking it won't change the pixel resolution in the file. You would need to adjust the original image and then save it as a new version, if that makes sense. I'm assuming this is in the new iPad?

#3 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 24 March 2012 - 01:29 PM

I dont See the point in image resizing. Especially not in client size browsers. And not when using jpegs. I believe the image should be saved in the displayable size, as PNG or gif.

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 24 March 2012 - 05:25 PM

Do you have the editable file for your logo? Is it an AI/Illustrator file? If so, it can be resized and saved as a PNG or other web-friendly format without sacrificing quality, but I don't know what difference it would make on the iPad. By "blurry" do you mean that the logo is appearing pixelated?

#5 Danny

Danny

    Is Awesome!

  • Moderators
  • 17124 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 25 March 2012 - 12:33 PM

This isn't a PageLines product issue, you will need to contact Apple's support regarding this, I did a search and found a few topics. Simply search google for "images blurry new ipad"

#6 raezerj

raezerj

    Advanced Member

  • Members
  • 81 posts
  • Country: Country Flag

Posted 25 March 2012 - 06:52 PM

Thanks all. I have the AI file of the logo and have tried a few things -- high-res, PNG, GIF, etc. I know the blur isn't a pagelines issue, but I thought I would try resizing it (this is one part of a solution that works for preventing blur with ebook images), so was trying to figure out how to do that w your platform. Do you know how to control the image size in the header with CSS?

#7 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 25 March 2012 - 07:40 PM

Just a little issue in terms of graphics editing... I found this in looking at the image information: 399px ?— 75px (scaled to 400px ?— 75px) Your .png file is actually scaled to 400, but it's truthfully 399px. That one pixel scaling is likely making it fuzzy in your iPad. You may need to resize it to ensure it's actually 400, or change the scaling to 399px (which is much easier). Otherwise, Danny's correct that this is really an Apple issue.

#8 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 26 March 2012 - 10:13 PM

OT: So what, if it is not a pagelines issue? 90% of the stuff that is being asked here are css or plugin issues... How did that saying go? "If you ain't got nothing nice to say....." Danny, why post, if it aint helpin? Look @ rangelone... he at least looked at the code.

#9 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 27 March 2012 - 02:19 AM

@raezerj Do you need assistance with this issue or anything else?

#10 sp1te

sp1te

    Newbie

  • Members
  • 7 posts
  • Country: Country Flag

Posted 28 February 2013 - 09:04 PM

Hello everyone, I have just been trying to get this done today as well. I want to serve 2 separate images one for HiDPI screens, and one for normal res screens. So far here is my solution, I want to server 2 separate images so I can minimize my bandwidth usage. Using css this is what I have came up with so far. 

 

The only problem I have had is on my child pages this dies so I'm currently working on that now. 

 

I use the following code to remove my logo.

 

 
#branding .mainlogo-img
{
display:none;
}

 

Then I take the following code and point it at my two images one larger rez and one lower rez. the one on top is standard res. 

 

 
.mainlogo-link
{
width:662px;
height:100px;
background: url(../wp-content/uploads/2013/02/elimergel_logo_again.png) no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) 
{
.mainlogo-link {
background: url("../wp-content/uploads/2013/02/elimergel_logo_again-2x.png") no-repeat;
background-size: 662px 100px;
}
}

 

If you go to my site it seems to be working peachy keen until you browse to the Wedding page. I'm trying to figure out why that is and if I need to I thought I could just force it to work with the following code. 

 


 
/*Replace logo Weddings*/
.page-id-431 #branding .mainlogo-img
{
display:none;
}
.page-id-431 .mainlogo-link
{
width:662px;
height:100px;
background: url(../wp-content/uploads/2013/02/elimergel_logo_again.png) no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) 
{
.page-id-431 .mainlogo-link {
background: url("../wp-content/uploads/2013/02/elimergel_logo_again-2x.png") no-repeat;
background-size: 662px 100px;
}
}

 

 

But alas no go. Ill keep hammering at it. 

 

If you use the code on the top though you can serve two different images one for HiDPI screens one for regular old computer screens. If anyone can help me with my photography page let me know Ill be working on it till I get it fixed. 



#11 James B

James B

    Advocate

  • Members

  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 01 March 2013 - 01:19 AM

@Sp1te hi there, sometimes in child themes you need to use an override for the css. Check out the 'pagelines overrides' section in - http://support.pagel...ion/custom-css/