Adding a custom header image after you’ve modified the CSS

  • Unknown's avatar
    bjensen · Member ·

    Hi – rookie here… I purchased the upgrade, wanted to change some colors, etc… which went fine. But now I want to re-add the custom header image I designed to the top of the page, and I can’t figure how to do that. Rather than just post here first, I looked around a bit, but could find nothing that gave me the clue, so now I’m asking. How can I get my image up there rather than a blank block?

    Help please. :)

  • Unknown's avatar
    raincoaster · Member ·

    You can’t use the regular upload function once you’ve got the CSS upgrade. You need to poke around in the code and find the URL of the header image up near the top and replace it with the URL of the uploaded image, cropped to size already and pre-uploaded.

  • Unknown's avatar
    bjensen · Member ·

    Since I uploaded my image to wordpress once already, am I going to find its URL there (if so, where), or do I have to do something else? and THANKS.

  • Unknown's avatar
    timethief · Member ·

    The url will be found here -> Manage -> Uploads

  • Unknown's avatar
    bjensen · Member ·

    AWESOME… now to find the spot in the CSS code to drop that URL… any hints on where to do that, along with the syntax?

    THANKS

  • Unknown's avatar
    bjensen · Member ·

    I presume it goes in here somewhere… help on exactly where??

    #header {
    border-bottom:1px black solid;
    height:140px;
    width:100%;
    background-color:#73a0c5;
    margin:0 auto;
    padding:0;

  • Unknown's avatar
    raincoaster · Member ·

    The theme you’ve chosen has no image in the header, so you can’t just swap out one image for another; my mistake. Unfortunately, as I’m a beginner on this, that’s all the help I can give. Hopefully someone with better skills will be along soon.

  • Unknown's avatar
    bjensen · Member ·

    bingo – found it – thanks for the help… cut and paste is a fantastic thing!!

    :)

  • Unknown's avatar
    trent · Member ·

    *Make sure you only try this in the CSS preview with saving your current CSS first*

    Just a stab in the dark, but create an image that you want to be 140 pixels high and around 800 pixels wide and upload it to your blog through the “create post” image upload interface. I say 800 pixels because that is as wide as other themes go when the width is 100% as per the CSS. This code I am about to provide will just have the image repeat itself is someone is browsing wider than 800 pixels and show a percentage if they are viewing at less than 800 pixels. After playing with it, it will make more sense.

    #header {
border-bottom:1px black solid;
height:140px;
width:100%;
background:#73a0c5 url('http://URL-to-your-picture-whatever.jpg') top left repeat-x;
margin:0 auto;
padding:0;

    Like I said, just replace the URL with your actual image upload and try it in the preview first as I am not sure if this will actually work, but think it will! Play at your own risk!

    Trent

  • Unknown's avatar
    bjensen · Member ·

    Thanks Trent… the spot for it is actually about halfway through the CCS code… there is actually a spot for “headerimg”… and there was a URL for an older image, I just replaced the URL with my new URL, and presto-change-o…

    thanks again.

  • Unknown's avatar
    humboldtherald · Member ·

    Thanks, bjensen. This was driving me nuts!

  • The topic ‘Adding a custom header image after you’ve modified the CSS’ is closed to new replies.