Jump to content
raezerj

Logo in header

Recommended Posts

raezerj    0
raezerj

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.com/forum/discussion/10727/brand-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!

Share this post


Link to post
Share on other sites
mackenzie    12
mackenzie
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?

Mackenzie - PageLines Help Desk

The Centsible Family - Writer, Photographer and Coffee Addict

---------------------------------------------------

Kindly search this forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

Share this post


Link to post
Share on other sites
gyoery    2
gyoery
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.

Share this post


Link to post
Share on other sites
catrina    103
catrina
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?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Danny    1,327
Danny
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"

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
raezerj    0
raezerj
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?

Share this post


Link to post
Share on other sites
Rob    547
Rob
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.

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
gyoery    2
gyoery
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.

Share this post


Link to post
Share on other sites
sp1te    0
sp1te

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. 

Share this post


Link to post
Share on other sites
James B    436
James B

@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.pagelines.me/docs/customization/custom-css/


Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×