Designer Documentation

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

This page documents all the available Cushy template options.

Basic Overview

Cushy will intelligently edit any element you place a css class of cushycms on.

<h1 class="cushycms" title="My Heading">This will become editable</h1> 
<div class="cushycms" title="Main Content">
  <p>More editable stuff here...</p>
</div>
<p>I'm not editable.</p>
<img class="cushycms" src="foo.jpg" alt="I'm an editable image!" />

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

If your element already has a class name you can still apply cushycms to it:

<div class="whatever cushycms">

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="cushycms" title="Main Heading">This will become editable</h1>

Cushy will automagically grab labels from the following attributes where available:
title, alt, id

Editing Images

Cushy 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="cushycms" 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="cushycms" 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="cushycms" alt="Photo" />

The uploaded image will not be resized at all.

Uploading Files

The Cushy 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 cushy 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

Cushy uses several different editing methods depending on the type of content. Cushy 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="cushycms-text"

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

class="cushycms-html"

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

class="cushycms-wysiwyg"

Same as above, although the editor is presented with buttons for performing basic tasks such as creating lists, links, etc.

class="cushycms-xml"

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

Using Cushy with Dynamic Languages (PHP, ASP, etc)

Cushy 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 cushy 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="cushycms">Contact Us</h1>
<div class"cushycms">
  <p>Editable content here...</p>
</div>

Above: contents of content_static.html.

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

Character Encoding

Cushy 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

Cushy 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 Cushy that is NOT classed as XHTML (full list of elements here) will be treated as XML.

<product>
  <name>Banana</name>
  <price class="cushycms">$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 cushycms-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.

Whatever feed reader you use will need to support authentication as it will request your cushy 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 Cushy can't edit. Below are some creative examples:

<script type="text/javascript" class="cushycms">
  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="cushycms">2140</span> so far</p>

Allow editing of just a single figure or word.