WordPress.org

Ready to get started?Download WordPress

Forums

PinBlack
Header Image, how? (8 posts)

  1. bigreddog
    Member
    Posted 1 year ago #

    I would like to replace the search bar with a background image to take up the right hand side of the header. What is the best way of doing this?

    Thanks!

    Cliff.

  2. janeguild
    Member
    Posted 1 year ago #

    I did this in probably a very messy (but works) kind of way just today.

    Put in a Site Title (it shows in your browser tab) under the theme Options. If you don't do this, none of it works.

    Either change the style.css (or your child theme style.css if you're doing that) like this:

    #site-title {
    padding:5px 0;
    margin-left:-400px;
    margin-right:auto;
    border:0;
    height:110px;
    background:url(library/images/header5.gif);
    background-repeat:no-repeat;
    background-position:center;

    The margin-left pushes your title off the screen (you may have to up the number if it leaks back on), and the background will obviously be your own image.

    I think that's all I did. If it doesn't work I can look closer :)

    HTH!

  3. janeguild
    Member
    Posted 1 year ago #

    Oh, and you'd want

    background-position:right

    Yeah...

  4. WPThemes.co.nz
    Member
    Posted 1 year ago #

    you could open up the header.php file and look for the code that looks like this:

    <?php get_search_form(); ?>

    change it to your image:

    <img src="http://yoursite.com/image.jpg" alt="" class="banner-image"/>

    NOTE: best practice way is to do your theme modifications via a child theme. This makes it so that any updates to the theme does not overwrite the changes you've made to the theme. Here are a couple resources for making child themes:

    http://wp.tutsplus.com/tutorials/theme-development/child-themes-basics-and-creating-child-themes-in-wordpress/
    http://codex.wordpress.org/Child_Themes

  5. Just to re-enforce that suggestion, you really want to use a child theme as wpthemesnz said. Editing the original theme will cause you greif down the road.

  6. graphicdesignlady
    Member
    Posted 1 year ago #

    Hi wpthemesnz,

    I have followed your advice but the image is now going below the menu! How can I bring it back up please.

    Thank you.

  7. WPThemes.co.nz
    Member
    Posted 1 year ago #

    oops.. forgot it was absolutely positioned. add the following custom css:

    img.banner-image{ position: absolute; right: 30px; top: 22px; }

    adjust the top and right values as you see fit.

  8. graphicdesignlady
    Member
    Posted 1 year ago #

    Hi,

    For me the above methods did not work.. I have an image as my log on the left side and managed to add another image where the search box was on the right side by adding another DIV in the header section and customizing css and it shows fine on my computer.

    The problem I have is that on iphone the left side logo is not responsive and only partially shown..also the right side logo overlaps the main logo instead of showing below it.

    Can you please tell me how to fix it.

    thanks.

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags