WordPress.org

Ready to get started?Download WordPress

Forums

How to add a new image to header (6 posts)

  1. EnnisP
    Member
    Posted 5 years ago #

    Hello,
    I am trying to add an image to the left side of the header in the Revolution Code Blue theme. You can see it here.

    What I have done so far is:

    Re-size and upload the image to themes/images as nashville.gif.

    Added the following line of code to the .headerleft section of the style.css file.

    background: url(images/nashville.gif) top left no-repeat;

    I also added the following code to the header.php file:

    <div class="headerleft">
    /"><img src="<?php bloginfo('template_url'); ?>/images/nashville.gif" alt="<?php bloginfo('name'); ?>" />
    </div>

    As you can see from the web page only an portion of the image shows and the blog title is very small.

    Can anyone help me sort this out?
    Ennis

  2. stvwlf
    Member
    Posted 5 years ago #

    Hi

    You have added the image twice, once in the HTML, once in the CSS as a background image. Also, your code in the HTML is incorrect, it is showing a <strong> and </strong> tag right in the middle of the URL

    My suggestion is remove the IMG tag from the HTML altogether, and let the CSS display the background image. The reason you are not seeing all of the image is you have to declare a height on headerleft, the same height as the image - 55px.
    add this line to the CSS for imageleft
    height: 55px;

    Now in the HTML in headerleft you can add the text you want displayed in that section - the name of your site, or whatever.

    something like this
    <h1><a href="http://nowthinkaboutit.com/">My Site's name</a></h1>

    Most likely you will need to style the CSS for H1 in the header. That will make the blog title larger. You may want your background image larger also, to match whatever size you make the text. If you make it wider, change the 55px to match the new image height.

  3. EnnisP
    Member
    Posted 5 years ago #

    Thanks stvwlf for your response. You are the first person to respond to any of my queries on this forum. I was actually quite surprised and the information you gave was VERY helpful. I can't thank you enough and I would be glad to pay for the info. My blog header is looking much better although I do need to tweek it a bit more as per the following two questions...

    One, the image is not adjacent to the left side of the header. Is there a way I can move it over and still keep the blog name centered in the image? In other words, I don't want to move the title over to the side also but would like to have it centered.

    And, two, I was hoping to move the blog name down over the dark (lower part) of the image so it would show up better. Is there a way to move it lower?

    If you can help me with these I will be most grateful.
    Ennis

  4. rizaldy
    Member
    Posted 5 years ago #

    i can't understand what you meant on question number one, are you try to put the image all the way to the left and keep the blog name in the center ?

    but on the second question find :

    #header h1 {
        color:#FFFFFF;
        font-family:Arial,Georgia,Trebuchet MS;
        font-size:36px;
        font-weight:normal;
        margin:0;
        padding:20px 0 0;
        text-decoration:none;

    }

    change padding:20px 0 0;
    change the 20px to either 35 or 40px
    on your style.css i think its on line 72

    hope it help :D
    -A-r-

  5. EnnisP
    Member
    Posted 5 years ago #

    Thanks Rizaldy,
    I made the change and like the placement of the title but now my tag line and the advert element (on the right side of the header) have dipped below the header boundary and out of sight. Is there anything I can do to correct this?

    http://nowthinkaboutit.com/

    Thanks,
    Ennis

  6. stvwlf
    Member
    Posted 5 years ago #

    Hi

    I added height: 110px; to .headerright {

    And also set #header p up like this below which brought your ad back. You may need more finessing
    take care...

    #header p {
      line-height:20px;
      margin:0 0 0 -50px;
      padding:0;
    }

Topic Closed

This topic has been closed to new replies.

About this Topic