Wizard Manual

What's What?  
Why so many?

Some may wonder why Karma's HTML has so many wrappers. Minimalists will point out that no wrappers are needed when they construct their sites by hand. That may be true for one specific layout. However, to create the maximum number of layouts from one source, a few extra wrappers are needed hence the Primary Wrapper and the Content Wrapper.

The Secondary wrapper exists to enhance design options. For instance, with two wrappers you can put a graphical "border" that repeats down the left side and the right side of the site AND have it be liquid or fixed width.

Primary & Seconday Wrappers

The Primary Wrapper and Secondary Wrapper begin immediately after the start of the body and close immediately after the footer. They enclose all the content and all other divs generated by KarmaCMS.

Unlike the body they don't naturally fill up the entire height of a page, instead they only go as far as the content. Therefore if you have a page without a lot of content, whatever background you've placed on the primary and secondary wrappers will stop where the content ends. An example of this is pictured with the white representing the body.

To force the primary wrapper to fill the entire height of the viewport no matter how short your content, this must be placed in the Custom CSS:

html, body { height: 100%; } div#header_content_footer_wrapper { min-height: 100%; }

...then in the IE6 only section to compensate for it's lack of min-height support:

div#header_content_footer_wrapper ( height: 100%; }
Special Functions

Fixed Width

The primary wrapper's main function is to easily create a centered and fixed with site. You do this by entering a pixel width (e.g. 750px) in the dimensions input box.

By default the site will center, but this can be turned off by setting the following in the Custom CSS:

div#header_content_footer_wrapper { margin: 0px; }

Faux Columns

You can create the illusion of columns that stretch all the way down to the footer regardless of height. Here's how it's done:

  • Create an image that is exactly as wide as the column.
  • Position it to the same side as the column.
  • Repeat vertically.

Extra BG Layer

If an extra background layer is needed such as a very long drop shadow over a texture on a fixed width site, the secondary wrapper can contain the width instead of the primary wrapper, and the primary wrapper can stretch to the left and right of the viewing window.

However, if this technique is implemented IE6 will cause you trouble. For whatever reason it needs the content wrapper to be a pixel width instead of 100% and the negative margin needs to be 1px less than the width to make the teaser group 2 and/or footer clear the teaser group 1 and/or content. All this can be done in Custom CSS.

Content Wrapper

The content wrapper only exists for technical reasons. However, it definitely comes in handy if you need a background that extends all the way across the site and under the main menu which expands in height. When the main menu grows the background here will naturally be pushed down.

Launch The Karma Wizard
General

The Main Links are the principal navigation in your website to other "pages" and arguable the most important part of your site. Depending on your layout they can appear in different places; some are horizontal and under the header, some are vertical and above the teasers, others are at the very top of the page, and some are split into horizontal and vertical groups.

The links can be split into two groups in the KarmaCMS main preferences by inserting the dashed line, "---". When they are split they are controlled by main links group 1 and main links group 2. The dashed line isn't inserted by default so all links are in group 1 unless you change that.

In every situation the main links are a variable height so a height should never be placed on them. Anything under this div should be able to move down naturally as the main links expand. Usually it is the flexible nature of the main links that throws designers not experienced with dynamic design for a loop.

Press Teaser
More Quotes