WordPress.org

Ready to get started?Download WordPress

Forums

Putting A New Header Image On A Theme Template (17 posts)

  1. CJField
    Member
    Posted 9 years ago #

    I'm trying to take this theme: (almost spring: http://www.alexking.org/software/wordpress/themes/blog/) and put a header on it.

    However, I can get the EMPTY space to show up, but not the image, as you can see here: http://www.thismomslife.com.

    How do I get the image to show up? I've tried using the following coding:

    #header {
    url=http://www.thismomslife.com/images/ThisMomsLife1.gif
    width: 752px;
    height: 217px;
    margin: 0 auto;
    padding: 0;
    border-top: 0px solid #7f7157;
    border-right: 0px solid #7f7157;
    border-left: 0px solid #7f7157;
    padding: 30px 0 0 0;
    background-color: #F5F5E7;
    border-bottom: 10px solid #9BBB38;
    }

    AND

    #header {
    url(imagses/ThisMomsLife1.gif)
    width: 752px;
    height: 217px;
    margin: 0 auto;
    padding: 0;
    border-top: 0px solid #7f7157;
    border-right: 0px solid #7f7157;
    border-left: 0px solid #7f7157;
    padding: 30px 0 0 0;
    background-color: #F5F5E7;
    border-bottom: 10px solid #9BBB38;
    }

    Neither works.

    I've also tried putting in this coding with it, but it still doesn't work:

    }
    #hmenu {
    margin: 2px 5px 0 0;
    text-transform:lowercase;
    text-align: right;
    float: right;
    width: 475px;
    }
    #masthead {
    background: url(images/ThisMomsLife1.jpg);
    width: 752px;
    height: 217px;
    margin: 0 auto;
    padding: 0;
    border-top: 0px solid #7f7157;
    border-right: 1px solid #7f7157;
    border-bottom: 1px solid #7f7157;
    border-left: 1px solid #7f7157;
    }

    Any suggestions?

  2. Hi! I recognize you. :) For the header image, it should be:

    background: url('images/masthead.jpg');

    You have just the url part in one example, and you missed the single quotes. Need any more help, you know where I am. :)

  3. CJField
    Member
    Posted 9 years ago #

    Hi! I need lots of help with this stuff, I'm a newbie! I never would have gotten upgraded if it weren't for these forums, you all are LIFE SAVERS!!

    Ok, so this is what I have now, and it's still not showing up:

    }
    #header {
    background: url('images/masthead.jpg')
    width: 752px;
    height: 217px;
    margin: 0 auto;
    padding: 0;
    border-top: 0px solid #7f7157;
    border-right: 0px solid #7f7157;
    border-left: 0px solid #7f7157;
    padding: 30px 0 0 0;
    background-color: #F5F5E7;
    border-bottom: 10px solid #9BBB38;
    }

    }
    #hmenu {
    margin: 2px 5px 0 0;
    text-transform:lowercase;
    text-align: right;
    float: right;
    width: 475px;
    }
    #masthead {
    background: url(images/ThisMomsLife1.jpg);
    width: 752px;
    height: 217px;
    margin: 0 auto;
    padding: 0;
    border-top: 0px solid #7f7157;
    border-right: 1px solid #7f7157;
    border-bottom: 1px solid #7f7157;
    border-left: 1px solid #7f7157;
    }

    /* Header Styles */
    #header h1 {
    margin: 0;
    font-size: 1.8em;
    }
    #header h1 a {
    text-decoration: none;
    color: #80904F;
    }

  4. Root
    Member
    Posted 9 years ago #

    CJ: For fixing up headers any type of padding or borders is absolutely fatal Clear em out would be my advice.

  5. CJField
    Member
    Posted 9 years ago #

    I took out all the padding and borders, now I have a WHITE box, so I'm making progress, now I just need to get the image to show up!

  6. Root
    Member
    Posted 9 years ago #

    There is no semi colon after the background rule url in #header.And check img is set to border: 0;

  7. CJField
    Member
    Posted 9 years ago #

    I didn't understand if you were saying I needed to change the colon after background to a semi-colon, or if I needed to put NOTHING after the background rule. I tried both and it still isn't showing up.

  8. Change both the masthead and header to this:

    background: url('images/ThisMomsLife1.jpg');

    (Sorry, my earlier example had the wrong image.)

  9. Root
    Member
    Posted 9 years ago #

    This is what you posted above
    #header {
    background: url('images/masthead.jpg')

    No semi colon after the closing bracket.

  10. CJField
    Member
    Posted 9 years ago #

    Ok, folks, here's what we have now, and no image:

    #header {
    background: url('images/ThisMomsLife1.jpg');
    width: 752px;
    height: 217px;
    margin: 0 auto;
    border-bottom: 10px solid #9BBB38;
    }

    }
    #hmenu {
    margin: 2px 5px 0 0;
    text-transform:lowercase;
    text-align: right;
    float: right;
    width: 475px;
    }
    #masthead {
    background: url(images/ThisMomsLife1.jpg);
    width: 752px;
    height: 217px;
    border-bottom: none;
    border-top: none;
    margin: 0 auto;
    }

    /* Header Styles */
    #header h1 {
    margin: 0;
    font-size: 1.8em;
    }
    #header h1 a {
    text-decoration: none;
    color: #80904F;
    }

  11. CJField
    Member
    Posted 9 years ago #

    Ok, it would help if I made the image a gif file!

    It's up!

    Once again, thank you all! I really appreciate how hard you all work at this! You're like CSI for WP!!!

  12. The masthead img url still has no single quotes around it.
    You have:
    #masthead {
    background: url(images/ThisMomsLife1.jpg);
    It needs to be:
    #masthead {
    background: url('images/ThisMomsLife1.jpg');

  13. HA! :) Whoo hoo!

  14. Root
    Member
    Posted 9 years ago #

    And a border bottom of 10px.

  15. CJField
    Member
    Posted 9 years ago #

    Thank you all, truly!!! It looks WONDERFUL!! Ya'll save me from SOO much aggravation!

  16. Root
    Member
    Posted 9 years ago #

    Well are we going to get see it ? Sorry just sen the url.

  17. Root
    Member
    Posted 9 years ago #

    The only thing left is that WP users expect the header to be the home link. Or being simple folks we get confused :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.