Tutorial: Set Up a Client’s Site to be Editable with Cushy CMS

If you design websites for clients you know that most clients these days want the ability to update the site themselves. Fortunately, content management systems make this possible. However, depending on the types of clients that you work with, you may find that sometimes going with a full-feature CMS is overkill for a client that only needs to update a few pages.

Each client has there own unique needs, and there may be times when you come across someone who is not interested in anything fancy, but they want a small website that will allow them to change the content of pages.

I do a good bit of work with WordPress, but for clients in this situation it’s not the best solution. Several of the non-tech-savvy clients that I’ve worked with have been intimidated by all of the options in WordPress, especially when they have no use for many of them.

For situations like this, Cushy CMS is an excellent option. With Cushy CMS you can easily give clients the access and ability to change content of a specific number of pages without everything else that they won’t need.

In this post we’ll walk through the process of setting up a website for a client to allow them access for editing. The basic version is of CushyCMS is free, and they also offer a pro account for $28 per month that gives you a branded version of the system so your clients won’t even know that it’s Cushy CMS. Everything we’ll be doing here is using the free version.

To put this into a real-world perspective, let’s assume the client is a service provider that needs a just a small website, maybe 5 pages, with basic information about the company and its services. There’s no need for them to be able to add new pages at this time, they just want to be able to keep the site up-to-date when information about the company changes.

For the purposes of this tutorial I decided to get a template from Theme Forest to use as the client site, and I’ve uploaded it to my site (of course, in the real world this would be at the clients URL, but for this tutorial we’ll just keep it at this domain). The template I’m using is Clean Biz.

Throughout the tutorial there will be many screen shots. If you want to see the full-size version, click on the screen shot.

Step 1: Create Your Account

If you have never used Cushy CMS before, you’ll need to create an account. With the account you’ll then be able to set up clients as “editors” and assign them the rights to edit their site. Creating the account is very easy, just go to the sign up page and enter your name, email and password.

Step 2: Add Site

Once you’re logged in, you’ll see the options to add a site or add an editor.

To start with, we’re going to add the site, so click on the “Add Site” button. On the next page you’ll enter the client’s URL and their FTP data. If you don’t have this information, you’ll need to get it from the client before you can get everything set up. Next to the “Path” field, click “Choose” and find the root folder. When you’re done, click on “Add Site” and it should tell you that it was a success.

Step 3: Assign Some Pages

Now that the site has been successfully added, we’re going to assign 3 pages that the client will be able to edit. Of course, you can do more or less depending on the clients needs. We’re going to assign the home page, about page, and services page. To do this, click on the link that says “Assign pages to site” (below the domain).

To do this you’ll enter the full URL of the page, give it a name that the client will understand, and select the path to the specific file as it is located on the server.

Now, repeat this step for however many pages you want to assign. In this case, I have done this for the home page, about page, and services page.

Step 4: Assign Editor

Now that we have the site and pages added, we’ll need to give the client access to these pages. As the designer, you’ll have access to everything that you set up, but you’ll be able to assign each client to specific sites. So if you have multiple clients using Cushy CMS, you’ll be able to access all, but they’ll only be able to access their own sites and pages.

After you complete step 3 you’ll be on a page that looks like the screen shot below. Click on the green button for “Add Editor.”

Here you’ll enter the client’s name and email address (they’ll be emailed the login information) and choose which sites and/or pages the editor will have access to. In this case we’re choosing all three of the pages that have been set up. When you’re done, click “Add Editor” at the bottom of the page.

After you’ve added the editor, you will see a message stating that it was a success. Now click on a link to one of the pages below. You’ll get an error message telling you that no editable elements have been defined. Cushy CMS works very simply. If an element, such as a div for example, has a class of “cushycms”, it will be editable. Nothing else will be editable. So, since we’ve uploaded a standard template we need to also add some classes to each of these pages to allow editing.

Step 5: Add cushycms Class

We’ll open up the index.html file and add a class  (class=”cushycms”) to the content div that contains all of the content in the main area of the page. You can also add title elements to make it more organized when editing, so we’ll add title=”home content”. Make sure that you add the class to an element that contains everything that needs to be edited. You can add multiple classes per page.

We’ll also do the same thing for the about page and the services page, and we’ll upload all of these pages to the server. I’m also going to add the class=”cushycms” to the sidebar of the services page so that we’ll be able to change the photo. (click on the image below to see a larger version). Now that the class has been entered, we’ll be able to edit anything that is in the content div. Back in Cushy CMS, click the try again button.

Step 6: Edit the Content

Now, we’ll select the services page from the list of pages that have been set up, and you’ll be able to edit.

You’ll notice here that it keeps the h2 tags and paragraph tags in tact. All of this is editable. New headers can be added, bold or italics can be applied to text, links can be added, etc. The basic functions you would expect are all there.

We’ll change the h2 tags to give specific information rather than Service 1, etc. We’ll also apply bold to a few words and insert a link.

When you’re done, click publish page.

Here is what the services page looked like before the edit.

Cushy CMS now interacts with the server and the changes will take effect. Below is a screen shot of the page after it has been edited.

Step 7: Change the Photo

It’s also nice for clients to be able to change photos from time-to-time, and since we added the cushycms class to the containing div, we’ll be able to update the photo in the sidebar of the services page.

So, we’ll choose the services page from the dashboard and we’ll see something like the screen shot below.

Now, if you click on the image to select it, and click on the button to add or edit an image (it’s a picture of a little tree next to the “insert table” option), you’ll be able to upload a photo to the server and add it to the page. Alternatively, if the image you want is already on the server you won’t have to upload it.

Click on the upload tab and browse to find the image that you want and click “send it to server.” The image is now uploaded and plopped in that spot of the page. Choose a width and enter it, the height will automatically be adjusted (or vice versa). Click “ok” and you’ll see the change.

We’ve now been able to update the text and the photo of the page.

In this case I have worked through the process while being logged in as the designer, but the client would be able to do the same things after they get their login information by email. So now they have a small website that they can easily maintain on their own without any technical knowledge.

At the Cushy CMS homepage they also have a brief video that walks you through the process, so be sure to check that out if you have any interest in using the CMS.

Published January 15th, 2009 by Steven Snell