Custom Header and Footer
One of my goals is to make themes with personalized design. Currently, only the Photo Frame theme allows certain extent of customization by changing the image in the photo frame. In my latest theme (Simple Style), you’ll be able to customize the whole header and part of the footer.
How to change the images for the Simple Style theme?
Step 1
Create your own header and footer images with the size as follows:
Header image size: 1280 x 400 px
Footer image size: 400 x 160 px
Step 2
Name the header and footer images as bg.jpg and bg_footer.jpg respectively.
Step 3
Upload the file to the /images folder.
To see how a theme using the same coding can look so differently, we have created a few samples.
|
Sample 1
Original Header Image
|
|
Sample 2
Original Header Image Header Look
Footer Look |
|
Sample 3
Original Header Image Actual Header Look |
Actual Footer Look 
|
Sample 4
Original Header Image Actual Header Look |
Actual Footer Look 
|
Sample 5
Original Header Image Actual Header Look |
Actual Footer Look 
Great! Your theme is exactly what I’m after, I think, esp. the option of customizing the header and footer. And I’ve read what you say about replacing the header (bg.jpg) with my own photos, but ——– this leaves me up in the air. Do I do this somewhere in the html, the stylesheet or theme e.g., or somewhere else? A step-by-step tutorial is what I need. I can format photos easily with my Adobe Photoshop, but now, how to get them where they need to be?
I’m using Simple Style, and WordPress 2.7.3. Ed
Ed, I have modified the post to include the step-by-step instruction of customizing the header and footer images. Please refer to the details above.
Hello!
Realy cool template! But it does’nt seem to work, though i followed the step by step guide.
bg_header is shown as it’s surposed to, but bg is not shown.
I must be doing something wrong? Can you help me, please?
Hi Jesper, please tell me your blog url
hi there, I would like to change the header to a swf. flash file. I know I have to change the style.css sheet but how do I do it? The file is called header.swf and I have placed it in the folder that the original image folder to make it easier! what code do I change and what do I change it to??
Thanks, hope you can help!!
Chris
Hi Brian,
I am WP newbie & starting develop a web using your theme (simplestyle theme). I have problem with “read more”. It didn’t show on my page.
I use WP 2.7.1. Below are what I did :
1. Add new post
2. Switch the editor to HTML view
3. Click button more to insert between words
4. Save and Upload
What step I missed?
Thank you,
What you did seem right. Can you send me the post URL so I’ll go take a look?
Hi Brian,
the web site : http://whatiserp.net/
btw, I just get the solution but have not tried yet to that web site.
I’ll try it first and let inform you if I get the problem.
thank you.
Samuel
YAY!! After days of searching for exactly the right theme for my Elvis blog, I finally found it here and it was so easy to do too! Now my blog has a perfect Elvis theme because I was able to use my own picture library and I’m thrilled.
Thank you so much. I am seriously considering changing all my other blog themes to this one as well.
Sensational theme!
Excuse me, may i know where should i upload my picture before i can set it as header image? U all said “/images folder.” but i don’t know where is it… can anyone tell me the steps to change a header image?
i am using “japan-style” theme…
@Jack, extract the theme zip file and you should see the /images folder.