[lang_en]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 |
|
[/lang_en]
[lang_nl]Wordpress gebruikers zijn gewend om kant en klare oplossingen te vinden voor web publiceren en serving. WordPress biedt een uitstekenede oplossing voor het gros van de problemen, zonder daarbij een specialist te zijn voor javascript, css-stylesheet or html/cgi. Eenmaal gewend aan de amin GUI, begin je je af te vragen in hoeverre jouw blog aan te passen is aan jouw wensen. Dit artikel legt uit hoe je de ‘header’ kunt aanpassen aan je eigen wensen.
Als er gebruik wordt gemaakt van standaard wordpress theme (Kubrick), de standaard header file moet worden gevonden. Te vinden is deze file in de directory wp-content/themes/default/images/kubrickheader.jpg. Laad deze file in Photoshop.
| De default header |
|
|
Vervolgens, laad de achtergrond afbeelding die je wilt gebruiken in PS and breng de grootte van deze afbeelding terug naar ongeveer 760×200 pixels. Selecteer deze afbeelding en copy/paste deze in het document van de Kubrick header (ctrl-a in je favoriete image, ctrl-c en in de kubrick image ctrl-v) . In de Kubrick afbeelding, creeer een duplicate layer van de Kubrick-’backgroun’ afbeelding en breng deze layer naar de top van het document. In deze top layer, selecteer de ‘quick selection’ tool en selecteer het blauwe deel, zodat rond al het blauw de rennende mieren te zien zijn. Geselecteerd, verwijder dze selectie door middel van Edit->Clear.
| Default Header aanpassen |
|---|
|
|
| click op de afbeelding voor een grotere versie |
Selecteer nu de middelste layer en inverteer de selectie van de top layer, door middel van ctrl-shift-I of cmd-shift-I. Doe hier nu hetzelfde, verwijder deze geinverteerde selectie: Edit->Clear. De afbeelding is nu gereed voor verdere bewerking: flatten de afbeelding (ctrl-shift-E or cmd-shift-E) en schrijf de afbeelding als jpg naar de harde schijf, in directory wp-content/themes/default/images.
Het tweede deel van deze opgave is het aanpassen van de file die de header plaatst en behandelt. Deze file bevindt zich in dezelde directoryt als de afbeelding, i.e. in wp-content/themes/default/images/header-img.php. Maak voor dat je veranderingen aanbrengt een zekerheidskopie, e.g. header-img.php.orig. Nu, volg de aanwijzingen hieronder en breng commentaar zinnen aan op de aangegeven plaatsen.
/* 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 */
En een paar lijnen verder in de zelfde 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 */
Bewaar de file en klaar.
Dit is hoe mijn nieuwe header er uit ziet.
| Mijn default header |
|
|
[/lang_nl]
[lang_de]Wordpress benützer haben es gern wenn es vorgefertigte Packages verfügbar sind für web editing und posting. WordPress bietet das ohne eine Spezialist zu sein in javascript, css-stylesheet oder html/cgi. Einmal gewöhnt an der Administrations-Interface fängt mann schon an der ‘Look&Feel’ nach eigene Preferenzen an zu passen. Menus, pages categoriëen usw. Dieser Artikel behandelt wie man der default Blog-Header anpassen kann mit ein eigenes Bild.
Wenn mann (so wie ich) der default Worpress-Thema benützt (der Kubrick-Thema) das erste was man tun muss ist das finden vom Header Bild. Die findet man im Directory mit Verzeichnis: wp-content/themes/default/images/kubrickheader.jpg. Nimm jetzt dieses Bild in einem neuen Dokument in Photoshop.
| Der default Header |
|
|
Nach dem Laden dieses Bild, öffne ein neues Dokument mit dein favorit Bild. Passe dieses Bild in etwa an einer 760×200 Pixels Grösse an. Selectier das ganze Bild (ctrl-a oder cmd-a) kopiëer es (ctrl-c oder cmd-c) und lade der Selection in das Kubrick Bild (ctrl-v oder cmd-v). Das Bild erscheint in eine neue Layer. Der nächste Schritt ist ein duplicat Layer vom ‘background’ zu machen: setze diese Kopie am Top der Layer-Stack. Wähle jetzt der ‘quick selection’ Tool (Taste ‘W’) und selectier alles was blau ist. Entferne diese Selection mittels: Edit->Clear. Das blaue Teil soll jetzt verschwunden sein.
| Der default Header anpassen |
|
|
| click auf diese Bild für eine grössere Version |
Dann, selectier der mittel Layer und invertier der Selection: ctrl-shift-I oder cmd-shift-I. Mach jetzt dasselbe und entferne diese Selection durch Edit->Clear.
Das Bild ist jetzt fertig. Flatten dieses Bild (ctrl-shift-E or cmd-shift-E) und speicher es als ein jpg. Upload dieses Bild zurück in den wp-content/themes/default/images Directory.
Das zweite Teil der Anpassungen besteht aus das Editieren vom File der der Header schreibt und behandelt: wp-content/themes/default/images/header-img.php. Bevor Änderungen zu machen, mach eine Sicherheitskopie, e.g. header-img.php.orig.
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, In diesem File, markier die folgende Abschnitte mit einem Kommentarzeichen, wie folgt:
/* 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 */
Und ein par Zeile weiter im gleichen 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 */
Speicher der File mit diesen Änderungen.
Hier das Ergebnis von meine Anpassungen:
| Meine default Header |
|
|
[/lang_de]
Update: each time you update WordPress, the wp-content/themes/default/images/header-img.php changes, so you need to apply this exercise after each upgrade.