Adding custom header to all pages in Inuit Types

• 

  mattdelmont · Member · Jan 21, 2012 at 6:33 pm

  • Copy link
  • Add topic to favorites

  I’ve figured out how to add a custom header to my front page (used text widget with html in “front page intro”), but I’m trying to figure out how to get this custom header to show up on all pages.

  The blog is nicestkids.com and I have the CSS upgrade.

  Any suggestions? Thanks for your help.

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

• 

  timethief · Member · Jan 21, 2012 at 6:38 pm

  • Copy link

  It appears that the “front page intro” is coded to appear only on the front page of the blog.

• 

  thesacredpath · Member · Jan 21, 2012 at 6:39 pm

  • Copy link

  Can you post the URL of the image you want to use (if you have uploaded it to your media library already?

  And where did you want the header image? Above the title/tagline? Below the title/tagline?

• 

  mattdelmont · Member · Jan 21, 2012 at 6:42 pm

  • Copy link

  Yes, here is the image url

  

• 

  timethief · Member · Jan 21, 2012 at 6:42 pm

  • Copy link

  @thesacredpath
  Question: By creating the header image and including it in the CSS this can be achieved, no?

• 

  thesacredpath · Member · Jan 21, 2012 at 6:55 pm

  • Copy link

  Matt, let’s start with this and see what you think.

  #header {
  background: url("http://nicestkids.files.wordpress.com/2012/01/nicest-kids-wordpress-header-610.png") no-repeat scroll bottom center;
  height: 215px;
  margin-bottom: 20px;
  }

• 

  thesacredpath · Member · Jan 21, 2012 at 6:56 pm

  • Copy link

  @timethief, yes it can be.

• 

  timethief · Member · Jan 21, 2012 at 7:03 pm

  • Copy link

  @thesacredpath
  Thanks for the confirmation. :)

• 

  thesacredpath · Member · Jan 21, 2012 at 7:05 pm

  • Copy link

  You are welcome.

• 

  mattdelmont · Member · Jan 21, 2012 at 7:15 pm

  • Copy link

  Thanks @thesacredpath. The custom header now appears on all of the pages. The only problem is that it is below the regular blog title. Ideally the custom header will appear on the top of each page where the regular blog title normally goes.

• 

  thesacredpath · Member · Jan 21, 2012 at 7:18 pm

  • Copy link

  That was one of my original questions as to whether you wanted it above or below. I’ll adjust the CSS and post the new in a few minutes.

• 

  thesacredpath · Member · Jan 21, 2012 at 7:22 pm

  • Copy link

  Dump the other and try this.

  #header {
  background: url("http://nicestkids.files.wordpress.com/2012/01/nicest-kids-wordpress-header-610.png") no-repeat scroll center 30px transparent;
  height: 215px;
  margin-bottom: 20px;
  }
  
  #header .blog-title {
  margin-top: 160px;
  }

• 

  mattdelmont · Member · Jan 21, 2012 at 7:44 pm

  • Copy link

  This is perfect, thanks @thesacredpath. Just so I can try to learn a little about CSS does this (the second piece of what you posted):

  #header .blog-title {
  margin-top: 160px;
  }

  Move the regular header down?

  Thanks again!

• 

  thesacredpath · Member · Jan 21, 2012 at 7:49 pm

  • Copy link

  You are welcome, and yes, that move the title and tagline down. If you compare the background declarations between what I first gave (image below) and the second, you will see that in the first there is “center bottom” and in the second there is “center 30px” The second spaces the image down 30px from the top so that it aligns with the top of the sidebar content.