Garland header mod on wordpress.com
-
Hello,
Can someone give me detailed instructions on how to modify the header of the Garland theme? There are a few other posts out there asking the same thing, but the question was never answered.
Thanks!
The blog I need help with is: (visible only to logged in users)
-
Garland does not have a custom header feature, so it would require the paid CSS upgrade, AND knowledge of CSS to make the change. Since there is no official support for the CSS upgrade, and few here in the forums with CSS experience, it is best to have at least some experience.
You can use the CSS preview feature to try out changes and see how they will look, but it doesn’t allow you to save the changes. You can though get things figured out before you spend the money.
-
Great.
Does anyone have the answer to the question I asked?
“Can someone give me detailed instructions on how to modify the header of the Garland theme?”
-
-
Actually, he didn’t. I’m looking for detailed instructions on how to update the header. I now know that CSS preview is where to change it, but there is no detail on how to actually do it.
Here are the questions I need answered.
What are the dimensions of the header? I have a graphic designer designing a logo for me and I need to know what dimensions to tell her to make the entire header with the logo included.
What is the syntax to get an image displayed in that header space?
Where can I store the header image? Do I need to pay for hosting for this?
That is the level of detail I’m looking for.
Thanks.
-
First off bear with me and let me explain a couple things, because with flexible width themes such as Garland, putting in any header besides a solid colored bar like Garland has now, is going to result in you not being happy.
The header for flexible width themes has to be virtually infinite in width because the width of the header depends on the browser window width of the visitor. In other words, the header has to be able to grow and shrink in width with the width setting of the browser window. If you go to appearance > themes in the dashboard and filter for “flexible width” you will see that none of them have a customizable header and all of the “headers on them are solid colors. The reason is if you put a jpg of you and your dog eating ice cream in there, it will not change width with the theme and will generally end up looking dorky because if someone has a very wide monitor and has their browser maximized, there will end up being a lot of header area with no image. If you put in a really wide image of you and your dog eating ice cream, then with very narrow browser windows, part of the image is going to be hidden and they won’t be able to see what is on the right end of the image.
Garland does not have a header. It has a background image and that image includes the blue bar and the fade that you see coming down into the sidebars. Replacing that image takes away the fade at the top of the sidebars. Click on this link to see the “background” image for the header/fade area: http://s3.wordpress.com/wp-content/themes/pub/garland/images/body.png . It is a 3px wide bar, and is repeated as many times as necessary by the CSS to maintain the continuous band of color accross the top of the blog.
Since the fade at the top of the sidebars is a part of the background image you will lose it. If you put in on the bottom of your header image and your header image is a jpg of you and your dog eating ice cream, then when someone’s browser window is wider than that image, the fade will disappear from the sidebars because the fade will only be as wide as the image you put in for the “header”.
The blue box at the top of the post area will remain and be imposed over your header image. That is part of the “wrapper” background for the post are and it is made of of three images, left center and right. To get rid of the blue box at the top of the wrapper, you are going to have to create three new images of the exact same size that align perfectly, pixel for pixel, so that they appear seamless, and replace the URL’s of the images in the CSS with the URL’s of the new images. To move the images down, so that they don’t impose over the header image, you will have to change the upper margin for the “wrapper”.
Images needed would be uploaded to your media library here and then you would get the URL’s of those image and put them into the CSS.
Bottom line, and I should have mentioned this earlier my suggestion is to pick a fixed width theme if you want a custom header.
-
1. Header width: Infinite or it has to be a repeating image so it can expand and contract with the width of the browser window. Or if it isn’t a repeating image, how wide of browser window do you want to accommodate? My backup monitor is 1920px in width but I also have another one that is in for repair that is 2560px wide. Over 50% of people are still on 1024px wide resolution. You just have to figure out if you want to plan on 1024px, and then forget everyone with wider monitors or whether you want to shoot for the moon and make the image 2560px wide.
2. Buy the CSS upgrade.
3. Upload the image to your media library and get the URL of that image. Put the following in the CSS edit window and make sure “add to existing CSS” is selected. Replace ” images/body.png ” with the full URL of your header image.
#wrapper { background:#EDF5FA url(images/body.png) repeat-x scroll 50% 0; }4. Upload the image to wordpress via the media library. No need to host it elsewhere and it will load faster if you host it here.
-
One other thing, if you haven’t yet read it please look through this support document on the CSS upgrade, and in particular the section called “CSS Help”: http://support.wordpress.com/custom-css/
-
Q
“Can someone give me detailed instructions on how to modify the header of the Garland theme?”
A
No.
-
Thank you so much. You answered all of my questions and then some. I now understand that garland is probably not the theme I want. Good to know.
What I want to do is put my logo up there. Basically, it would be a logo on the left side with the background color of the logo stretching the whole way across the top of the blog. So, when I say I want to modify the header, what I really want to do is replace the blue bar with the background color of my logo and have my logo be in the left hand corner above the left column of my 3 column blog.
Does this seem possible with garland? Or should I just go with another template with a modifiable, static sized header?
Thanks again.
- The topic ‘Garland header mod on wordpress.com’ is closed to new replies.
WordPress.com Forums 
