Change size of header image in twentyten?
-
I’m sure this has been asked before but I wasn’t finding anything:
If I buy the CSS upgrade, will I be able to change the height of the header image? I’ll be working off of twentyten. I want it to be just 100px high, instead of 198.
I was playing with this with WordPress downloaded to my computer locally. I found that if I just change the image height in CSS, it squashes the image. It’s like it thinks it is 198 pixes, then smashes it down to 100 (even if I cropped the image to 100px before uploading.)
I found help to add a bit of code to the functions.php file to adjust the size of the header image, and that worked great.
But even with the css upgrade, I won’t be able to edit functions.php for my blog on wordpress.com, right?
I could see stretching the image in photoshop and then squeezing it back with CSS, but that seems like a real clumsy hack. (It’s actually going to be line art, so it would probably be fine). But is there a better way?
The blog I need help with is: (visible only to logged in users)
-
Yes you will be able to change the height. The header image uploader will always work off the original image dimensions, so after changing anything to do with header size, you have to upload the header image to your media library and then put the URL for the header image directly into the CSS instead of using the custom header uploader.
-
OK, I understand what you are saying about uploading the image to the library instead of directly into the header spot. But I’m not sure I understand what if any css changes are needed. There is this bit of code in the twentyten style.css. Do I need to make any changes to it? Do I need to add a “height” property? And this is where I add a line to point to the image url?
/* This is the custom header image */ #branding img { border-top: 4px solid #000; border-bottom: 1px solid #000; clear: both; display: block; } -
In the above, you would add a background declaration where you would insert the URL of your image and also a height declaration. At wordpress.COM, it is best to only add exactly what you are changing to the CSS edit window and make sure “add to existing…” is chosen. Then your changes will override the original CSS, so what you would put in the CSS edit window would be the following if this is all you are changing.
#branding img { background: url("URL_of_image") no-repeat scroll 0 0 transparent; height:100px; } -
Hello, I have a similar question. I want to upload a new image to my header with different heights than in the original theme (Vigilance) and I uploaded the image to my media library and it’s 788px in height and 526px in width. I’ve tried one code to create the custom header image, but it didn’t help. Any suggestions?
-
@lilyschlosser, the Vigilance standard header is 920px wide and you image is only 526px wide which is only going to cover about 60% of the available header width. Also with a height of 788px, anyone that is on a 1024 x 768 resolution monitor (and that is over 40% of people on the web) is not even going to see the entire header image, much less anything of the blog itself. They will always have to scroll down just to even see the first part of the content. Is this really what you want to do?
-
NO! haha I do not want to do that! I just wanted a vertical image, like a regular vertical photograph…so is that not possible with the theme that I chose? or can I just make the image smaller but still have it be longer in height and smaller in width?
-
To look right, the image is going to have to be 920px wide so that it fills the header area horizontally. The length can be anything you want, but really big tall header images are not really a good idea from a design standpoint (unless the header is the focus of your blog). The main thing should be your content and all aesthetic design elements should be in support of that. Very large headers, big splashes of bright colors, or busy backgrounds all pull the eye away from the content.
Just sayin’…
-
I see. Yes, a header image that large would look extremely silly! I just feel like the header image that’s 920px wide is so generic and I wish I could make it different! Thanks for the insight!
-
You can. Create a 920px wide white canvas in your image editing program and then stick a 500px wide image in it, or even a 200px wide image. Make it 1000px tall. Center it, put it at the left, put it at the right on the white canvas, but after seeing it in the blog, I don’t think you will like it.
Here is your blog with a 536 x 800 image on a 1024 x 768 monitor.
Here is a screen cap of your blog with the same image with my browser window at maximum length.
I didn’t bother centering the image.
-
Not that on the 1024 x 768 monitor resolution, you see absolutely nothing of any navigaion or anything else? That is a bad thing. One of the key things in web design is clear and easy to find navigation. DON’T make people go looking for it. DON’T make people think.
-
@ thesacredpath,
Hi,
Finally got back to this after a couple of days. Put in the code you left above — did the trick! Thank you for your help. Appreciate it. -
-
-
-
@thesacredpath
I’m having difficulty in getting my header image to show. I’ve tried what you’ve noted above, but can’t seem to get it to show.How do I enter the link below into the parenthesis?
rubberbandchronicles.files.wordpress.com/2011/02/wpheader.jpg’
#branding img {
background: url(“URL_of_image”) no-repeat scroll 0 0 transparent;
height:100px;
}I’ve gotten the height to increase, but the image will not show – help & thanks!
-
That worked – thank you! One other item – can you direct me how to get rid of the navigation bar & page titles? THANKS!
-
You’re welcome.
You don’t need CSS to get rid of the nav bar. Go to Appearance>Menus, type a name in the Menu Name field, click Create Menu, click Save Menu, select that menu from the Theme Locations module, click Save.
-
Excellent – thanks again! One more question, if you don’t mind. I’m unable to figure out how to get my background back in, since I upgraded to Custom CSS.
- The topic ‘Change size of header image in twentyten?’ is closed to new replies.
WordPress.com Forums 