The WordPress Default Theme measures about 220 pixels from the top of the screen to the bottom of the header image, with a 760px wide by 200px high header image. Many popular sites have only between 100 and 150 pixels between the top of the screen and the bottom of the header area. Users who don’t know php and want to change the height of the header will sometimes delete references to functions that can customize the colors of Kubrick’s custom header.
I think that’s a shame, if it’s in response to not wanting to mess with the unknown, because complete understanding is not needed. If the desire is a new image, replace away. If it’s less height now, a new image later, here’s a way to start by experimenting with changing the height. I’m a firm believer in learning by experimentation and observation. If you are a non programmer with similar tendencies this may be a fun exercise for you.
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.
At the end, you will have taken 80 pixels off of the distance between the top of the screen and the bottom of WordPress Default theme’s header image.
- Step One: Change the header image height
- Step Two: Edit php that customizes image color
- 2)a: Subtract 70px from height variable
- 2)b: Find code that defines header shape coordinates
- Step Three: Change style sheet to match new image size
- 3)a: Reduce height of header container
- 3)b: Reduce top and bottom outside margins
- 3)c: Re-center the blog’s name
Step One: Change the header image height
Look in /wp-content/themes/default/images/ for the file named kubrickheader.jpg. Use an image editing program to reduce the height by 70px. The only trick here is to avoid changing the radius of the corners. Avoid tools that change the scale of an image. Stick to copy and paste and you’ll be fine.
The original image is 760px wide and 200px high. I chose to take 70px off of the height, so my finished image is 760px wide and 130px high.
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 two 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: Subtract 70px from height variable
Find where the height of the image is defined, and subtract 70px. The original height is 182px, not 200px, because the outside border is left white. Change $h = 182 to $h = 112.
Original code:
// Get the background color, define the rectangle height $white = imagecolorat( $im, 15, 15 ); $h = 182;
After editing:
// Get the background color, define the rectangle height $white = imagecolorat( $im, 15, 15 ); $h = 112;
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. Since the height is reduced by 70px, the bottom corners will need to be moved up the y axis by 70px. Subtract 70 from the first number in the last 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, 734 ), 1 => array ( 23, 736 ), 2 => array ( 22, 737 ), 3 => array ( 21, 738 ), 4 => array ( 21, 738 ), 107 => array ( 21, 738 ), 108 => array ( 21, 738 ), 109 => array ( 22, 737 ), 110 => array ( 23, 736 ), 111 => array ( 25, 734 ), );
Step Three: Change style sheet to match new image size
Look for style.css at /wp-content/themes/default/style.css, and open it in a text editor.
3)a: Reduce height of header container
Take 70px off of the height of the ids #headerimg and #header. In the WordPress Default theme #header appears 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.
Original CSS:
#headerimg { margin: 7px 9px 0; height: 192px; width: 740px; }
After editing:
#headerimg { margin: 7px 9px 0; height: 122px; width: 740px; }
Original CSS:
#header { background-color: #73a0c5; margin: 0 0 0 1px; padding: 0; height: 200px; width: 758px; } #headerimg { margin: 0; height: 200px; width: 100%; }
After editing:
#header { background-color: #73a0c5; margin: 0 0 0 1px; padding: 0; height: 130px; width: 758px; } #headerimg { margin: 0; height: 130px; width: 100%; }
3)b: Reduce top and bottom outside margins
If you want, you can lessen the margin between the top edge of the screen and the top of the header image. If so, you’ll need to find #page.
Original CSS:
#page { background-color: white; margin: 20px auto; padding: 0; width: 760px; border: 1px solid #959596; }
After editing to reduce the top and bottom outside margins by 10px:
#page { background-color: white; margin: 10px auto; padding: 0; width: 760px; border: 1px solid #959596; }
3)c: Re-center the blog’s name
The original CSS allows for 70 pixels of padding above the site’s name. Now that 70px has been taken off of the header height, 35 pixels needs to be removed from top padding.
Before editing:
/* Begin Headers */ h1 { padding-top: 70px; margin: 0; }
After editing:
/* Begin Headers */ h1 { padding-top: 35px; margin: 0; }