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.

Free Account

Pro Account


Free Account

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">

Here's a video showing how to get started with CushyCMS:

» VIDEO: How to set up and edit your site with Cushy in just 5 minutes

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 &copy;

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;

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.

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.

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.

 

Pro Account

Repeatable Elements

Use of repeatable elements in CushyCMS can be extremely powerful. First step is to put the editable class on your outer repeatable element, available tags are a <ul>, <ol> <table> and <dl>. From here, cushy will look inside that element and determine what elements are deemed "repeatable", e.g. an <li>, <tr> or <dt> tag. Once that element is found, any editable tags inside that element will be grouped together so that any "repeating" of the outer element will contain all editable elements inside.

Consider the following example:

<ul class="cushycms">
  <li>
    <p class="cushycms">This will become editable</p>
    <p>I'm not editable.</p>
  </li>
</ul>

Here, the <li> tag contains an editable <p> tag and a non-editable <p> tag. When the editor chooses to "repeat" this <li> CushyCMS will make a clone of the entire tag, including both <p> elements, even though the editor only has access to edit one of them. You can have as many editable tags inside your repeatable element as you want, or you can just make the repeatable element editable as a whole.:

Here is a video showing how to implement a repeatable region.

» VIDEO: Repeatable Regions

Overriding images / uploads

Use the checkbox on the assign/configure page screen to toggle this feature. Once enabled, any new images for your CushyCMS <img> tags will keep the same filename. Any images or files uploaded via the WYSIWYG editor will also keep the filename they had during the upload. This is useful for things like price_list.pdf or similar, but it also means the editor is in full control of what the file will be called on the server. You will need to be careful in case your editors upload a file named print.css or logo.gif or similar that could ruin your site. For that reason we recommend only using this setting when you are also using a custom upload path.

Custom Editable Class

As a pro user, you can define your own editable class instead of the traditional cushycms or clienteditor classes. You can even set this per editor. This enables you to giving one editor access to certain sections of a page whilst also giving a different editor access to other sections. Take the below code for example:

<span class="cushycms-ferris">Only Ferris can edit this.</span>
<span class="cushycms-cameron">Only Cameron can edit this.</span>

Here you can see the custom classes are cushycms-ferris and cushycms-cameron. These could be mycompany-ferris if you wish. You can also just set each editors custom class to be just "mycompany" if you don't need any of the complicated authorisation techniques. It should be noted that these classes also work with the content overrides, so mycompany-ferris-html would work as expected.

Branding and Styling

Here is a video showing how to customise CushyCMS to fit your brand, or your client's brand.

» VIDEO: Branding, Styling and Cloning

Page Cloning

As a pro user you have the ability to let your some or all of your editors create new pages based on the content from existing pages. You can enable this when adding an editor or editing the permissions of an existing editor. Enabling this will enable a clone icon next to each page in the editors control panel (this icon is already visible to the designer of the page). The editor will be prompted for the name of the new page and a filename will be generated based on that name. The new page will be an exact clone of the old page, which the editor can then edit accordingly.

Custom Welcome Email

As a pro user you can set a custom welcome email template. This is done in your user preferences, just below where you set your custom domain and choose other pro features such as branding. There are a number of variables that will be interpolated into the email, such as the editors name, email address and system generated password. We obviously recommend including at least the password variable.

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 cushy login to view the feeds. If your reader doesn't support this (e.g. Google Reader) then a workaround is the freemyfeed service.