How to Edit the Kubrick WordPress Theme
In the following videos I demonstrate how to edit the default, Kubrick WordPress theme using Photoshop. The first video covers the various images used in Kubrick and shows where and how they are used…parts 2 and 3 demonstrate how to edit those images and make some basic css adjustments to accommodate your changes. I demonstrate how to:
1. Create a custom header
2. Customize the footer and background
3. Change the color of the background or add a repeating background graphic
4. Remove the blog title and tagline from displaying over the custom header
5. Make the header clickable
The Kubrick psd (Photoshop) file I use in the videos is available for download here:
Download Kubrick PSD Downloaded: 5163 times.
How to Edit the Kubrick WordPress Theme — Part 1 of 3
How to Edit the Kubrick WordPress Theme — Part 2 of 3
How to Edit the Kubrick WordPress Theme — Part 3 of 3
Related posts:
- Customized iNove Theme for Download — 200px Header Tweet I’ve customized the iNove theme — Version 1.2.2 —...
- WordPress TwentyTen & TwentyEleven Theme Basic Editing for Non-Techies Tweet In the video above I demonstrate how to do...
- WordPress Pixel Theme — Four New Colors Tweet I’ve edited the WordPress Pixel theme (1.9.7) a bit...
- How to Remove the Commenting Feature From Your WordPress Theme Tweet Commenting is a great WordPress feature and is one...
- iNove 1.4.5 Theme for WordPress– How to Increase the Header Size Tweet In older versions of the iNove theme, increasing the...

Yes, just do a google search for random headers…there are several ways to do this.
how to remove that annoying grey box behind the header? is not shwing in photoshop but when published in website it appear there.
in firefox its looks like fine! only in IE that grey box behind header appear?
@gool: Post a link so I can see what you are talking about.
figaro thanks for quick replay…you can look at my website http://www.dumblife.com behind the header there is big grey squar it does show up only in IE ? in firefox its fine i tried to find it in templete and css but nothing?? i dont know were it came from?
again thanks for ur help figaro
Hi Figaro,
Can’t wait to get customising after watching your videos, but I have a little problem…
I only have Photoshop Elements (Mac version), and when I open up your template psd file, I don’t see the Blue Header Layer. This is crucial, because I can’t slot my own image between that and the Rounded Header Layer.
Any idea what’s going on?
hello figar,, any suggestion?
it’s ok i fixed it , in template i save header in png format and all others in jpg,, i want keep my logo in high quality coz in jpg u can still see pixels i advice all people who ceating their logo to change all slice to png and in css file as well,,well if there is another suggestion ill be glad to know it. thanks
@fncbloke: I don’t have Elements, but I believe it’s a stripped down version of the full PhotoShop version. If you want to post a link to your image, I’ll make a Kubrick header out of it for you and post it so you can download it.
@figaro
Thanks for the offer, but I think I’ve worked around it. In case it’s of use to anyone else, this is what I did:
1. Select the Rounded Header layer in the Layers palette and invoke Layer>Simplify Layer from the menu.
2. Add my image to the template above Rounded Header.
3. Select my image in the Layers palette and invoke Layer>Group with Previous.
This seems to have the desired effect, but as I’m new to Photoshop, I’ve no idea why!
Man this is frustrating. I did everything except id doesn’t show the slices in cs2 what version of photoshop were you using? I did not get cut up pieces of my images.
Plus when I uploaded the file onto my wordpress i get nothing but a faded out gray page. Man this is so difficult. Please help me with this.
CS2 should work. Send me your psd file and I’ll see if I can get it to work for you…just upload it somewhere and send me a link to download it.
@fncbloke
You’re a marvel! Who cares why. That’s to worry about tomorrow.
Follow-up question. These tutorials are ace, by the way, so a big thanks to figaro. Excellent presentation style.
Now, if the blog title display line(s) are removed from header.php does that remove whatever
SEO power the blog title has? Similarly the tagline?
Is there an HTML method to keep the title and tagline text ‘on’ the page but invisible so as to use the graphic methods figaro is teaching us here yet retain the SEO power.
@Phil
It probably does.
You could leave it in the code and open style.css and add display: none; to the title and tagline attributes there.
Well, my dabbling with CSS worked as you suggest. The title and tagline text are still in Dashboard, Settings, General, the header.php lines of code are still intact and they do not obstruct the nice new header with graphics.
Many thanks. Only time will tell if SEO is working.
I was wondering. How can I get a large static background image, while the page (white area) itself still scrolls as normal?
Thanks so much for your tutorial. I successfully created a new header image and renamed it to kubrickheader.jpg and overwrote the orig. kubrickheader.jpg in the themes/default/images folder. It doesn’t show up. Something seems to be overriding the CSS for the header which states the url to the header image. In the wordpress dashboard under Appearance there is a “Header image and Color” link which should let me edit the header. Do these settings override the CSS? Any thoughts?
If you have created a custom header, then you will want to make sure you don’t have any color settings set in for the theme header in the admin area…if so, that will lay over your custom header.
“make sure you don’t have any color settings set in for the theme header in the admin area”
Excellent. That worked and my image is now displaying. Thank you.
thank you for the videos above…they exactly what i needed. i would love to see how to add an image to the footer. a simple step by step text would be fine. thanks much.
joe
@fncbloke
Thanks! I’m in the exact same situation and it worked for me as well.
Hi, tried opening your kubrick psd file in GIMP. Only 1 layer appears – the blue header with no other layers. The rounded header layer doesnt exist, hence i dont seem to be able to get my picture within the blue header. It just sits over it at the moment. Anyone familiar with GIMP here as i dont wish to pay for Photoshop as i dont expect to be using it all that much. Would appreciate some advice.
@joe donnalley
I’m going to do a follow-up video to show more editing stuff…I’ll include that when I make it.
Hi… Ok as usual I’m confused.. this is the first time I heard of iNove..
Is it the same as WP.ORG ver2.8.1..
Last week I had rage going on in my head…I had a willfull accident.. with WP.org ver2.7.1.. I got very upset.. mostly because I’m too stupid to understand much of this..so I get frustrated..
but its coming along.. very slowly..
mind you, I spend much of my day and most of my life building houses and remodels.. building a word press thing is very new to me.. so In a fit of rage I deleted my old WP.ORG ver 2.7.1
it actually was an abomination of nothing…a feeble effort to the say the least..
and to learn PHP and editing with FTP maneuvers.. who would of thought
not that its very hard its very confusing even if you do know what your doing.. I see that expressed by many of you, who obviously work with WordPres alot..
Editing these downloadable themes has got to be the most difficult of all tasks for me..Your tutorials videos are just what the doctor ordered.. thank you so much for that..please keep up the good work especially for people like me..
so now I want to upload version 2.8 with a refreshed attitude and a re-newed spirit..
..especialy since I have discovered this video tutorial site.. this is very good and you make things very clear something I need very badly…
so… my question should I download iNove or WP.ORG ver2.8.1 or is it the same..
wish I knew..
thank you..
the coffee dude..Ralph
@thecoffeedude: Just install WP 2.8. Once you have it running, then you can install iNove, or anyother theme you like, from within the 2.8 admin interface…just point-and-click stuff…no ftp needed.
Hello Figaro! Thanks for all your help in the past man. I am currently trying to make my header pull in random images, but all the current methods I found through Google are not working or the site has closed. Do you know how to pull in random header images each time a page loads?
@Rich Foster
Look on the right of the header on this site and select the iNove Roatating Header and you will see how it working on this site. I use a simple php script found here: http://ma.tt/scripts/randomimage/
@figaro
Thanks Figaro! I think I dont have the experience to build the unique php code for my site. Do you accept compensation for services performed on blogs?
fosterpcs@gmail.com
@Rich Foster
Yes. See here: http://educhalk.org/blog/?page_id=11
I appreciate you posting these tutorials. WordPress for beginners is nerve wrecking. I have been wrestling with Kubrick for a month and a half. I am not reinventing the wheel as much as I am trying to coordinate the feel of the blog with the static pages (aka change colors + header).
I did the image swap and everything but the kubrickbgwide.jpg are in place. The original image appears to still be in play. I have swapped images + resaved until I lost count.
I am already well on my way to bald, so I can’t pull out anymore hair. Any help or direction you may offer would be greatly appreciated.
@Donald: I’m seeing a custom site…you’re either using a different theme or you fixed the problem.
Thanks for the Edit the Kubrick theme tutorial. It is great having the commonsense advice, so you don’t overwrite the original, and how to create another theme directory.
Many thanks.
Having followed your tutorial and uploaded the edited theme into the theme folder I can’t seem to get it to work. The background changes colour to black but the rest of the theme stays the same. It must be something I am doing wrong but for the life of me I can’t work it out. Would you be able to shed some light on what I am doing wrong?
Many thanks
@:David: In your WP admin area, look at the current theme options under Appearance. Make sure you don’t have a color selected for the header.
Thank you for that. It seems to have worked! There is one other change that doesn’t seem to work and that is the kubrickbgwide image. The kubrickbgwide file that should be showing is a dark grey like the footer yet it’s still showing white. Which part do I edit to fix this?
Again thank you very much for your help and thank you also for the tutorial. It was very useful. Thank you in advance.
@David: Yes, they added the ltr image in as default again since I made the tutorial. Take a look at the second video in the following post, starting at about the 2 min point to see how to change the header to use the kubrickbgwide image as default.
http://educhalk.org/blog/?p=266
Thank you for all your help and your tutorials. Everything is working now.
Just watched your video…
Photoshop is another wall to have to climb.
Hello, Fig!
Firstly, can I say thankyou for your easy to understand lessons. Really good!
I’ve just done all three vids, but have come to a different conclusion than you. Firstly, there seems to be another graphic behind my typing part and header? Secondly, when I click on one of my posts, I can’t click back to home via the header. The cursor pops up, but it doesn’t work?
Sorry for my noobness, but i’ve just made the transition from blogger to WP.
Thanks in advance!
@Kris
Since I made this video, WP has started using the kubrickbg-ltr as the default content background again. Just make a copy of the kubrickbgwide image and replace the lrt image with it.
Figaro, Thank you so so much for posting these videos. Indispensable to me as I try to build my site in WP. I have also fixed all the current issues I’ve run across by reading all the comments on this page. Thanks a ton.
@Richard Pose
You’re welcome…glad you found them helpful.
Hi Figaro,
Like everyone else, I am very thankful that you have put together so much helpful info. Thank you!
on May 19th, 2009 at 12:53 fncbloke posted:
“I only have Photoshop Elements (Mac version), and when I open up your template psd file, I don’t see the Blue Header Layer. This is crucial, because I can’t slot my own image between that and the Rounded Header Layer.”
I also have Photoshop Elements 8 though it is the Windows version. I am having the same issue of the Blue Header Layer not showing up in the Layers panel. I have not been able to figure out a work around. any suggestions?
Many thanks for your time!
Peg
@Peg: I don’t have Photoshop elements, so I just assume the PDS file (created in photoshop CS3) isn’t compatible with elements.
Hi,
I followed your tutorial and created an ace blog but it doesn’t seem to work on internet explorer. Works great on firefox and safari. I was wondering if you knew how I might fix this. My site is http://www.tinolabamba.com
Any help would be greatly appreciated.
thanks,
mark
I’ve gotten to a point where I can’t figure out what to do next. I customized the header graphic to look like the rest of our site, but when I published it, I still get the default big blue rectangle overlayed on top of it. Any thoughts on what I’m missing?
Thanks.
Thanks for the super tutorial. It works great exception the kubrickgbwide.jpg doesn’t seem to be showing up. I’ve checked several times, and it has the little colored marks on the edges. Can you think of anything?
thanks so much,
Linda
@Linda Van gundy: Yes…since this tutorial WP started using the kubrickbg-ltr.jpg as the default instead of the kubrickbgwide.jpg. The easiest way to correct the problem is to make a copy of your kubrickbgwide.jpg and rename it kubrickbg-ltr.jpg then replace the existing kubrickbg-ltr.jpg with it.
@figaro
Fantastic! Thank you so much, Linda