changing the header graphic

  • jenszing

    (@jenszing)


    16 years ago

    Im new to wordpress. I dont know any html coding. I looked through the forum posts and couldnt find exactly what i am looking for. I am using the theme “elements of SEO”. Part of the reason for my selection was its ability to “easily customize the header”
    I have read the information on the codex- while it doesnt exactly match my template I think i basically understand how to do it. However, so far I have not been successful in switching the graphic. What i have managed to do is remove the existing one. These are the steps I have taken so far:
    1. Resized the new image to match the size of the existing image(the one I want to replace) in the image directory. Resized it to 960×134 px
    2. Uploaded the new image to the image directory -named it banner4. There were already 3 existing banner images named 1-3 respectively which I could switch through and have them appear on the banner header.
    3. logged into blog-design-theme editor
    4. in the style sheet I added my new graphic:
    #banner { background: url(“images/banner.jpg”) no-repeat; height:134px; }

    #banner1 { background: url(“images/banner1.jpg”) no-repeat; height:134px; }

    #banner2 { background: url(“images/banner2.jpg”) no-repeat; height:134px; }

    #banner4 { background: url(“images/banner4.jpg”) no-repeat; height: 134px; }

    5.went to the theme files of “myheader.php”, “myheader1.php”, and “header.php” and inserted the words “banner4” replacing the words “banner1”

    By doing all of the above steps I succeeded in removing the original banner1 from the template but the banner that I added did not appear.
    I have no idea what went wrong.
    I did notice the following phrase in the style sheet and was wondering if i should modify it in some way in order to make the new graphic appear:

    #masthead { width: 960px; /*height: 100px; background: url(‘images/logo.gif’) no-repeat;*/ /* uncomment the height and background declarations here if you intend to use a graphic in the header instead of the h1 */ }

    /* #masthead a { display: block; width: 770px; height: 100px; } */ /* uncomment this line if you use a graphic in the header – make sure the height of your header graphic is equal to the height declared in this line of code! */

    Any help would be greatly appreciated

Viewing 5 replies - 1 through 5 (of 5 total)
  • Len

    (@lenk)

    Okay, you’ve swapped this for that but I’m a little confused as to what you exactly did.

    This is an interesting theme in that it utilizes 3 different header graphics – one for index.php, another for archive.php and yet another for page.php

    If you open up page.php (which is the template your theme uses for displaying Pages) you will see this at the top –>

    <?php include (TEMPLATEPATH . '/myheader1.php'); ?>

    Instead of calling header.php it is calling myheader1.php So let’s take a look at myheader1.php. If we open up THAT file we see this –>

    <div id="banner2" onclick="location.href='<?php echo get_settings('home'); ?>';" style="cursor: pointer;"></div>

    It is using the DIV –> banner2
    So we now go to the style sheet where we see this…
    #banner2 { background: url("images/banner2.jpg") no-repeat; height:134px; }

    The DIV banner2 uses this graphic –> images/banner2.jpg

    Putting this together, let’s assume you want to change the graphic displayed on Pages. (page.php) You don’t have to be renaming DIVs. All you need to do is change the call to the image in the style sheet.

    1. Upload you new image to the theme’s image folder – let’s call it newbanner.jpg for simplicity
    2. I already explained how page.php calls myheader1.php
    3. myheader1.php contains the DIV “banner2”
    4. In the style sheet look for…

    #banner2 { background: url("images/banner2.jpg") no-repeat; height:134px; }

    …and change it to…

    #banner2 { background: url("images/newbanner.jpg") no-repeat; height:134px; }

    Thread Starter jenszing

    (@jenszing)

    Thank you very much for this. I will study this carefully and try to resolve my problem.

    Thread Starter jenszing

    (@jenszing)

    LenK,

    Your directions were very clear. To make sure I understood them I followed your instructions and was able to successfully interchange the existing banners that were already installed on the site. But when I put the “newbanner.jpg” in the designated line of the style sheet I once again lost the entire banner graphic it was blank.
    I went back to the file manager and verified that my new graphic was uploaded in to the themes image folder and was identical in size to the existing banner graphics preloaded onto the site.
    I then went back to the design section of the dashboard and reactivated the theme thinking that perhaps it had not picked up the new image and then went through all the steps again and still nothing.

    Any additional advice would be greatly appreciated!

    Once again I really appreciate your time for helping me. Even if I dont get this resolved I at least have a better understanding of how it works and can perhaps start locating the problem.

    Len

    (@lenk)

    Hi jenszing,

    It’s difficult to troubleshoot from here especially without a link to your site. If you want you can zip your theme and send it to me –>
    len [AT] riteturnonly [DOT] com

    Include the appropriate images in the images folder and a brief explanation of what you want.

    Thread Starter jenszing

    (@jenszing)

    hello lenk,
    Thank you for your willingness to help me it is very much appreciated but I actually finally solved it!
    You were exactly righ but I had a typo in my new banner extension, i used “jpeg” instead of “jpg” and I didnt notice it for 2 days! urghh!
    Thanks again for all your help, As a newbie this can be such a frustrating experience and to have a place to turn to get me out of trouble is very reassuring.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘changing the header graphic’ is closed to new replies.