Header Banner Image for Pilcrow by Automattic

• 

  frodojrr · Member · Jan 9, 2011 at 8:29 pm

  • Copy link
  • Add topic to favorites

  I am trying to change the banner image on my blog. I have the CSS upgrade, but the banner is not loading from the CSS.

  The template on the admin panel says: “Images of exactly 990 × 257 pixels will be used as-is.” However, when I upload an image 990px wide, I am presented with a crop window floating over the image I uploaded.

  I am completely unable to drag the crop window to the width of my image. The crop window only grows and shrinks proportionately and will not allow me to cover the entire image.

  Anyone deal with this on Pilcrow or another theme?

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Jan 9, 2011 at 9:02 pm

  • Copy link

  Do you have the CSS upgrade and have you made changes to the CSS? If so, then the header image has to be placed directly into the appropriate selector in the CSS. You cannot use the custom header uploader once you have done CSS editing.

• 

  frodojrr · Member · Jan 9, 2011 at 9:35 pm

  • Copy link

  I do have the CSS upgrade, but tried to do this the first time before the upgrade. Had the same problem.

  I found a #pic id in the CSS, but when I put a background-image there it doesn’t work. I can still swap out the images using the admin panel.

  First time I’ve ever used WP here. I usually do my own installs. Thought I’d give it a shot and let WP do my upgrades. :)

• 

  thesacredpath · Member · Jan 9, 2011 at 9:39 pm

  • Copy link

  What is the URL of the image (you can get it from the media library)?

• 

  frodojrr · Member · Jan 9, 2011 at 10:02 pm

  • Copy link

  Actually received a reply from support. The header image must be 990×257. Suggestion was to add white space to the image.

  Don’t know why I didn’t think of that. Fired up Fireworks and banner looks sharp now.

• 

  frodojrr · Member · Jan 9, 2011 at 10:04 pm

  • Copy link

  Pilcrow requires the image to be exactly 990×257.

  Thanks for your help. I appreciate a reply.

• 

  thesacredpath · Member · Jan 9, 2011 at 10:07 pm

  • Copy link

  OK, got it figured out (or at least this works). Go to appearance > header and remove the header image and then click save.

  Then put this at the bottom of your CSS.

  #pic {
  background: url("URL_of_image") no-repeat scroll 0 0 red;
  border-bottom: 2px solid #000000;
  height: 257px;
  margin-top: 45px;
  width: 990px;
  }

  The original image was linked to your blog home page, but this one will not be. You can adjust the height as necessary to match your header image.

• 

  thesacredpath · Member · Jan 9, 2011 at 10:09 pm

  • Copy link

  You’re welcome. They did the header image in Pilcrow in a very strange way which makes it difficult to change it out via CSS (it is declared in the HTML which over rides all CSS, even if you use the !important attribute.