Changing Wordpress Header

Discussion in 'WordPress' started by Kel, Jan 31, 2007.

  1. #1
    Ive just started using wordpress and I cant figure out how to change the header. Ive read all through the actual wordpress site and im still stuck.

    Ive had a try and if you look up the top of the page when its loading it looks like its going to come up and then decides not to lol.

    Any help would be great! :)
     
    Kel, Jan 31, 2007 IP
  2. mynewchoice

    mynewchoice Peon

    Messages:
    81
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Kel,

    When you log into your WP admin, you should see a section titled "Presentation" in the links across the top bar. Once you click that link, the bar below that will change with a link for "Theme Editor".

    Click that link and it will open the page with a text editing area and a list of documents/files on the right side. One of those files should be for your header. Click the link for your header file and you will be able to edit the code for your header.

    What exactly are you trying to change?

    -mnc
     
    mynewchoice, Jan 31, 2007 IP
  3. JEET

    JEET Notable Member

    Messages:
    3,832
    Likes Received:
    502
    Best Answers:
    19
    Trophy Points:
    265
    #3
    Try this:
    Open your header.php in notepad etc.
    Change:
    src="banner.jpg" to:
    src="<?php bloginfo('stylesheet_directory'); ?>/images/banner.jpg"

    I think that will do it...
    Bye :)
     
    JEET, Jan 31, 2007 IP
  4. Kel

    Kel Well-Known Member

    Messages:
    1,612
    Likes Received:
    86
    Best Answers:
    0
    Trophy Points:
    185
    #4
    I tried but its still doing the same thing. I dont actually have an images directory though, all the files and pictures are in the theme directory. Should I have one? :confused:
     
    Kel, Jan 31, 2007 IP
  5. JEET

    JEET Notable Member

    Messages:
    3,832
    Likes Received:
    502
    Best Answers:
    19
    Trophy Points:
    265
    #5
    Try moving the pictures to your root folder...
    src="banner.jpg" when on homepage means it's looking for the banner.jpg in the root folder.
    Having pictures in seperate directories is just a little easier to manage uploads with ftp etc.
    Bye :)
     
    JEET, Jan 31, 2007 IP
  6. mynewchoice

    mynewchoice Peon

    Messages:
    81
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Another option could be to simply define a DIV in your header and then apply a background image within your CSS.

    -mnc
     
    mynewchoice, Jan 31, 2007 IP
  7. Kel

    Kel Well-Known Member

    Messages:
    1,612
    Likes Received:
    86
    Best Answers:
    0
    Trophy Points:
    185
    #7
    Is it hard to do? Im only new to html and it all just looks so complicated lol :)
     
    Kel, Jan 31, 2007 IP
  8. mynewchoice

    mynewchoice Peon

    Messages:
    81
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Not really, I will try to walk you through the process. In your header code, you would want a DIV tag (ideally) where you would like to display your header image. Looking at your site, you already have a DIV for the header, so you could use that if you want or place another DIV within that.

    Then in your CSS file, you would add the following:

    background: #fff url(img/imagename.jpg) no-repeat;
    Code (markup):
    In this case, the "img" directory is a subdirectory of my theme and I keep all of the images within the particular theme directory. Here is a good reference for more information on setting the background properties with CSS:

    W3Schools Background Properties

    -mnc
     
    mynewchoice, Jan 31, 2007 IP
    Kel likes this.
  9. Kel

    Kel Well-Known Member

    Messages:
    1,612
    Likes Received:
    86
    Best Answers:
    0
    Trophy Points:
    185
    #9
    Oh your a gem!

    Ive got it up I just need to make it fit now! I was ready to give up lol :)

     
    Kel, Jan 31, 2007 IP
  10. mynewchoice

    mynewchoice Peon

    Messages:
    81
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #10
    Glad to see you are close to getting it completed! You might need to adjust the size of your header DIV, which can also be done via the CSS. In addition, you might be interested to set the margin/padding on the background image to 0 so it sits flush in that area.

    Glad to be of assistance!

    -mnc
     
    mynewchoice, Jan 31, 2007 IP
  11. Kel

    Kel Well-Known Member

    Messages:
    1,612
    Likes Received:
    86
    Best Answers:
    0
    Trophy Points:
    185
    #11
    The padding is already 0. How exactly do I change the size of the div? :confused:

    Off Topic: Nice bead link in your sig. I used to make bead jewellery for hours on end! :)
     
    Kel, Jan 31, 2007 IP
  12. mynewchoice

    mynewchoice Peon

    Messages:
    81
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #12
    In the CSS where you are defining the style for your header, simply add the following:

    height: 200px; (you'll have to play with the height depending on what you need)
    Code (markup):
    Thanks for the comment on the bead link, that is something I am in the process of putting together right now.

    -mnc
     
    mynewchoice, Jan 31, 2007 IP