Welcome to Smooth CMS

Smooth CMS is a content management system that integrates with existing static HTML websites and makes them editable.
The editing functions in Smooth CMS are reduced to the essentials: texts can be edited, pictures can be uploaded & exchanged via drag & drop and new content areas can be added.
Smooth CMS is based upon Coast CMS and has been extended and developed on to bring an easier platform for use for everyday people.


Features

Inline Editing

No confusing administration backend. Content can be edited directly in the website layout.

No Database

Smooth CMS works without database. All changes are stored directly in the HTML file.

Perfect

Smooth CMS is ready for use quickly. Upload CMS folder, enter name & password, set editable areas. Finished.

Key features

  • Edit texts
  • Image exchange by drag & drop
  • Client-side image reduction
  • Automatic backups

Optional features

  • Add & Remove Content Areas
  • Reorganize content areas with drag & drop
  • Duplicate / delete pages
  • HTML editor

System Requirements

  • Website with HTML5 doctype
  • Website in UTF-8
  • Webserver with PHP 5.3.1+ & GD library
  • A current browser

How To

Create a "normal" static HTML5 website.

  • All .html files must be in a directory (not in subfolders)
  • Use the HTML5 and the UTF-8 character set

Specify the editable areas.

  • Editing a section is easy:
  • Just add your class in the desired <div> tag to the class "editable" .
  • From <div class="content"> will <div class="content editable"> .
  • From <section> , <section class="editable"> .

  • In addition, headlines and paragraphs can be made editable.
  • For example, <h1 class="editable_line"> or <p class="editable_line">

  • To make a picture interchangeable, just class="editable_image" tag to class="editable_image"
  • From <img src="image.jpg"> <img src="image.jpg" class="editable_image"> .
  • In the backend, images can be exchanged as easily with drag & drop. Images are automatically uploaded, scaled to the right size, and cropped if necessary. Currently, JPGs, PNGs, GIFs and PDFs are supported!

Install Smooth CMS on your web server.

  • Download SmoothCMS.zip
  • Open "_settings.php"
  • Change user name & password
  • Rename the file "_settings.php" into "settings.php" (without underline)
  • Upload the folders "cms", "uploads", "backups" and the file "cms.php" via FTP to your webserver
  • Change the rights of the folders "uploads" and "backups" and all .html files to 0777
  • Finished.

Log in

  • Go to "www.yoururl.com/cms" and login.

Advanced Features

In addition to the basic features described in "How To," Smooth CMS also provides advanced features. These are not as easy to implement as the basic functions, but are not needed in many cases.

Recurring contents

  • A "recurring content area" can be, for example, a news message in the news area. So a recurring sequence of individual elements. Headings, flow text & images.
  • To define a "recurring content area", save the source text of the area in an HTML file eg in the folder "cse" and name it eg "news_section.html".
  • For example, the file might look like this:
  • <div class="news_section">

  • <div class="news_text">
  • <h2 class="editable_line">Headline</h2>
  • <p class="editable_line">Text</p>
  • </div>

  • <div class="news_img">
  • <img src="img/spacer-lightgrey.jpg" width="120" height="120" class="editable_image">
  • </div>

  • <div class="clearer"></div>
  • </div>

  • Then, determine where you want this area to appear on your site. Define a surrounding div and add the following information:
  • <div class="content_section_wrap" data-cs-src="cse/news_section.html" data-cs-title="Adding a news message" data-cs-pos="top">
  • ...
  • </div>
  • With class="content_section_wrap" you determine that within this divs recurring content areas may be placed.
  • With data-cs-src="news_section.html" you specify the source of the individual content area.
  • With data-cs-title="Adding a news message" news message data-cs-title="Adding a news message" you can define the label of the button, which allows you to add a new content area.
  • And with data-cs-pos="top" you determine whether the following content areas should be inserted at the top, bottom ( data-cs-pos="bottom" ) or anywhere ( data-cs-pos="any" ). With data-cs-pos="draggable" , content areas can be moved by drag & drop at any time.
  • If you want to have editable content areas already displayed on the site, you must be surrounded by the following code:
  • <div class="content_section_item">...</div>

Gallery

  • An editable image gallery can also be created in the same way. For this you need a file with the following content:
  • <img src="img/spacer-lightgrey.jpg" width="120" height="120" class="editable_image" data-type="thumb_and_big_image">
  • The file you save in the directory "cms / cs /" eg under the name "gallery_img.html". Then, determine where you want the gallery to appear on your website. Define a surrounding div and add the following information:
  • <div class="gallery_wrap content_section_wrap" data-cs-src="cse/gallery_img.html" data-cs-title="add a picture" data-cs-pos="top">
  • </div>

Codes

Editable (text) areas

  • <div class="editable">
  • <section class="editable">
  • Texts can be edited and formatted extensively.

  • <p class="editable_line">
  • <h1 class="editable_line">
  • <h2 class="editable_line">
  • ...
  • <h6 class="editable_line">
  • Texts can be edited & formatted to a limited extent.

Images

  • <img src="x.jpg" class="editable_image">
  • The image is trimmed to the size of the original image.

  • <img src="x.jpg" class="editable_image" data-option="fixed_width">
  • The image is proportionally scaled. The width of the original image is taken over.

  • <img src="x.jpg" class="editable_image" data-option="fixed_height">
  • The image is proportionally scaled. The height of the original image is taken over.

  • <img src="x.jpg" class="editable_image" data-option="fixed_width" data-width="600">
  • The image is scaled proportionally to a width of 600px, regardless of the size shown.

  • <img src="x.jpg" class="editable_image" data-option="fixed_height" data-height="600">
  • The image is scaled proportionally to a height of 600px, regardless of the size shown.

  • <img src="x.jpg" class="editable_image" data-type="thumb_and_big_image">
  • A large version of the image is created and linked.

Image Links

  • <a href="example.html" class="editable_image_link"><img src="img/01.jpg" class="editable_image"></a>
  • Pictures can be edited as described above - the link on the picture can be edited. ( Demo )

Recurring contents

  • <div class="content_section_wrap" data-cs-src="cse/news_section.html" data-cs-title="Adding a news message" data-cs-pos="draggable">
  • ...
  • </div>
  • ... data-cs-pos="top"
  • New content areas can only be inserted above

  • ... data-cs-pos="bottom"
  • New content areas can only be inserted below

  • ... data-cs-pos="any"
  • New content areas can be inserted anywhere

  • ... data-cs-pos="draggable"
  • New content areas are inserted at the top, but can be rearranged at any time by drag & drop

Shortcuts

  • Cmd + s to save
  • Cmd + i Edit HTML code