The Karma Wizard :: The CSS WYSIWYG Web Design Editor for KarmaCMS, CMS (content management system) with CSS Layouts

Wizard Manual

Automatic Sections
XML
Adding Flash Manually
Flash Player

Automatic Sections

A little animation here and there has a way of taking a website from good to great. What's even better is combining the "wow" factor with accessibility. When insterting flash movies here a user who doesn't have flash installed (it happens though it's rare) will see the original content.

For instance, if you have a flash menu inserted and the user doesn't have flash, they will automatically see the text or graphical font menu. This is also good for search engines since no extra effort has to be made to see the menu.

We have provided four places where you can put add a little "bling" in your site while pulling content via XML and still keeping your site functional:

Main Heading
Main Menu
Main Photo
Page Titles

Each section has the following inputs to be filled:

SWF File (your-file.swf)
Disable - option to turn flash off after you've uploaded it.
Minimum Flash Version (e.g. 7)
Width (e.g. 750px)
Height (e.g. 250px)

XML

Notice: This is an advanced topic. A good knowledge of Flash and the Karma Wizard is required.

The Wizard provides an easy way to incorporating Flash effects on the Main Heading, the Main Photo, the Main Links, and the Page Titles. You simply need to create a SWF file and upload it into the appropriate section in the Wizard. The system will automatically handle the rest.

XML Configuration

The Flash movies that you create need to get their content by reading an XML file that will be provided through a HTTP query string that specifies the "f" variable. The "f" variable will tell the movie where it can find the XML config file, e.g.:

main_links.swf?f=/path/to/config.xml

You do not need to be concerned about the actual page — you just need to make it so that your Flash movie reads the 'f' variable to find the location of the XML config file, loads the XML config file, parses it, and does something with the XML data. (The XML formats for each component are shown in the next section.)

XML Config File Formats

Main Heading

The main heading XML format is very simple, just one tag:

<title>Site Title</title>

Main Photo

<photo>
  <scaled>http://domain.com/path/to/photo.jpg</scaled>
  <effect>http://domain.com/path/to/photo.jpg</effect>
</photo>

The "scaled" tag gives the URL for the photo that has been scaled to dimensions suitable for the Flash movie, but has not had any further effects applied. The "effect" tag gives the URL for the photo after the HTML-version effects have been applied.

(Generally speaking, the "effect" tag is probably of little use.)

Main Links

<menu>
  <item>
    <title>News</title>
    <url>/news/</url>
  </item>
  <item selected='1'>
    <title>Events</title>
    <url>/events/</url>
  </item>
  <item>
    <title>Forum</title>
    <url>/forum/</url>
  </item>

</menu>

For the menu, "title" is the name of the link, and "url" is where it should link to. If the attribute "selected='1'" is set on an item, it means the current page is the one the user is viewing. (You can use the existence of "selected" to apply special effects to the currently selected link.)

Page Title

Like the Main Heading, the Page Title XML format is also very simple.

<title>Page Title<title>

Adding Flash Manually

Flash that doesn't need to pull content and is for decorative purposes only can be placed uploaded in the Auxilary Files section of the Wizard and inserted by a Hook. Instead of the traditional object code that IE now treats differently, the following javascript can be used:

<div id="your-div-name"></div>
<script type="text/javascript">
	var fo = new FlashObject(
		"HookPath/file-name.swf",
                "", 
                "750 (width)",
                "150 (height)",
                "7 (minimum version)",
                ""
	);
	fo.addParam("wmode","transparent");
	fo.write("your-div-name");
</script>

Please be aware that you do not insert "(width)", "(height)", or "(minimum version)" into the code. They are they for instructional purposes only. In addition this works on KarmaCMS because we have the corresponding javascript function on the backend by default.

Flash Player

The look of the pop-up flash music player available through KarmaCMS can easily be customized. Here's how:

Download the photoshop template here .
Edit and save as .jpg. Be sure not to save the placeholders.
Open your design in The Wizard.
Select "Flash Effects" and upload your .jpg to the "Flash Player Skin" field.
Test and tweak if necessary.

Certain things such as the player controls, the scrollbars, and the placement of the song titles and "what's playing now" field can't be changed with this method.