Designer Documentation

CymbitCMS works by FTPing into your site and then looking for specific CSS classes applied to page elements. Based on the content it finds, Cymbit will then present the most sensible way of editing that content.

This page documents all the available Cymbit template options.


Basic Overview
  
Cymbit will intelligently edit any element you place a css class of cymbitcms on. 
<h1 class="cymbitcms" title="Heading">This is editable</h1>
<div class="cymbitcms" title="Main Content">
  <p>More editable stuff here...</p>
</div>
<p>I'm not editable.</p>
<img class="cymbitcms" src="foo.jpg" alt="Editable image!!">

Tip: Pro users can specify a class of 'clienteditor' as an alternative to 'cymbitcms'.

If your element already has a class name you can still apply cymbitcms to it: 
<div class="whatever cymbitcms">


Labelling Fields
  
Help your editors identify what section they are editing by applying labels to your fields. Simply use the title attribute of the editable element. 
<h1 class="cymbitcms" title="My Heading">This is editable</h1>
Cymbit will automagically grab labels from the following attributes where available:
title, alt, id


Editing Images
  
Cymbit can allow your editors to change the images on a page. It will look at the height and width of your image tags to intelligently resize the file to fit the area. 
<img src="1.jpg" class="cymbitcms" width="250" height="100" alt="Photo" />

The uploaded image will be resized to a width of 250px and a height of 100px. The image will also be cropped if necessary.

<img src="1.jpg" class="cymbitcms" width="250" alt="Photo" />

The uploaded image will be resized to a width of 250px. The height will maintain its ratio.

<img src="1.jpg" class="cymbitcms" alt="Photo" />

The uploaded image will not be resized at all.



Uploading Files
  
The Cymbit WYSIWYG editor allows users to upload local files via the Link and Image toolbar buttons (note the Upload tab on the popup dialogue).

Initially these files are stored temporarily on the cymbit server but are then transferred to your FTP server upon page publish.

By default these files are published to the same directory as the page, however this may be customized via the Configure Site page.


Overriding Content Types
  
Cymbit uses several different editing methods depending on the type of content. Cymbit will intelligently pick a method based on the container element. However we realize there may be times when you want to force a certain type of content. If so, use one of the alternative classes below: 
class="cymbitcms-text"

Edits the content as plain text. Example usage: editing server-side code or if you prefer writing your html by hand.

class="cymbitcms-html"

Any special characters entered will be converted to html entities. Eg: � becomes ©

class="cymbitcms-xml"

Any special characters entered will be converted to xml entities. Eg: < becomes &lt;


Using Cymbit with Dynamic Languages (PHP, ASP, etc)
  
Cymbit can sometimes have a hard time deciphering documents when they contain a mix of html and server-side scripting such as PHP.

For this reason we strongly suggest placing cymbit editable content in a stand-alone static file that is then included by your scripts.

For example: 
<html>
  <head><title>Contact Us</title></head>
  <body>
    <? include("contact_static.html"); ?>
  </body>
</html>

Above: contents of contact.php.

<h1 class="cymbitcms">Contact Us</h1>
<div class"cymbitcms">
  <p>Editable content here...</p>
</div>

Above: contents of content_static.html.

In this scenario you would point Cymbit at the contact_static.html file to edit.


Character Encoding
  
Cymbit outputs special characters (such as non-western alphabets) in the versatile UTF-8 format. To support this format please ensure the following appears in the head section of your html pages: 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Learn more about the advantages of UTF-8.


XML Elements
  
Cymbit has support for XML elements. The content entered in the edit box for XML elements will be correctly XML encoded so that your XML won't be invalid. Any element encountered by Cymbit that is NOT classed as XHTML (full list of elements here) will be treated as XML. 
<product>
  <name>Banana</name>
  <price class="cymbitcms">$12.99/kg</price>
</product>
If you are having trouble with elements in your XML being picked up as XHTML (because they have the same name), check out the section on overriding content types. Basically you can use a cymbitcms-xml class type to force your element into XML mode.


RSS Feeds of Page Changes
  
Pro users gain access to special RSS feeds to stay informed of changes to their sites and pages.
  • All changes: this feed is available on your default control panel page
  • Changes to a site: this feed is available from the Configure Site page
  • Changes to a page: this feed is available from the Revision History page
Whatever feed reader you use will need to support authentication as it will request your cymbit login to view the feeds. If your reader doesn't support this (e.g. Google Reader) then a workaround is the freemyfeed service.


Tips & Tricks
  
Keep in mind there isn't much that Cymbit can't edit. Below are some creative examples: 
<script type="text/javascript" class="cymbitcms">
  alert('See, you can even edit javascript!'); 
</script>

Editing javascript. An example may be your Google AdSense code.

<p>Our charity has raised $<span class="cymbitcms">2140</span> so far</p>

Allow editing of just a single figure or word.