This tutorial will walk you through how to widen Kubrick, the WordPress Default Theme, without losing the ability to use the theme’s custom header image coloring. The result will be wide enough for a second sidebar, or for one of the extra wide sidebars that are increasingly popular.
I added 200px to the WordPress Default theme’s header and sidebar, for a 390px sidebar with a total of 940px overall. Look around online and see what kind of width you like. I’ve seen multi-column sidebars anywhere from 300px to 500px wide.
These are copy and paste directions. Programming skills are not required – simply pay careful attention to details. You’ll need basic image editing skills, a text editor like notepad, and the ability to FTP your theme’s files.
- Step One: Change background image widths
- Step Two: Edit php that customizes image color
- 2)a: Add 200px to the header image width variable
- 2)b: Find code that defines header shape coordinates
- Step Three: Change style sheet to match new width
- 3)a: Widen page container
- 2)b: Increase width of header container
- 3)c: Widen footer
- 3)c: Widen sidebar or add a second sidebar
Step One: Change the header image width
Look in /wp-content/themes/default/images/ for the files named kubrickheader.jpg, kubrickfooter.jpg, kubrickbgwide.jpg, and kubrickbg-ltr.jpg or kubrickbg-rtl.jpg. Use an image editing program to increase the width of each by 200px.
Avoid changing the radius of the corners in kubrickheader.jpg by avoiding tools that change the scale of an image. Stick to copy and paste and you’ll be fine. The original header image is 760px wide and 200px high. Adding 200px will result in a finished image that is 960px wide and 200px high. If you want less height, take a look at Reducing Header Height – WordPress Default Theme.
In kubrickbg-ltr.jpg or kubrickbg-rtl.jpg add 200px width to the darker portion that forms a background for the sidebar. Blogs written in languages read from left to right only need kubrickbg-ltr.jpg. You won’t need kubrickbg-rtl.jpg unless blogging in a language that is written from right to left, such as Hebrew or Arabic.
Step Two: Edit php that customizes image color
This gets a little more complicated, but you really don’t need to know how to write the php that draws color customizations. Just find the parts to change, and change only those without adding or subtracting spaces or punctuation. You’ll be changing the code in three places.
Look in /wp-content/themes/default/images/ for the file named header-img.php and open it in a text editor. If you’re like I was the first time I opened it, you don’t know much php but do remember enough algebra to recognize graphing coordinates.
2)a: Add 200px to the header image width variable
Find where the height of the image is defined, and add 200px. The original width is 740px, not 760px, because the outside border is left white.
Change $x2 = 740 to $x2 = 940.
Original code:
// Blank out the blue thing for ( $i = 0; $i < $h; $i++ ) { $x1 = 19; $x2 = 740;
After editing:
// Blank out the blue thing for ( $i = 0; $i < $h; $i++ ) { $x1 = 19; $x2 = 940;
Add 200px to the width by changing $x2 = 739 to $x2 = 939.
Before editing:
// Draw a new color thing for ( $i = 0; $i < $h; $i++ ) { $x1 = 20; $x2 = 739;
After editing:
// Draw a new color thing for ( $i = 0; $i < $h; $i++ ) { $x1 = 20; $x2 = 939;
2)b: Find code that defines header shape coordinates
This is where remembering algebra made me curious about what would happen if I changed the coordinates. Widen the image 200px by adding 200 to the first number in the first five rows of numbers, and you’re through with this step.
Original code:
// Define the boundaries of the rounded edges ( y => array ( x1, x2 ) ) $corners = array( 0 => array ( 25, 734 ), 1 => array ( 23, 736 ), 2 => array ( 22, 737 ), 3 => array ( 21, 738 ), 4 => array ( 21, 738 ), 177 => array ( 21, 738 ), 178 => array ( 21, 738 ), 179 => array ( 22, 737 ), 180 => array ( 23, 736 ), 181 => array ( 25, 734 ), );
After editing:
// Define the boundaries of the rounded edges ( y => array ( x1, x2 ) ) $corners = array( 0 => array ( 25, 934 ), 1 => array ( 23, 936 ), 2 => array ( 22, 937 ), 3 => array ( 21, 938 ), 4 => array ( 21, 938 ), 177 => array ( 21, 938 ), 178 => array ( 21, 938 ), 179 => array ( 22, 937 ), 180 => array ( 23, 936 ), 181 => array ( 25, 934 ), );
Step Three: Change style sheet to match new widths
In the WordPress Default theme some divs and classes appear twice, because of the way the Michael Heilemann has separated structure and formatting. It’s OK to either leave them separate or combine them. To keep it simple here for beginners I’ve left them separate, like they are in the original style sheet.
Look for style.css at /wp-content/themes/default/style.css, and open it in a text editor. You’ll be changing the widths of five IDs.
3)a: Widen page container
The div #page is like a container for all of the rest of this layout. Add 200px to the width property.
Before editing:
#page { background-color: white; margin: 20px auto; padding: 0; width: 760px; border: 1px solid #959596; }
After editing:
#page { background-color: white; margin: 20px auto; padding: 0; width: 960px; border: 1px solid #959596; }
3)b: Increase width of header container
Add 200px to the width of both #headerimg and #header.
Original CSS:
#headerimg { margin: 7px 9px 0; height: 192px; width: 740px; }
After editing:
#headerimg { margin: 7px 9px 0; height: 192px; width: 940px; }
Original CSS:
#header { background-color: #73a0c5; margin: 0 0 0 1px; padding: 0; height: 200px; width: 758px; }
After editing:
#header { background-color: #73a0c5; margin: 0 0 0 1px; padding: 0; height: 200px; width: 958px; }
3)c: Widen footer
Add 200px to the #footer ID’s width. After this step, WP Default’s text should be lining up with your new, wider images.
Before editing:
#footer { padding: 0; margin: 0 auto; width: 760px; clear: both; }
After editing:
#footer { padding: 0; margin: 0 auto; width: 960px; clear: both; }
3)d: Widen sidebar or add a second sidebar
Here you have a choice. You have room for two sidebars with the width of the original, or one wide sidebar. This should get you started.
Before editing:
#sidebar { padding: 20px 0 10px 0; margin-left: 545px; width: 190px; }
To make one extra-wide sidebar, simply add 200px to the existing sidebar ID. You’ll need to apply some floats and widths to the contents, but that’s a topic for another tutorial.
After editing:
#sidebar { padding: 20px 0 10px 0; margin-left: 545px; width: 390px; }
For double sidebar ideas and directions, also see Add a Second Widgetized WordPress Sidebar.
To style two sidebars, you can try duplicating whatever is defined by the first sidebar’s ID, #sidebar, but with a second, separate ID.
After editing:
#sidebar { padding: 20px 0 10px 0; width: 200px; float: right; } #sidebar2 { padding: 20px 0 10px 0; margin-right: 30px; width: 200px; float: right; }