Update 2011-09-18: This post is out of date. See the latest release here.
You may have noticed the slick new header images on tolaris.com. Try resizing your browser. The site’s theme and header images will resize to match, sliding apart as needed while maintaining the right depth.
The artwork was done by my talented friend Josh Smith. Several of his photographs grace the walls of my home, and his daughter – in convincing us that breeding may be pretty neat after all – is incidentally responsible for the existence of my own child. I commissioned Josh to replace the boring old header image (and its limiting static width) with a sliding array of images late last year. I am extremely pleased with the work. From time to time, I may change the command-line text (currently using dpkg to install “Hello World”), just for fun.
The resizing and sliding is accomplished by using CSS. I am using a modified form of the Tarski WordPress template. I love Tarski’s options and clean design, but fixed-pixel-width websites are dumb. So I’ve overridden many of the Tarski theme’s settings to use percentages rather than pixel widths.
All of my modifications can be found by browsing my CSS source. Note that Tarski uses several stylesheets, and this last just overrides a lot of existing defaults.
Making the header images resize and stay aligned correctly is a little tricky. Here are the CSS objects for the first three images from the source above:
#header-image {
position: relative;
height: 180px;
margin-top: 10px;
text-align: center;
}
#header_image_blackbg {new-header-images
position: absolute;
top: 0px; left: 0px;
width: 734px; height: 180px;
z-index: 1;
}
#header_image_bluebg {
position: absolute;
top: 0px; right: 0px;
width: 734px; height: 180px;
z-index: 2;
}
#header_image_gradient {
position: absolute;
top: 0px;
margin-left: -367px; left 50%;
width: 734px; height: 180px;
z-index: 3;
}
The first object is the container object. It must be “position:relative”. The next is a black background block, which could just be a div but the image works for me. It is aligned on the left. Object 3 is the light blue background block, aligned on the right. The last object is the gradient that transitions between them. Forcing it to align to center is actually a pain. I’ve used a trick here. Set its left margin edge to the center of the image (negative half its width), and then set left side spacing to 50%. I could do the same with the right. There are 4 more images for the satellite, command text, the engineer (me!), and the tolaris.com label. Each has a depth (z-index), where higher numbers are on top of lower numbers.
Getting Tarski to actually use more than one image requires re-writing some Tarski code itself. All from (wordpress_root)/wp-content/themes/tarski:
./functions.php – Around line 67, add a new line to call a new PHP source file.
require_once(TARSKIHELPERS . ‘/my_helper.php’);
./library/helpers/my_helper.php – Create this file, with your new function to include all the image lines. Make sure that each img tag has an id field matching the CSS objects.
function my_headerimage() {
$header_img_url_base = get_bloginfo('template_directory') . '/headers/';
echo "
<div id=\"header-image\">
<img alt=\"Header image\" src=\"".$header_img_url_base."/tolaris_level1_black.png\" id=\"header_image_blackbg\" />
<img alt=\"Header image\" src=\"".$header_img_url_base."/tolaris_level2_blue.png\" id=\"header_image_bluebg\" />
<img alt=\"Header image\" src=\"".$header_img_url_base."/tolaris_level3_gradient.png\" id=\"header_image_gradient\" />
</div>\n\n";
}
./app/launcher.php_tolaris – Around line 91, replace the function call to “tarski_headerimage” with your new function.
//add_action('th_header', 'tarski_headerimage');
add_action('th_header', 'my_headerimage');
Then upload your header images to the “headers” directory, where the other single-image headers are stored.
I’m sure there is a way to do this with the Tarski API, but this hack works for me. At least until I have to upgrade and port my changes in to the next release.
Tags: wordpress
-
Very slick. I’ve just recently set up a WordPress install for my resurrected blog, and while I like the theme I picked out it is very much fixed with. My only concern is that as someone who regularly has maximized browser windows on a 1920×1280 screen I’ll run into unreadably wide paragraphs. This seems to be the main advantage of fixed-width content, even though I am similarly not a fan – there is a legitimate maximum reasonable width for text because of how our field of view interacts with reading a paragraph. Too wide and you start to lose track of which line you’re on. I need to figure out some way to intelligently auto-column the text, I guess.
-
If your browser width exceeds your field of view, your problem might be that your browser width exceeds your field of view. :)
-
Very slick.
You should make it as a plugin :-)
-
Thanks for this article! Have you got same solution for tarski 3.0.3 version?
-
It’s funny you should bring that up. I’m planning to update everything to Tarski 3.0.3 in the near future. I’ll post when I’ve done so.
-
I’ve made my new site with your article and it’s works :) I use tarski 3.0.3. I found only one change. You wrote that
./app/launcher.php_tolaris – Around line 91, replace the function call to “tarski_headerimage” with your new function.
Since 3.0.0 version app/launcher.php file with functions.php file. So, now it’s only one file functions.php and “tarski_headerimage” locates in 188 line.
And I have one problem. My navigation bar disappeared. Just blank line. I don’t understand it…
-
See the upgrade guide:
http://tarskitheme.com/help/updates/
Tarski removed the internal header bar, in favour of the native wordpress one.
-
But I’ve made fresh installation of wp 3.1.2 and fresh tarski (3.0.3) theme.
I’ll try to fix it :) -
Thanks for help, Taylor! I found solution.
-
Oops :) Tyler.. sorry.
-
-
-
-
-
10 comments
Comments feed for this article
Trackback link: https://www.tolaris.com/2009/02/03/making-tarski-dynamically-resize-with-sliding-header-images/trackback/