WordPress users are usually those who like a packaged solution for web editing and posting, wordpress being an excellent tool to assist you without needing to be a javascript, css-stylesheet or html/cgi specialist. Once familiar with the admin interface, you wonder if you can customise the look and feel of the blog to your personal preferences. Menus, pages, categories etc.etc. This article will discuss and explain how to change the default header image of your blog.
If you are using the default wordpress theme, the Kubrick theme, you will need to find the original header jpg used to display the header. You can find this in the wordpress directory under: wp-content/themes/default/images/kubrickheader.jpg. Take this image and load it into Photoshop.
| The default header |
|---|
|
Next, load the background image you want to use instead into PS as well and crop it according to a 760×200 pixel crop. Select all of that image and paste it into the Kubrick header image (crtl-a in your fav image, ctrl-c, select the kubrick image and ctrl-v). In the Kubrick image, create a duplicate layer of the ‘background’ layer and drag this copy to the top of your layer stack. In the top layer, use the ‘quick selection’ tool (keyboard shortcut ‘w’) to select the blues in the Kubrick header image top layer. Once selected, now remove this selection using Edit->Clear.
| Editing the default header |
|---|
|
| click on the image to get a larger version |
Now select the middle layer with your image and invert the selection you just made in the top layer, by pressing ctrl-shift-I or cmd-shift-I. Do the same here, clear this inverted selection (Edit->Clear). Flatten the image (ctrl-shift-E or cmd-shift-E) and save it as a jpg. Before uploading this new jpg to the wp-content/themes/default/images directory, save the original to kubrickheader.jpg.orig. Upload the image.
The second part of the exercise is to edit the file that handles and displays the header image. This file is located in the same directory as the kubrickheader.jpg, i.e. in wp-content/themes/default/images/header-img.php. Before you do this, make a copy of this file e.g. header-img.php.orig. Place ‘comment’ tags in this file at the following positions (the : “Remove If you want original back” lines):
/* Remove If you want original back.
// If we don’t have image processing support, redirect.
if ( ! function_exists(‘imagecreatefromjpeg’) )
die(header(“Location: kubrickheader.jpg”));// Assign and validate the color values
$default = false;
$vars = array(‘upper’=>array(‘r1′, ‘g1′, ‘b1′), ‘lower’=>array(‘r2′, ‘g2′, ‘b2′));
foreach ( $vars as $var => $subvars ) {
if ( isset($_GET[$var]) ) {
foreach ( $subvars as $index => $subvar ) {
$length = strlen($_GET[$var]) / 3;
$v = substr($_GET[$var], $index * $length, $length);
if ( $length == 1 ) $v = ” . $v . $v;
$$subvar = hexdec( $v );
if ( $$subvar < 0 || $$subvar > 255 )
$default = true;
}
} else {
$default = true;
}
}if ( $default )
list ( $r1, $g1, $b1, $r2, $g2, $b2 ) = array ( 105, 174, 231, 65, 128, 182 );Remove If you want the original back */
And a few lines later in the same file:
/* Remove If you want the original back.
// Blank out the blue thing
for ( $i = 0; $i < $h; $i++ ) {
$x1 = 19;
$x2 = 740;
imageline( $im, $x1, 18 + $i, $x2, 18 + $i, $white );
}// Draw a new color thing
for ( $i = 0; $i < $h; $i++ ) {
$x1 = 20;
$x2 = 739;
$r = ( $r2 – $r1 != 0 ) ? $r1 + ( $r2 – $r1 ) * ( $i / $h ) : $r1;
$g = ( $g2 – $g1 != 0 ) ? $g1 + ( $g2 – $g1 ) * ( $i / $h ) : $g1;
$b = ( $b2 – $b1 != 0 ) ? $b1 + ( $b2 – $b1 ) * ( $i / $h ) : $b1;
$color = imagecolorallocate( $im, $r, $g, $b );
if ( array_key_exists($i, $corners) ) {
imageline( $im, $x1, 18 + $i, $x2, 18 + $i, $white );
list ( $x1, $x2 ) = $corners[$i];
}
imageline( $im, $x1, 18 + $i, $x2, 18 + $i, $color );
}
Remove If you want the original back */
Save the file and you’re done.
This is how my first attempt worked out.
| My default header |
|---|
|
