WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Replace Header w/ Graphic (5 posts)

  1. houseofstirfry
    Member
    Posted 6 years ago #

    Started out with RockinWeb2.0 and have made several changes to suit my needs. My code experience is limited to some basic html so I have been using the trial and error approach to editing the style.css and header.php files.

    I would now like to replace the header(s) with a .png image that I've uploaded into /images. I've been through countless posts here and tried many, many suggested changes but none of them have worked for me.

    If someone would be willing to look at my code and advise me on the needed changes I would be very grateful.

    The website is houseofstirfry.com/chia/blog
    This is the part of the style.css that deal with the headers:
    #header {
    color: #000000;
    background: #ffcc66;
    font-family: Helvetica, Arial, Sans-Serif;
    font-weight: bold;
    text-transform: none;
    text-align: center;
    margin: 0px auto 0px;
    padding: 0px 0px 0px 0px;
    }
    #header h2 {
    color: #000000;
    font-size: 40px;
    margin: 0px;
    }

    #header h2 a {
    color: #000000;
    text-decoration: none;
    }

    #header h2 a:hover {
    color: #3399ff;
    text-decoration: none;
    }

    #header h3 {
    color: #cccccc;
    font-size: 16px;
    font-weight: bold;
    margin: 0px;
    text-transform: uppercase;
    }

    This is the header.php info (replaced "<" with "["):
    [div id="header"]
    [HR COLOR="#ffffff" SIZE="8"]
    [HR COLOR="#0099ff" SIZE="2"]
    [HR COLOR="#ffffff" SIZE="2"]
    [HR COLOR="#ff9900" SIZE="4"]
    [HR COLOR="#ffffff" SIZE="2"]
    [HR COLOR="#009933" SIZE="2"]
    [HR COLOR="#ffcc66" SIZE="6"]
    [!--the blog title--]
    [h2][a href="[?php echo get_settings('home'); ?]/"][?php bloginfo('name');

    ?][/a][/h2]
    [h3][?php bloginfo('description'); ?][/h3]

    [HR COLOR="#ffcc66" SIZE="10"]
    [HR COLOR="#0099ff" SIZE="2"]
    [HR COLOR="#ffffff" SIZE="2"]
    [HR COLOR="#ff9900" SIZE="4"]
    [HR COLOR="#ffffff" SIZE="2"]
    [HR COLOR="#009933" SIZE="2"]
    [HR COLOR="#ffffff" SIZE="2"]
    [/div]

  2. houseofstirfry
    Member
    Posted 6 years ago #

    I've been playing with this late into the night and again this morning. I've figured out how to simplify it into one header component rather than the 3 I started with. Since I don't want the blog name and description to show up I figured one was the way to go. I made these changes in style.css and header.php. I got rid of the color from style.css and all the color lines in header.php. That leaves me with a totally blank header. I keep rereading the article on headers and trying to add code that will display my image but it isn't working out. I keep getting confused if I'm suppose to be adding that to the style.css or the header.php. It seems like it should be so easy like in html, a simple "img src=" would put it wherever I wanted it. I'm starting to feel like the old dog who can't learn a new trick. I'm frustrated for now so I've put back the original code as shown above. I'll try this again later and keep my fingers crossed that a kind soul will wander by and lend a hand.

  3. RBMidknight
    Member
    Posted 6 years ago #

    if you haven't gotten it yet, try using this:

    #header {
    	background: url('images/mybanner.png') no-repeat center;
            height: 180px;
    	margin: 0px auto 0px;
    	padding: 0px 0px 0px 0px;
    	}
  4. omgitztrey
    Member
    Posted 6 years ago #

    you know where it says

    [HR COLOR="#ffffff" SIZE="8"]
    [HR COLOR="#0099ff" SIZE="2"]
    [HR COLOR="#ffffff" SIZE="2"]
    [HR COLOR="#ff9900" SIZE="4"]
    [HR COLOR="#ffffff" SIZE="2"]
    [HR COLOR="#009933" SIZE="2"]
    [HR COLOR="#ffcc66" SIZE="6"]
    [!--the blog title--]
    [h2][a href="[?php echo get_settings('home'); ?]/"][?php bloginfo('name');

    ?][/a][/h2]
    [h3][?php bloginfo('description'); ?][/h3]

    [HR COLOR="#ffcc66" SIZE="10"]
    [HR COLOR="#0099ff" SIZE="2"]
    [HR COLOR="#ffffff" SIZE="2"]
    [HR COLOR="#ff9900" SIZE="4"]
    [HR COLOR="#ffffff" SIZE="2"]
    [HR COLOR="#009933" SIZE="2"]
    [HR COLOR="#ffffff" SIZE="2"]

    that's where you will take that section out and use the code above

  5. houseofstirfry
    Member
    Posted 6 years ago #

    I got it up and my only problem now is that I need to make my banner wider. Thanks so much for your help.

    I used the code provided by RBMidknight but did not follow the advise from omgitztrey. Well, actually I did but when it didn't work I figured out the probem... the location the second posted sited was in my "header.php" and the code went into my "style.css". The code quoted by the second poster all needed to be removed though. Between the two messages I found success.

    THANK YOU!

Topic Closed

This topic has been closed to new replies.

About this Topic