Need help? Check out our Support site, then


How do I add a header image to Paperpunch?

  1. sarahmorrisdesign
    Member

    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.

  2. sarahmorrisdesign
    Member

    even managed to make my "thank you" a link..!!

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

    cheers

  3. 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/

  4. sarahmorrisdesign
    Member

    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!!

  5. 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.

  6. sarahmorrisdesign
    Member

    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!

  7. sarahmorrisdesign
    Member

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

    http://sarahmorrisdesign.files.wordpress.com/2012/01/bubbleandblock.png

    Thank you

  8. 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;
    }
  9. sarahmorrisdesign
    Member

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

    Thank you again!!

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

  11. sarahmorrisdesign
    Member

    Ah brilliant! You star! Thank you!!

  12. 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;
    }
  13. sarahmorrisdesign
    Member

    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?

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

  15. sarahmorrisdesign
    Member

    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 !

  16. 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;
    }
  17. sarahmorrisdesign
    Member

    ah thank you so much that's perfect.

    Thank you for all your help on this!

  18. You are welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic