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.

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. Example: © becomes &copy;

class="cushycms-wysiwyg"

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

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 contact_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.

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.

We'd love to hear how you're using Cushy. Drop us a line some time.