Wizard Manual

What's What?  
The Karma Wizard is NOT where you enter your content. You enter your content such as mp3's, photos, text, etc., in your site's content management system, KarmaCMS, that can be found by going to http://yourdomain.com/!admin then clicking "CMS".

The Karma Wizard is intended for those wanting to change fonts, colors, etc. or build their own design around KarmaCMS.
Working With One HTML Skeleton

What's a little unusual about The Karma System, is that everything you see is based around one HTML skeleton. Through CSS (and a little javascript behind the scenes) all the layouts you see listed in the layouts tab of the control panel are possible. You cannot alter the HTML, though you can add to it if needed through hooks. For optimal search engine optimization, we've chosen to place the teasers after the content and before the footer.

Layout Variations

There are certain divs that won't appear in the source unless they are installed in the CMS. Here's a chart of what it is, where it is installed and what happens to the layout if it's not there.

DivInstallation AreaDeletion Effect Main PhotoManage DesignsMost layouts will auto adjust fill the void though some such as K-1 will keep the space open. Main LinksMain PreferencesNavigation Missing, but layout adjusts to fill the void. Main Link Group 2Main Preferences by inserting the dashed line.Layout Adjusts TeasersMain PreferencesDepends on layout. Teaser Group 2Main Preferences by inserting a dashed line.2 column layouts auto adjust, 3 column keep the space open. Teaser TitlesModule Preferences/Teaser PreferencesAdjusts to fill void

Flexible Layouts

Some layouts can't be truely dynamic unless they are ordered in the source a certain way. Because of this we've developed a system where we pre-arrange a few of the following divs among themselves:

  • Header
  • Main Photo
  • Main Links

Each of these divs take turns coming first, second, and third in the source depending upon what needs to be done.

The Skeleton
Every module's content content has it's own unique HTML which you can see by viewing source, but the following is the skeleton used on most every page/module except the pop-ups, splash page, and flash intro:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>The Karma Wizard :: The Easy Web Design Editor for Web Designers</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/sitebuilder/style/skeleton/2/main.css" />
</head>

<body class="module_type" name="module_name">
<div id="header_content_footer_wrapper">
<div id="header_content_footer_wrapper_2">

<div id="site_photo"><img src="/" alt="" /></div>


<div id="header"><h1>Your Site Title Here</h1></div>

<div id="main_links">
<ul class="main_link_group" id="main_link_group_1">
<li><a href="/" class="first 1 odd" id="link_1">link 1</a></li>
<li><a href="/" class="2 even" id="link_2">link 2</a></li>
<li><a href="/" class="3 odd last" id="link_3">link 3</a></li>
</ul>

<ul class="main_link_group" id="main_link_group_2">
<li><a href="/" class="first 1 odd" id="link_4">link 4</a></li>
<li><a href="/" class="2 even" id="link_5">link 5</a></li>
<li><a href="/" class="3 odd last" id="link_6">link 6</a></li>
</ul>

<div id="content_wrapper">
<div id="content">
<h2 id="page_title">Your Page Title</h2>
</div>
</div>



<div id="teasers">

<div id="teaser_group_1">

<div class="teaser first odd 1">
<div id="teaser_heading"></div>
<div id="teaser_content"></div>
</div>

<div class="teaser even 2 last">
<div id="teaser_heading"></div>
<div id="teaser_content"></div>
</div>

</div>

<div id="teaser_group_2">

<div class="teaser first odd 3">
<div id="teaser_heading"></div>
<div id="teaser_content"></div>
</div>

<div class="teaser even 4 last">
<div id="teaser_heading"></div>
<div id="teaser_content"></div>
</div>

</div><!-- closes div#teaser_group_2 -->
</div><!-- closes div#teasers -->

<div id='footer'></div>

</div> <!-- closes div#header_content_footer_wrapper_2 -->
</div> <!-- closes div#header_content_footer_wrapper -->
</body>
</html>



Understanding The Layers

The many different layer divisions of Karma's HTML skeleton can be a little confusing to those who have never dealt with web design. Some of the layer divisions such as "body", "primary wrapper" and "secondary wrapper" all start at the same place at the top and lay directly overtop of each other.

Some divisions that exist on the same plane as others will start right below or right beside their neighbor. I like to think of it like a box within a box within a box with several little boxes inside the last big box to be stacked.

All layers are present at all times, but you can choose not to place style on a particular layer division. If you choose not to put a background color or image on a layer division, the underlying style will show through.

"Style" encompasses everything you would do with the wizard such as setting background images, text color, fonts, padding/margin, etc.

Karma CMS Division Example
Guidelines & Gotchas

General Tips

  • When specifying sizes for margins and padding, be sure to use the appropriate dimensions at the end, such as '2px' or '1em'. Simply putting the number '2' will not work reliably.
  • If "zeroing out" a value, use a dimension at the end such as 0px or 0em. "0" alone is interpreted as no value by the wizard.
  • When uploading fonts, you must use either TrueType (.ttf) or OpenType (.otf) fonts. Other types of fonts will not work.
  • If you would like to get rid of a certain background image or graphical font, find the layer/division where it is applied and set "disable: yes" in the nearby dropdown box. Click [apply changes] to see the effect.

Defaults

Many of the layouts have style defaults on certain elements. They won't be automatically apparent in the control panel, though you can override them by placing a new setting in the appropriate place. Here's a list of the more common ones:

Div/ElementDefault Style
Header.25em padding on h1, 150px high and 50px top padding on h1 when fixed, centered text
Main Link Group.25em padding, centered text
Individual Main Links.25em padding, centered text
Columns (left or right)200px wide
Main Content200px Margin left or right depending on layout, padding .5em
Teaser Titlespadding .25em, centered text
Teaser Contentpadding .25em
Footerpadding .25em

Server Generated Item Don'ts

Server generated items: header, main links, page headings, teaser headings.

  • The main menu cannot be rotated as a whole unless it is done in flash.
  • Server generated items that contain more than one word must all be the same color. For instance, a menu item called "about us" cannot have a different color for "about" and "us".
  • Menu items and their corresponding rollover must be the same word or phrase. For instance the link cannot say "about us" and rollover to say "bio".
  • If the menu is comprised of graphical fonts, they must be the same color on every page. For instance, they can't be server generated and be white on one page and blue on another. This can only be accomplished if the menu is plain text.
  • Anything that can only be accomplished by using an image map cannot be automatically generated by the server.
  • Server generated images can only be animated via Flash/XML (no animated gif's).
  • The background color for both groups of the main links have to be the same if server generated fonts are used. Same goes for the teaser titles.
Getting Started

Starting From Scratch

  1. Launch the Karma Design Wizard Control Panel by clicking the spinning image.
  2. Choose a layout from the drop down box.
  3. Choose a layer/division to work with such as the "body". Refer to the "understanding layers" section for more details regarding where the layer divisions appear and how they can be manipulated. Try experimenting by changing the background and text colors.
  4. Choose another layer/division to work with. Be aware you don't have to fill in every input on every layer or even work with every layer.
  5. Click [apply changes] at any point in the process to see your work.
  6. When finished, choose [save design] from the buttons below and save to your computer.
  7. Upload to your KarmaCMS enabled site!

Modifying a Pre-Made Design

Only designs that were previously done with the wizard can be modified by the wizard. These files end in .karma.

  1. Launch the Karma Design Wizard by clicking the spinning image.
  2. Click [load design] and find the .karma on your computer. If you haven't already downloaded a design to modify, do that now then repeat this step.
  3. Click [submit]
  4. Make your modifications and click [apply changes] at any point to see your work.
  5. When finished, choose [save design] from the buttons below and save to your computer.
  6. Upload to your KarmaCMS enabled site!
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