Making the default Wordpress Kubrick theme wider

Using this tutorial to make Kubrick wider in Wordpress 2.9.2 will not work right away as the tutorial was written for 2.7, but the basics remain the same:

1/ Change the 4 images to 984px

kubrickheader.jpg
kubrickfooter.jpg
kubrickbgwide.jpg
kubrickbg-ltr.jpg

2/ Change header-img.php as in the tutorial

$corners = array(
        0 => array ( 25, 734+224 ),
        1 => array ( 23, 736+224 ),
        2 => array ( 22, 737+224 ),
        3 => array ( 21, 738+224 ),
        4 => array ( 21, 738+224 ),
        177 => array ( 21, 738+224 ),
        178 => array ( 21, 738+224 ),
        179 => array ( 22, 737+224 ),
        180 => array ( 23, 736+224 ),
        181 => array ( 25, 734+224 ),
        );
...
$x2 = 740+224;
...
$x2 = 739+224;

4/ Modify style.css

#headerimg {
        width: 984px;
}
#page {
        width: 984px;
}
#header {
        width: 984px;
}
.narrowcolumn {
        width: 660px;
}
.widecolumn {
        width: 660px;
}
#footer {
        width: 984px;
}
#sidebar {
        margin-left: 745px;
}

Voilà

Tags:

7 Responses to “Making the default Wordpress Kubrick theme wider”

  1. George says:

    I’m glad it helped you.

    It should just about work right away in 2.9.2. I’m currently on 2.9.1 myself, I keep that entry up to date when I need to make changes and it all looks fine on there at the moment.

    Your header looks overcompressed (“jpegy”). The default theme uses header-img.php rather than kubrickheader.jpg directly, and this seems to work better. You can just choose your colour in your dashboard too.

    Your sidebar is still showing up on your single post pages.

    The shadows are missing from the side of the page.

    This is because you have missed some steps. For example:
    http://www.helyar.net/wp-content/themes/default/images/kubrickbgwide.jpg
    http://blog.bottomlessinc.com/wp-content/themes/default/images/kubrickbgwide.jpg
    You can see that you have not increased the width of this, which is why you do not have shadows either side. The same goes for kubrickbg-ltr.jpg etc.

  2. Kevin says:

    I just upgraded to 3.0 and I’d like to use this configuration. I’ll post on my success or failure sometime soon!

  3. piopio says:

    Hi, thanks a lot. Kubrick at 1024! Looks really modern!

    It worked for me 99% with WP 2.9.2 italian.
    The remaining 1% is a

    margin: 0 0 0 1px;

    in the 2nd #header definition in style.css: it displaced the header of 1 px to the right. That happens in this site, too, but if I don’t mistake, this header image (kubrickheader.jpg) has been done with 983px width to match the right border. Dosn’t it?
    I’ve set that to

    margin: 0 0 0 0px;

    and all is perfect with the header image width to 984px. Thanks to your precious help I spared a lot of time.

    A kiss.

  4. Ken says:

    piopio wrote:

    I’ve set that to

    margin: 0 0 0 0px;

    and all is perfect with the header image width to 984px. Thanks to your precious help I spared a lot of time.

    ***********

    Perfect!. Thanks for the comment. I saw this and you saved me from having to look for the mod.

  5. Anna says:

    Thank you for the tutorial!
    It works fine with one exception: my headerimage appears larger than the rest of the page.
    Perhaps it is because I use WP 3.0?
    Can you help me to fix that?

  6. Jayson says:

    Hi. I’ve got a browser issue with this. Didn’t wanna go with the 984px width so I went with just 900px. I think I did everything right. I’ve only resized the kubrick-ltr.jpg as I’m in a hurry to test it. Looks fine on FF but not in Chrome. It’s short by a few pixels. How can I fix this?

  7. Jayson says:

    Actually, I fixed it. Sidebar margin-left was way too high.