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

  1. Customized iNove Theme for Download — 200px Header Tweet I’ve customized the iNove theme — Version 1.2.2 —...
  2. WordPress TwentyTen & TwentyEleven Theme Basic Editing for Non-Techies Tweet In the video above I demonstrate how to do...
  3. WordPress Pixel Theme — Four New Colors Tweet I’ve edited the WordPress Pixel theme (1.9.7) a bit...
  4. How to Remove the Commenting Feature From Your WordPress Theme Tweet Commenting is a great WordPress feature and is one...
  5. iNove 1.4.5 Theme for WordPress– How to Increase the Header Size Tweet In older versions of the iNove theme, increasing the...

  1. April 14th, 2009 at 06:50 | #1

    Yes, just do a google search for random headers…there are several ways to do this.

  2. gool
    May 18th, 2009 at 08:19 | #2

    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?

  3. May 18th, 2009 at 15:50 | #3

    @gool: Post a link so I can see what you are talking about.

  4. gool
    May 18th, 2009 at 17:20 | #4

    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

  5. fncbloke
    May 19th, 2009 at 12:53 | #5

    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?

  6. gool
    May 20th, 2009 at 02:27 | #6

    hello figar,, any suggestion?

  7. gool
    May 20th, 2009 at 04:46 | #7

    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

  8. May 20th, 2009 at 06:45 | #8

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

  9. fncbloke
    May 21st, 2009 at 15:43 | #9

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

  10. May 21st, 2009 at 23:44 | #10

    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.

  11. May 22nd, 2009 at 15:04 | #11

    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.

  12. Phil
    May 22nd, 2009 at 16:41 | #12

    @fncbloke

    You’re a marvel! Who cares why. That’s to worry about tomorrow.

  13. Phil
    May 30th, 2009 at 17:22 | #13

    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.

  14. May 30th, 2009 at 19:34 | #14

    @Phil

    does that remove whatever
    SEO power the blog title has? Similarly the tagline?

    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.

  15. Phil
    June 1st, 2009 at 04:02 | #15

    figaro :
    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.

  16. LaurenW
    June 2nd, 2009 at 19:51 | #16

    I was wondering. How can I get a large static background image, while the page (white area) itself still scrolls as normal?

  17. June 11th, 2009 at 12:02 | #17

    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?

  18. June 11th, 2009 at 15:03 | #18

    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.

  19. June 11th, 2009 at 18:31 | #19

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

  20. July 4th, 2009 at 22:24 | #20

    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

  21. Matt
    July 7th, 2009 at 18:59 | #21

    @fncbloke

    Thanks! I’m in the exact same situation and it worked for me as well.

  22. clector
    July 9th, 2009 at 06:30 | #22

    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.

  23. July 12th, 2009 at 17:54 | #23

    @joe donnalley
    I’m going to do a follow-up video to show more editing stuff…I’ll include that when I make it.

  24. thecoffeedude
    July 16th, 2009 at 12:45 | #24

    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

  25. July 16th, 2009 at 15:40 | #25

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

  26. July 22nd, 2009 at 20:58 | #26

    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?

  27. July 23rd, 2009 at 08:18 | #27

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

  28. July 23rd, 2009 at 11:56 | #28

    @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

  29. July 23rd, 2009 at 13:16 | #29
  30. August 17th, 2009 at 13:32 | #30

    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.

  31. August 17th, 2009 at 18:29 | #31

    @Donald: I’m seeing a custom site…you’re either using a different theme or you fixed the problem.

  32. alan hough
    August 17th, 2009 at 19:41 | #32

    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.

  33. September 19th, 2009 at 05:04 | #33

    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

  34. September 19th, 2009 at 07:38 | #34

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

  35. September 19th, 2009 at 10:12 | #35

    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.

  36. September 19th, 2009 at 10:27 | #36

    @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

  37. September 19th, 2009 at 13:04 | #37

    Thank you for all your help and your tutorials. Everything is working now.

  38. October 1st, 2009 at 09:37 | #38

    Just watched your video…

  39. October 3rd, 2009 at 07:57 | #39

    Photoshop is another wall to have to climb.

  40. October 3rd, 2009 at 11:22 | #40

    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!

  41. October 3rd, 2009 at 12:59 | #41

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

  42. October 14th, 2009 at 18:58 | #42

    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.

  43. October 14th, 2009 at 19:27 | #43

    @Richard Pose
    You’re welcome…glad you found them helpful.

  44. December 10th, 2009 at 13:32 | #44

    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

  45. December 10th, 2009 at 14:23 | #45

    @Peg: I don’t have Photoshop elements, so I just assume the PDS file (created in photoshop CS3) isn’t compatible with elements.

  46. December 16th, 2009 at 01:53 | #46

    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

  47. January 11th, 2010 at 23:47 | #47

    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.

  48. January 21st, 2010 at 19:49 | #48

    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

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

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

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

    @figaro
    Fantastic! Thank you so much, Linda

Comment pages
  1. April 18th, 2009 at 19:06 | #1
  2. May 21st, 2009 at 22:23 | #2
  3. January 16th, 2010 at 17:30 | #3
  4. January 16th, 2010 at 17:38 | #4
  5. October 3rd, 2010 at 12:49 | #5