Home > Just the Video Tutorials, WP Themes > How to Edit the Kubrick WordPress Theme

How to Edit the Kubrick WordPress Theme

January 30th, 2009 Leave a comment Go to comments

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: 7630 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

Get Noticed with a $7.99 .CO!
  1. January 21st, 2010 at 19:49 | #1

    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,


  2. January 21st, 2010 at 20:29 | #2

    @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.

  3. January 22nd, 2010 at 13:55 | #3

    Fantastic! Thank you so much, Linda

  4. February 27th, 2010 at 19:37 | #4

    This was a great tutorial and I wouldn’t have been able to revamp my site without it 🙂 But two things: the way to make the header clickable only worked in Firefox and not explorer so I ended up using a variation on the code edit that I found in in the WordPress faq http://tiny.cc/CmT0C . Also, I got a flash of the old blue header which was a nightmare to fix but it was solved (again) thanks to the WordPress folks http://tiny.cc/dkB3G

    Again, great tutorial!

  5. Alex
    March 2nd, 2010 at 21:38 | #5

    Great stuff, Figaro. Thank you so much. It made my day.
    I’ve been trying to improve things though, using Flashfader plugin in WP 2.9.2. Inserted the code in header.php and it worked (FF does) – but not through the header. code is:

    Is there a place where this should be included that you can suggest?
    Thanks again – even without fading images, it’s great.

  6. jesth
    May 31st, 2010 at 18:41 | #6

    Awsome guides, really helped me alot, can’t wait to see how you remove the grey edges in your next tutorials.

  7. June 2nd, 2010 at 11:19 | #7

    @jesth: I think the videos cover that.

  8. jesth
    June 2nd, 2010 at 16:47 | #8

    Hmm, okay, I just watched all 3 of them again, and still didn’t see that, maybe I wrote it wrong, what I meant was, the grey areas on all three images, those i’d like to remove, so I don’t have to add background colors to them.

    I hope you know what I mean.

  9. June 2nd, 2010 at 17:38 | #9

    Okay, I think I understand now…you want it to look something like this:


    It’s been a while since I played around with Kubrick, but I think I just deleted the masks from the template…see one of the masks I’m talking about at around 5:40 in the second video. I may have had to adjust some css as well, but it’s been so long I can’t remember. If you have the images you want to use, let me know and maybe I can take some time this weekend to look at this again.

  10. jesth
    June 2nd, 2010 at 18:19 | #10

    That’s exactly what i’m after in that link, I got the images from the default kubric theme, also downloaded the .psd, but i’m nbnot that strong with Photoshop, maybe a psd without the grey areas, that would be awsome.

    And once again, really really good guides.

  11. June 3rd, 2010 at 05:57 | #11

    @jesth: I’m swamped for the next few days, but I’ll take a look at this again when I get a chance and see if I can change the files to do that…it may be next week before I get to it, but will post it to my blog when I get it done.

  12. jesth
    June 4th, 2010 at 18:17 | #12

    Much appriciated, and thanks for the help so far.

  13. free71
    July 7th, 2010 at 19:28 | #13

    Amazing tutorials . Many thanks for your Help.

  14. Leigh Anne
    July 21st, 2010 at 19:54 | #14

    Thanks so much. I was tearing my hair out over the background color. Your videos are informative and also calming.

  15. September 30th, 2010 at 04:54 | #15

    I was finding way to edit my wordpress.

    Thanks a ton

  16. October 24th, 2010 at 03:25 | #16

    brilliant , and the comments are so helpful as well , do you mind doing a video on 21 theme for wordpress 3.0.1 ? this is the new default theme figaro.

  17. miss D
    November 23rd, 2010 at 13:17 | #17


    thanks for this great tutorial, It really helped me a lot.

    However, I just want to ask if we want to put a pic on the background instead of the color and what size should it be, I tries and it was repeated in a very annoying way

    could you please help me with this??


  18. Frank
    November 29th, 2010 at 01:55 | #18

    miss D :
    thanks for this great tutorial, It really helped me a lot.
    However, I just want to ask if we want to put a pic on the background instead of the color and what size should it be, I tries and it was repeated in a very annoying way
    could you please help me with this??

    Simply just check the images folder of the theme and u see the default image , pic the px width and height from there 😉

    and thanks for the article.

  19. neil
    February 28th, 2011 at 17:11 | #19

    Peter, doing a video on 21 theme for wordpress 3.0.1 is not that easy though..
    I don’t think it’s the new default figaro theme, how do you know it is?

  20. Patrick
    March 6th, 2012 at 23:45 | #20

    Great Tuturial but i got a problem ..everytime i try to open your file my photoshop crashes ..i am using photoshop cs5

  21. March 8th, 2012 at 14:00 | #21

    I’m using CS5 and it works fine…I assume you have unzipped the file and are not just trying to open it from the zip folder…

  22. Patrick
    March 11th, 2012 at 14:10 | #22

    i uninstalled Photoshop then installed it ..the error happen again but after opening the file again it worked 🙂 ..Simply amazing..thank you sooo much.

    PS . anyway you can make so if a someone post a comment but got the CAPTCHA wrong they don’t have to re enter their whole message again.

  23. Patrick
    March 12th, 2012 at 08:06 | #23

    How would i go about adding an image to the background in the theme rather then a color in cs5?

  24. Ervin
    July 1st, 2012 at 11:54 | #24

    Hi there Mr. Figaro I’ve been a loyal follower of all your wordpress tutorials, how ever on this kubrick tutorial i saw it a few years ago and now that i want to make a simple blog i want to set it up but i got stock where i download your kubrick psd file, i’d asked you this question a long time ago and never got an answer maybe this time i’ll get lucky and get somewhere, this is my question: after i do my custom set up on the kubrick psd file, should save the file under web divices and then up load it to my wp file on the images directory or what???
    I would apreciate a little help with this or any one that can be so kind to help me…..
    Thanks and God bless….

Comment pages
1 2 3 137
  1. January 16th, 2010 at 17:30 | #1
  2. January 16th, 2010 at 17:38 | #2
  3. October 3rd, 2010 at 12:49 | #3