Stefan Grambart

Terms of Use

Permission is hereby granted, free of charge, to any person obtaining a copy of Klaveer and associated documentation files (the "Template"), to deal in the Template without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Template, and to permit persons to whom the Template is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Template.
The Klaveer download link in the bottom right corner is clearly visible.
The provided sample imagery is for demonstration use only, and is not to be used for any other purpose.

THE TEMPLATE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE TEMPLATE OR THE USE OR OTHER DEALINGS IN THE TEMPLATE.

Getting Started

Installation

To install Klaveer, simply decompress the .zip file and place all the files/folders from within the expanded Klaveer folder into the root folder of your web hosting directory. They should include the folders Scripts, Style, Images, and the file index.html. Once the files and folders have been setup, they should be running exactly like the demo (link above).

Editing The Logo

Logos used on Klaveer are by default no more than 55px tall. To add your logo, simply replace images/img_logo.png with your own logo. If you wish to use a different file format or changethe name of the file, you'll have to update the img source on line 21 of index.html.

To use a logo taller than 55px, you must alter two css styles. In style/style.css, change the height attribute of #headerbg, and in index.html change the hardcoded height attribute of h3.toggler on line 21. Try to keep the logo at ~100px wide, unless you plan on removing the contact info to the right.

Editing the Colours

style.css is written so that any color or image attributes are at the start of the line, making them easy to find and replace. Klaveer uses the three-digit hexadecimal color codes, though six-digit work equally as well.

You will find that some colors, in particular, those associated with the main navigation links, are not available in the main CSS file. These can be found within scripts/accordion.js

Using the Accordion Sliders

Working with the Mootools™ accordion sliders is actually quite easy. There's only a few things you need to remember:

h3 class="toggler" is the header that controls how you open and close the slider.
the element tag denotes the copy which will remain hidden until sliding into view.

for more information on Mootools™ Accordion, please visit:
Mootools FX.accordion page

Editing the Colours

To properly use the Slimbox script, you'll have to first create tumbnails for all your images. The thumnail is the image you actually display, while the larger image gets called using a link. Adding rel="lightbox" adds the image to a gallery. If you'd like to keep more than one gallery (either to limit the key browsing, or to differentiate between types), then you'll need to add fel="lightbox[galleryName]".

By wrapping the thumbnails within a div with the class "thumblight" will automatically set the opacity of the image to 65%, whcih aniamtes to 100% on mouse-over.

For more information on Slimbox, please visit: Slimbox page at Digitalia