Hack42 site header

I just came across a nice wordpress plugin that makes site-headers look absolutely gorgeous. So, using my Photoshop skills and general knowledge on web development, i made one for Hack42. It came out fantastic!

Shoop da whooooopp

In a few hours i selected some photos and created about 10 images with the size 950*200. Here’s a few:

With special tooling, that comes with the commercial version of the plugin, the slideshow was created. The tooling allows to choose what images to use, what titles and subtitles, the delay, styles and some other minor things. In the end it delivers a .zip file that can be uploaded to the site.

Now to actually make a header… things get creative and innovative.

Mad scientist at work

With some careful engineering and code manipulation tricks i actually got the header where i wanted it to be: the header. It required edits in the style.css and header.php files, as well as a dummy page for some workarounds.

One problem occurred: the site header is 200 pixels high, while wordpress insisted it should be 170 pixels. Somewhere, buried deep down in wordpress this was specified. I’ve looked everywhere but nowhere to find why or when 170 pixels high was defined.

Time to move in the heavy artillery.

If you know something on coding, you might want to get a bucket or two to vomit. Basically i change any value of “170″ with “200″ on a large portion of the site. This is the wrong way to do things.

<?php
ob_start();
wp_head();
$fuckingimageheighthack = ob_get_clean();
$fuckingimageheighthack = str_replace("170", "200", $fuckingimageheighthack);
print $fuckingimageheighthack;
?>

It worked like a charm.

Result?

Who cares about all the grunt work. We all want to see nice images and flashy headers. That’s what counts and that’s what we’ve accomplished with all this work. It looks awesome and professional. And that’s just the way i like things.

PS this website will soon also feature these great professional headers with images of my life.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>