WordPress.org

Ready to get started?Download WordPress

Forums

Replacing header image with .html URL? (4 posts)

  1. eno876
    Member
    Posted 7 years ago #

    Replacing header image with .html URL?

    I am using a template that uses an image in the header. I wanted to replace this image with my own, so I created an image to replace it. Works fine. All I did was replace images/header-bg.jpg with my own. However, I wanted to add image maps that would link to other pages on my website.

    So what I did is I created a header-bg.html, uploaded to the main directory (not images file) and changed the below code to header-bg.html. But I found out I can't reference "background" to an .html extention. So what is another way of doing this?

    In the style.css file, this is the original code:

    /* header area */
    #header {
    background: #FFFFFF url(images/header-bg.jpg) no-repeat;
    height: 197px;
    border-bottom: 1px solid #c3c1bf;
    position: relative;
    }
    #headerimg {
    position: relative;
    padding: 30px 0px 0px 40px;
    height: 60px;
    }
    #headerimg .description{
    position: absolute;
    left: 110px;
    bottom: 3px;
    color: #c9eefe;
    font-size: 14px;
    }

  2. eno876
    Member
    Posted 7 years ago #

    Let me clarify - what I am trying to do is replace the .jpg image in the template header with my own header, which is .html. I assume I could modify the header.php file, which has this code in the body??

    <body>
    <div id="page">
    <div id="header">
    <div id="headerimg">
    <h1>/"><?php bloginfo('name'); ?></h1>
    <div class="description"><?php bloginfo('description'); ?></div>
    </div>
    <ul id="nav">
    <li class="page_item">/" title="Home">Home

  3. <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>

    </div>
    <!--/header -->

    If this is correct, what would I need to change?

    Or is there another file I need to modify?

  • eno876
    Member
    Posted 7 years ago #

    sorry for the various follow up posts but I can't find the edit button.

    What I want is to change the .jpg graphic displayed at the top of my blog at:
    http://www.enobytes.org/wine_blog/

    with this .html here:
    http://www.enobytes.org/wine_blog/wp-content/themes/glossyblue-13/header-bg.html

    The difference between the two is that the second one has image maps on the text and allows a user to click on them to get to other pages on my website.

    Any ideas on how I accomplish this?

  • moshu
    Member
    Posted 7 years ago #

    You are over-complicating it.
    For such a simple thing like that blue line with some text in it you don't need any image map. Do it in html/css.

  • Topic Closed

    This topic has been closed to new replies.

    About this Topic

    Tags