Click The Links Below!
Colour Schemes
Bonus 'Hello World' Example
Background
One of the aims of this design was to make it easy for users to be able to customise it according to their taste. This is why it uses mainly neutral tones. The header image is easy to replace and I have provided some example photos which you can set by editing the CSS file by editing the background attribute for the '#maincol' section in the CSS file. I strongly encourage you to change this image. You may even want to use different images for different sections of the site.
This design is pretty much open source, I don't mind what you do with it. You can freely modify it and do as you wish. I would prefer it if you could keep the footer links to my sites as credit, but this is personal preference and I'm not forcing you to do this. If you redistribute this template, please retain the credit to me and any photographers in some sort of readme.
Compatibility
This theme has been tested to work on Firefox, and Internet Explorer 6. It also appears to work on IE 7, and IE 5.5 and 5.0 on Windows, however IE 5 rendering is not pixel perfect, but is pretty good. IE on the Mac has not been tested. This should work fine in Konqueror and Safari.
The design makes use of the latest XHTML 1.1 and CSS 2 standards
Source Content
There is an original PSD file with this design, so you can modify things.
I have provided some other example headers from photos found at Stock.Xchng. If you use these photos, it would be good if you could provide a link back in the footer to this site to credit the photographer for their effort. The photos are released as open source. You can see the originals by clicking the side thumbnails.
Contact & Custom Work
If you want to contact me, my email is jase -[at]- virtualfunction dot net. You can also contact me at jason -[at]- hybd dot net as well. I am can do design and web development work (I use Ruby / Rails for server side / database work), but I am very busy these days so I can not do this for free! However, I'm more than happy to make modifications of this template for you for small negotiable fee (provided I have the time)... This is certainly worthwhile if are not experienced with graphics and want to retain a professional look.
If you have any queries, I'll try and do my best to answer them. Drop me a private message, or visit my site, Virtual Function
Customisation
As stated, the aim of this was to make this theme easy to customise. Below outlines some areas. Please read fully as this outlines in detail how you can customise things properly so that your changes look professional, and thus don't ruin the overall appearance of your site.
General
Feel free to delete or alter any headings in the image headers sub folder that you don't use or decide to change.
Switching layouts.
The theme has both a one and two column layout. You can set this by altering the class from one_column to two_column in the body tag.
Custom logo / Site name
You will want to replace the text on the side, then feel free to use your own text, logo or corporate branding. I did not supply the original font as I do not know what the license is for it, but it is called TwCenMT, I use the Regular, Bold and Condensed versions. I can't remember where I got it though. I think it came with Photoshop or MS Office.
If you edit this, you should make sure the background transparent, and make sure that the anti aliasing is set to be 'white' on the edges, so you don't get any rough blending.
After modifying this, save it to logo.gif in the images folder. You will need to update the #logo part of the CSS file to change the height to match the new logo.gif file you have saved. You will also want to change the <h1 id="logo"> tag so the text matches your graphical text. This is important for accessibility, so people who depend on screen readers know what the text is. Likewise, it is important for Google as you will probably want the logo text to be a keyword that Google indexes.
In decent browsers, such as Firefox, Safari and Opera, and most thing not IE 6 and lower, the logo on the site should stay fixed when you scroll which is a nice bonus.
Images
As stated, there are a number of header images provided. I strongly suggest you take the trouble to look for decent images for this. I have provided some decent alternatives for you to use as a starting point, however if you are using the template in a commercial environment it is worth spending time getting quality stock art for this. You will need to resample any art work to fit 456px by 190px. It is worth spending a couple of dollars on some nice photos at places like istockphoto.com, or if you have time looking for good open source photos at places like http://mourgefile.com & http://www.sxc.hu
When you find images you like, I tend to use the thumbnail images from stock art sites if you have to pay for the full size image, and stretch it to see if it looks OK composition wise with the design. If your images have a very contrasting palette, you should consider modifying the colours in the CSS file to use swatches of colour from your chosen image.
When resampling, ensure you keep the scale/aspect ratio the same, and use source images that are larger than the header it's self. You need ensure your resampling is using some sort of interpolation to make sure the image doesn't look coarse/aliased.
Colours
The main screen CSS file doesn't hold any colour or branding content. You can set the colour palette by using one of the colour CSS files. This will add colour. Within these files you can also alter the header image, most have some alternatives already there for you to play with. You will want to set a background for the maincol element (The CSS files include a comment). The CSS files in the headings sub folder show examples of this with the stock art provided.
The CSS style switcher I used here was based on the article by Paul Sowdev at alistapart.com. If you decide to keep using this, you should find that user styles should persist between pages, unless your users decide to switch off cookies.
Printer Support
Isn't is a pain when you want to print something and the damn page cuts of the last two letters of every line? Well, don't worry, we've added a different print style, so that your page will print nicely. It's not very fancy, so you may wish to modify it to have more branding, or look a little more fancy in places. However, you don't have to do this and you be assured the default print layout will be clear and not use excessive amounts of ink on silly bits of imagery.
