Changing the Header in a Theme and Inserting Images

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.

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.

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.

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

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.

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.

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 – https://www.celticconnections.info/blog/. I’d appreciate any help with this.
Cheers, Brendan

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: https://binarybonsai.com/kubrick/

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

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 https://www.celticconnnections.info). Thanks again. Brendan P.S. I’m not that familar with Photoshop so prefer to edit the code.

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.

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

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)

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

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