Adding custom header to all pages in Inuit Types

  • Author
    Posts
  • #804219

    mattdelmont
    Member

    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 nicestkids.com.

    #804394

    timethief
    Member

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

    #804396

    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?

    #804398

    mattdelmont
    Member

    Yes, here is the image url

    #804399

    timethief
    Member

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

    #804404

    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;
    }
    #804405

    @timethief, yes it can be.

    #804406

    timethief
    Member

    @thesacredpath
    Thanks for the confirmation. :)

    #804407

    You are welcome.

    #804412

    mattdelmont
    Member

    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.

    #804414

    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.

    #804417

    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;
    }
    #804426

    mattdelmont
    Member

    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!

    #804430

    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.

The topic ‘Adding custom header to all pages in Inuit Types’ is closed to new replies.