WordPress.org

Ready to get started?Download WordPress

Forums

Changing the Header in a Theme and Inserting Images (23 posts)

  1. dthomasmaddox
    Member
    Posted 9 years ago #

    I'm using WordPress 1.5, and I'd love to be able to change some of the fundamental parts of a given theme, such as the background color of any part of a page, but *especially* I'd love to insert or remove images into my main page header. Some themes I'd love to use if I could remove the accompanying photo or if I could insert my own. But I can't figure it out. This whole PHP thing has got me bollixed; I've maintained pretty complicated websites with Dreamweaver, but this -- ai yi.

    Can anyone help me with this fairly obvious and probably somewhat dopey issue?

    Thanks,

    Tom

  2. Marc
    Member
    Posted 9 years ago #

    If your are useing the default "Kubrick" theme look in the header.php file you will find this:

    /* To ease the insertion of a personal header image, I have done it in such a way, that you simply drop in an image called 'personalheader.jpg' into your /images/ directory. Dimensions should be at least 760px x 200px. Anything above that will get cropped off of the image. */

    It done't get easier than that.

  3. dthomasmaddox
    Member
    Posted 9 years ago #

    Thanks for the tip about Kubrick. A couple of questions (no good deed goes unpunished): where can I find this and similar tips (I take it this one is a comment to be found somewhere within the theme's files)? and do you have any help with the more general question of modifying colors, &c.?

    Again, thanks.

  4. vkaryl
    Member
    Posted 9 years ago #

    That comment resides in the header.php file in the "default" folder under wp-content folder.

    Colors one generally tweaks in the CSS file, style.css. Ditto font sizes, type, weight, other typography details.

    Sometimes a graphic will be called by a line in the style.css elements. You can find these by searching the file for "url( " [don't use the double quotes when doing the search] which will find the beginning part of that element. Then you can replace the graphic called there by your own. You'd have to make sure your graphic was the same size in pixels as the one it's replacing.

  5. dthomasmaddox
    Member
    Posted 9 years ago #

    Ah yes, and one more thing. That tip works for Kubrick, but what about others, such as Batavia?

  6. Jinsan
    Member
    Posted 9 years ago #

    Kubrick is ...... a little different when it comes to design. The other themes should follow the form 99% of hte time where you change the header via style.css and not through the php files. the latter is the way it should be.

  7. chuckblue
    Member
    Posted 9 years ago #

    For substituting header images, I use irfanview to find out the size of the theme's original pic.

    Then I either load the new header pic in irfanview, cut/crop to the same size, or use ctrl-r and resize it to the same height and width.

    save it in a sub-folder on my home computer hard drive, with the filename of the original file.

    upload via ftp to over write the old header file.

    keep a copy of the old header pic on my home computer in case I want to go back to it.

    Use a browser to check my blog site.

  8. BrendanTeeling
    Member
    Posted 9 years ago #

    I've followed the instructions in the header.php and dropped a file called personalheader.jpg into the images folder. But I now see no header at all - http://www.celticconnections.info/blog/. I'd appreciate any help with this.
    Cheers, Brendan

  9. If you have Photoshop, it may be easier for you to just add your header image to the Photoshop template and export the slices. To get the Photoshop template, you'll have to download Kubrick v1.2.6 from here: http://binarybonsai.com/kubrick/

  10. moshu
    Member
    Posted 9 years ago #

    Brendan,
    You have to uncomment i.e. remove the /*...*/ around the line that calss for your header image! Check your header.php.

  11. BrendanTeeling
    Member
    Posted 9 years ago #

    Many thanks for the suggestions - I removed the /* ... */ (never seen php before I'm afraid!) and see the image now alright. It's still not 100% correct (it should look like it does on http://www.celticconnnections.info). Thanks again. Brendan P.S. I'm not that familar with Photoshop so prefer to edit the code.

  12. moshu
    Member
    Posted 9 years ago #

    Actually the /*...*/ is a CSS comment method, not PHP :)
    If you want a smaller image, resize your original image.
    You may want to delete the header text, since it's overlapping the image.

  13. BrendanTeeling
    Member
    Posted 9 years ago #

    Thanks Moshu - it's a crash course in CSS for me (we just changed our two sites to CSS so it's timely)! I do need to delete the header text alright ... as soon as I find it.
    Cheers,
    Brendan

  14. Brendan, to delete the header text, open style.css and "find the first entries you can find for H1 and .description. Now add display: none; to the values in there. The reason for doing it this way, and not by simply deleting the code in index.php, is that this way around, it will degrade gracefully if an old browser happens to drop by." ~ Michael Heilemann (original Kubrick dev)

  15. BrendanTeeling
    Member
    Posted 9 years ago #

    Many thanks Michael (and thanks for developing Kubrick in the first place). I've added in the value but there's still something wrong with how the image displays - there's something displaying behind it. I know this 'something' has a http: link to the site's url but I can't find it in the code. Cheers, Brendan

  16. saswat
    Member
    Posted 9 years ago #

    Most tips work for Kubrick, but what about others, such as Batavia?
    I want to edit the header. Anyone can help? Thanks.

  17. 2notch
    Member
    Posted 9 years ago #

    Inserting a header image in Batavia isn't too hard and can be done by editing the styles.css file in the "wp-content/themes/Batavia/" folder.

    First - design your image to be 760px wide by 108px tall and ftp it to your "wp-content/themes/Batavia/" folder.

    Second - open the styles.css file (in the "wp-content/themes/Batavia/" folder) in an editor and find this:
    #header {
    margin: auto;
    WIDTH: 100%;
    HEIGHT: 108px;
    BACKGROUND-COLOR: #CCCC99;
    COLOR: #7D5B38;
    }

    Under the line BACKGROUND-COLOR add:
    BACKGROUND: url("headerimage.jpg");

    ("headerimage.jpg" will be whatever you named your image)

    Remember that the toolbars will be overlaying the image so design a graphic that lets them be seen.

    Hopefully I haven't forgotten anything and this will get you going in the right direction.

  18. s3pt1k
    Member
    Posted 9 years ago #

    Silly me. Uncommented the line and still, no worky. Someone please look at http://www.the-fergusons.net and see where I'm off? I know I've uncommented the line, and the image is there (both in the root and theme /images directory).

  19. snaerff
    Member
    Posted 9 years ago #

    Hi s3pt1k,
    Your problem is that you don't have the # in front of your headerimg line. Just insert that and you should be fine.

  20. s3pt1k
    Member
    Posted 9 years ago #

    Gosh! Thanks. :)

  21. mequodallie
    Member
    Posted 9 years ago #

    �s3pt1k�What browser are you using to view your site?

  22. s3pt1k
    Member
    Posted 9 years ago #

    Safari 2.0

  23. dwoodrow
    Member
    Posted 8 years ago #

    Hi all. I too am having the same problem. I am using the Kubrick default. I have done the following 1) Created my own header jpg and loaded it into the Default template /images/ folder, 2) Edited header.php and removed the /* and */ comment delimiters around the statement: #headerimg { background: url('<?php bloginfo('stylesheet_directory'); ?>/images/personalheader.jpg') no-repeat top;}, 3) cleared my cache to be sure I wasn't loading the old page.

    I am still seeing the original blue banner. Do I need to do something to the CSS file as well? Are there other parts of the file that need to be commented or un-commented? Thanks for any advice on this.

Topic Closed

This topic has been closed to new replies.

About this Topic