How do I add a header image to Paperpunch?

  • Author
    Posts
  • #806963

    I’m hoping someone may be able to help me with what maybe a really stupid question.. but.. How do I add an image as a header in paperpunch rather than just having the title written across the top? Is this possible or do I need to be able to use CSS because I don’t really get how to use that?!

    My blog is

    Thank you!!

    The blog I need help with is bubbleandblockblog.com.

    #807057

    even managed to make my “thank you” a link..!!

    My blog is: http://www.bubbleandblockblog.com

    cheers

    #807085

    timethief
    Member

    This is the introduction to the tehem > http://theme.wordpress.com/themes/paperpunch/
    This is the link to the live demo site for the theme > http://paperpunchdemo.wordpress.com/
    As there is no header image coded into this theme you will have to purchase a custom design upgrade and do the required CSS editing to add one to it.
    http://en.support.wordpress.com/custom-design/
    http://en.support.wordpress.com/editing-css/

    #807310

    thank you for putting all those links up there. I have been through them and started to get an idea of what I need to do, but I don’t know what I actually write in the CSS code to add in a header? I’ve upgraded for the custom design, but not sure what to do next..
    sorry I’m really not great at all this!!

    #807312

    Upload your header image (which should be 960px wide) to your media library and then post the URL of that image here and we can help you with the code.

    #807313

    Ah thank you!

    i created it on illustrator and then exported it as a jpeg do i need to move it into photoshop to make the width 960px? I just don’t want it to pixalate!

    #807314

    Ok, I’ve changed the size to 960px. Here’s the URL:

    Thank you

    #807316

    Give this a try and see what you think. Add it to the CSS edit window at appearance > custom design > CSS. You can delete all the informational text in that window.

    #header {
    background: url("http://sarahmorrisdesign.files.wordpress.com/2012/01/bubbleandblock.png") no-repeat scroll 0 0 transparent !important;
    height: 233px;
    padding-top: 0;
    }
    
    #title a:link {
        display: block;
        height: 233px;
        text-indent: -999px;
        width: 960px;
    }
    
    #title {
    height: 233px;
    margin-left: 0;
    width: 867px;
    }
    
    #description {
    display: none;
    }
    #807317

    Oh my god thank you so much! Thats brilliant – you’ve saved me more hours of figuring that out!!

    Thank you again!!

    #807318

    You are welcome. And if you notice, it is clickable as a link back to your home page.

    #807319

    Ah brilliant! You star! Thank you!!

    #807320

    You might want to add this as well to make the font on your menu bold so that it shows up better against the background.

    #navigation .menu a {
    font-weight: bold;
    }
    #807321

    Ah brill thank you. Just done it.

    I don’t suppose you know what size you should make a wallpaper image so it’s quick to load up? my dots seem to take a few seconds to load up. They are just tiled.. but not sure if i should make them a different size?

    #807322

    The image is only 70k in file size, so that is very good. I wouldn’t worry about it.

    #807323

    thank you for that. i’ve updated the header etc now.. quite pleased with it.

    Can i ask you one last question? I promise that will be it then!!

    How do I move the RSS widget to be in line with the “about” tab (not next to it, just dropped down further down the page) does that make sense?

    thank you !

    #807361

    This will do it and I shortened the navigation width a little bit so that it would not run over the RSS icon if the menu gets a lot of items in it.

    #wrapper {
    position: relative;
    }
    
    ul#follow {
    margin: 0;
    position: absolute;
    right: 15px;
    top: 255px;
    }
    
    #navigation {
    width: 890px;
    }
    #807376

    ah thank you so much that’s perfect.

    Thank you for all your help on this!

    #807377

    You are welcome.

The topic ‘How do I add a header image to Paperpunch?’ is closed to new replies.