Need help? Check out our Support site, then


How to insert custom header in Nishita theme

  1. I've created a 1024 x 200 image for use as a new header in the Nishita theme.

    I've gone into the CSS (I have very little experience with CSS) and have modified the header code as follows, after uploading the new graphic to my Media Library and copying the URL:

    #header-image img {
    display: block;
    background: url('http://samlowephoto.files.wordpress.com/2013/02/samloweblog-header31.jpg');
    height: 200px;
    max-width: 1024px;
    width: 100%;
    }

    But...I'm not seeing my graphic...or any header at all.

    Help?

    Sam

    The blog I need help with is samlowephoto.wordpress.com.

  2. thesacredpath
    Staff

    If you have not yet made any changes to the CSS, delete all the original CSS you have pasted into the editor window. At wordpress.com, that can end up messing things up for you. At wordpress.com, what you want to do is to put only the specific selectors and the specific declarations you are adding or changing into the CSS edit window and then your changes will override the existing CSS.

    If you have made changes already, leave everything in there and then paste this at the bottom of all the CSS and then replace URL OF IMAGE between the double quote marks with the URL of your header image.

    #title {
        background: url("URL OF IMAGE") no-repeat scroll 0 0 transparent;
        clear: both;
        height: 200px;
    }
  3. Dear thesacredpath,

    Thank you very, very much. Thanks to you, it's much improved. I still have one little tweak that I can't figure out...

    If you view the blog after I made your suggested adjustment, and then attempted a further mod on my own, you'll see a white area to the right of my header that I'm trying to eliminate.

    After applying your suggestion, the header had white on either side; I was able only to successfully flush the graphic against the left side.

    Can you suggest an improvement here, as well?

    Thank you for your help.

    Sam

  4. The header image URL you used in your example points to an image that is 1024 x 200 pixels:
    http://samlowephoto.files.wordpress.com/2013/02/samloweblog-header31.jpg

    But the header area in your theme is 1056 pixels wide (if you count the parts that are currently white margins).

    If you move the background rule to a selector of #header instead of #title, you can make it take up the whole 1056 pixels. To do it, you need to create a new header image that is wide enough since your current one is 1024 pixels and that's too small to fill up the space. Also, saving your header image as a GIF file will probably look nicer at a smaller file size since the image is mostly geometric shapes.

    Here is some CSS you can try out once you've uploaded a 1056 pixel wide image to your media library:

    #header {
    	background: white url('YOUR_IMAGE_URL') no-repeat;
    	height: 233px;
    	position: relative;
    }
    #header-inner {
    	bottom: 0;
    	position: absolute;
    }

    Replace YOUR_IMAGE_URL with your new image URL.

  5. Dear designsimply,

    You rock.

    Thank you for helping this non-CSS blogger create a cleaner, less-deep header. Much, much appreciated.

  6. Right on!

    The new header image looks much nicer. :)

Topic Closed

This topic has been closed to new replies.

About this Topic