17
Chapter 2: Customizing stretch templates
Stretch templates (or “fluid” templates as they are often called) are slightly more
restrictive to customize than fixed width templates, because they stretch to fit the
window of the browser viewing them.
We need to use a different approach when customizing stretch templates, ensuring that
images, backgrounds and other customizations can adapt to the expanding (or contracting)
widths of the browsers viewing them!
Creating a custom header for stretch templates
As I mentioned earlier in this eBook, it is a little more difficult to effectively
create a custom header for stretch templates as the width of such templates is
fluid. However, with a few simple tricks, you can easily create a unique, clickable
header for your blog which will look great no matter how wide (or narrow) the
browser viewing your blog.
To demonstrate these techniques, I’m going to use the Minima Stretch template, though I
will also include notes applicable to the Denim Stretch template too.
One of the latest trends in web design is the “grunge” effect, using darker colors and
eroded text. I will recreate this effect in this demonstration template, while at the end I
will also display a lighter “Web 2.0” theme which can easily be achieved using the same
methods.
The best way to use a custom header for a stretch template…
…is to create a logo or header image with a block background color !
This ensures that your header will appear normally in any size of browser window, whether
this is a narrow monitor or widescreen laptop.
An effective method is to use a logo or badge, alongside your blogs’ title. If you ensure the
width of the whole “banner ” is no wider than around 700px, you can be certain that the
whole header will display properly in older browsers.
Chapter
2
18
Creating the custom header
I used Photoshop to create the header for this demonstration, though you could just as
easily use GiMP, CorelDraw or your favorite image editing program10.
Firstly I c