Morning After theme – adding custom header image

• 

  timorharii · Member · Nov 16, 2011 at 5:13 am

  • Copy link
  • Add topic to favorites

  I want to add a custom header (On my site, the “Fundasaun Timor Hari’i / FTH: the ‘Build Timor Foundation’ ” part). I went to Appearance / Header which shows an option to add a different banner image, not a custom header.

  Is there an option to upload an image for the header itself, not the banner image?

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

• 

  thesacredpath · Member · Nov 16, 2011 at 5:22 am

  • Copy link

  The Morning After does not have a “header” in the normal sense. It has that image below the navigation and that is it.

  An image can be put up where the title and tagline is using CSS which requires the purchase of the Custom Design Upgrade.

• 

  timorharii · Member · Nov 16, 2011 at 6:33 am

  • Copy link

  Thanks Mr Path,

  I have the design upgrade. Could you navigate me to the correct place to insert a header image? I imagine it’s around this:

  #header #logo {
max-width: 531px;
}

  but i’ve no idea how to insert a pic instead of the default words.

  Many thanks in advance

• 

  thesacredpath · Member · Nov 16, 2011 at 7:10 am

  • Copy link

  I need the image URL. Have you uploaded it to your media library yet? If not, upload it and then post the URL here.

• 

  timorharii · Member · Nov 16, 2011 at 7:42 am

  • Copy link

  The header is not yet finished but you are welcome to use this mockup and I can amend the URL once it’s finished

  http://timorharii.files.wordpress.com/2011/11/mockup.gif:

• 

  thesacredpath · Member · Nov 16, 2011 at 8:19 am

  • Copy link

  This will do it for you.

  #header #logo {
  background: url("http://timorharii.files.wordpress.com/2011/11/mockup.gif") no-repeat scroll 0 0 transparent;
  height: 96px;
  width: 531px;
  }
  
  .title .site-title, .title .desc {
  display: none;
  }

• 

  timorharii · Member · Nov 16, 2011 at 8:55 am

  • Copy link

  Fantastic, thanks.

  One problem is that the header now no longer clicks through to the homepage. Is it possible to make the image clickable?

• 

  thesacredpath · Member · Nov 16, 2011 at 9:37 am

  • Copy link

  That is a little bit of an ordeal. What has to be done is that you have to create a blank, transparent PNG file the same size as the logo/header, put it into a text widget and link to to your main page and then use absolute positioning to move it up and over the top of the logo/header. The problem is though that the text widget has to be put into the “primary” sidebar, and then all pages have to have a sidebar. You can’t use the full-width page template for any static pages.

  If all that is fine, then create the blank (no color) transparent image, put it into the primary sidebar and link it to the home page, preferably at the top so it is easy for me to find and I can work on moving it up for you. It is going on midnight here in the middle of the Pacific so I’m about ready to shut down and go to bed, but I’ll work on it for you tomorrow.

• 

  timorharii · Member · Nov 17, 2011 at 1:49 am

  • Copy link

  Wow… ordeal indeed but an innovative workaround =)

  I have done as you’ve asked; you’ll see http://timorharii.files.wordpress.com/2011/11/blank.gif at the top of the primary sidebar linking to the homepage.

  thanks again

• 

  thesacredpath · Member · Nov 17, 2011 at 2:21 am

  • Copy link

  This will do it. Add it to the bottom of your custom CSS. Also after saving it, make sure and check that it doesn’t shift between being logged in and logged out. It shouldn’t, but then one never knows. Position absolute can be tricky sometimes.

  #text-6 {
  left: 20px;
  position: absolute;
  top: 20px;
  }

• 

  timorharii · Member · Nov 17, 2011 at 3:13 am

  • Copy link

  My hero. Thanks so much.

  Let me know if you have a donation page set up… happy to contribute some pennies for your patient help to our modest organisation =)

• 

  thesacredpath · Member · Nov 17, 2011 at 5:07 am

  • Copy link

  You are welcome.