Inline CMS

Inline CMS

Features

Inline Editing

No confusing administration back-end. Content can be edited directly in the website layout.

No Database

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

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

DEMO

Follow the link:  click for demo here

ADVANCED FEATURES

IN ADDITION TO THE BASIC FEATURES DESCRIBED IN "HOW TO," INLINE 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>

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