Tuesday, May 20th, 2008by Philip Hoyos
I thought I wanted to have my own image as header, but it was damn near impossible to figure out where to do the change in the default kubrick theme that comes with WordPress. However, I found a solution =). In this tutorial I will show you how to change the Kubrick header in the default WordPress theme.
Find wp-content>themes>default>images>header-img.php
Find the above path on your site by accessing the site by FTP, you can use a free one as Cyberduck (for mac OS X) or Free FTP by CoffeeCup (for windows). Go to the path and use a text-editor to edit header-img.php. Im using TextEdit in OS X.
A short explanation of the technique I use. In php you can place comments in the code for you self or others and you do that by typing ‘/*‘ then you write your comment and end the comment with ‘*/’.
Now comment out the following pice of code, found in the header-img.php like this:
/* <- Remove If you want the color thing 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 color thing back. -> */
That will remove the blue gradiant image, and instead turn the header black. To reveal the picture underneath you need to comment out a bit more:
/* <- Remove If you want the gradiant back.
// Blank out the blue gradiant
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 gradiant back. -> */
Thats it, you are done. Now your header will reveal kubrickheader.jpg, and not the generated gradient. Of course you could delete the pice of code you commented out, however, you might find it useful at a later point. If you are like me you will keep exploring ways to give you blog a look and feel that you like, which is why I recommend that you keep the code.
Insert your own picture in the Kubrick header default WordPress Theme
All you have to do is to upload (with your FTP browser, to the location where you have located your default WordPress theme) your header image with the same dimensions (758×200), extension(.jpg) and name as the kubickheader.jpg. And replace the default header image.
Now make sure that your image has the right dimensions and it must have the name kubickheader.jpg, for this tutorial to work.
This is my result
Update:
Thanks a lot for all your comments. I really appreciate it =)
Tags: kubrick, Tutorial, Tutorials, WordPress
Posted in Tutorials, WordPress | 54 Comments »
