Contributed by Dale Ray

There are blank lines in the html and style code examples so that long lines can be seen clearly. Long lines have an empty line before and after them so that they can wrap in your browser window, but still be clearly seen. You can cut and paste the examples into an editor and edit out the blank lines.

This article is almost done, but not quite. Discussion of categories needs to be added and adding the profiles for the content blocks needs to be expanded.


This article will explain how to take an existing web page design and convert it to dynamic content management with Coranto. The design used was found on Open Source Web Design. This article will show how to convert existing static designs to pages with dynamic content that is easily changed.

Coranto is a very flexible system for managing content. The methods used in this article are not the only ways to accomplish the result that is achieved. It is a very good idea to read the articles on the installation page of this wiki before attempting the steps related here.


A recipe has to have a list of ingredients, so here is what you will need for this one:

  • Coranto (version 1.25.2 used for this article)
  • Web Server (remote or local, dedicated or shared. All will work)
    • The server must support perl 5.005 (or above), allows CGI scripting and SSI
  • A template or base page design

Required Addons

  • News Categories Addon (included with the Coranto download - latest version)
  • Modify News : Missing Subject
  • Maginot
  • MultiPart
  • CustomFields
  • X MultiSubmit

Suggested Addons

  • Field Helper
  • Modify News : Include Field
  • Modify News : Missing Subject
  • QuickTags
  • Style Debugger

↑ Contents

Design Goals

The goals for this design are:

  • Maximum flexibility
  • Maximum reusability
  • Mange all content with Coranto's interface

Flexibility so that the design can be used to display different types of content.

The Base Design

View Base Design

Use the link above to view the base design. It is a simple two-column design by kpgururaja.

View the base design. If turn off the CSS you see that it degrades nicely to a readable format. Using the print preview on your browser you can also see that it will print in a neat format with the main text expandng to fit the printed page.

Breaking It Down

This design uses CSS to apply style to five page sections contained in HTML div markup. The sections (pulled from the page's source) are:

  • Header
  • HeaderMenu
  • SideContents
  • MainContent
  • Footer

Other items we may wish to change without editing each static page are:

  • page title
  • page author
  • keywords describing the page
  • description of the page
  • link to the css file for the page

These last items are all contained in the head section of the page. With the exception of the css file link they are all meta tags. These tags are not displayed (with the exception of the title, which shows up in most browsers), but they are important because they describe your page to the browser and to search engines. We will want to be able to alter these easily on a page by page basis.

Moving From Static To Dynamic

To allow Coranto to control the content in the page sections we need to implement a method where the base of the page is constant, but the sections can each be updated with content edited from within Coranto. The method I am going to describe is server side includes (SSI). SSI is a method for dynamically updating a web page as it is being delivered (served) to the reader. The server reads the page and inserts content based on directives in the page. In the next section I will discuss the changes needed in the page to use SSI.

↑ Contents

Modifying The Base Design

The recipe uses SSI to place the dynamic content on the page. The static content that is now in each section has to be replaced with a directive to tell the server what to place there. These instructions are for an Apache server.


To keep our document root cleaner we will be building the text files to a directory called news, putting the CCS files in a directory called style, and the images in a directory called images. Planning ahead makes maintenance of the site easier later. Coranto, with an addon, will be used to upload files to these directories.

Here is our directory structure:

  • Document root (index.shtml)
    • news (files built by Coranto)
    • style (for css files)
    • images (for images used in your pages)
    • coranto (where the Coranto install resides)

Some hosting providers will only allow scripts to be run from a directory called cgi-bin. If that is the case on your server you should install Coranto in a sub-directory of the cgi-bin directory.

Adding The Include Directives

The following assumes that your server has server side includes enabled. Server setup is beyond the scope of this article.

The most common setup for SSI is that the server processes only files ending in .shtml for includes. This saves extra load on the server. If every web page (.htm, .html, etc.) was processed for includes many pages would be processed with no includes. So for this example the first thing we have to do is to open our base page in a text editor and then save it as index.shtml. Don't rename the original file as you will need it later to refer to.

The next step is to delete the content that is between the start and end tags for each division. The result:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

<html xmlns="" xml:lang="en">


<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="author" content="name of the author." />

<meta name="keywords" content="key words that you are targeting for search engines." />

<meta name="description" content="description of the main conents." />

<link rel="stylesheet" type="text/css" href="/style/style.css" media="screen"/>


 <div id="MainWrapper">
 <div id="Header"></div>
 <div id="HeaderMenus">
 <div id="SideContents">
 <div id="MainContent">
 <div id="Footer">

Now you have to insert the Include directives. So with the directives inserted our source code is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

<html xmlns="" xml:lang="en">


<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<meta name="author" content="name of the author." />

<meta name="keywords" content="key words that you are targeting for search engines." />

<meta name="description" content="description of the main conents." />

<link rel="stylesheet" type="text/css" href="style/style.css" media="screen"/>

 <div id="MainWrapper">

<div id="Header"><!--#include virtual="news/header.txt" --></div>

 <div id="HeaderMenus">
 <!--#include virtual="news/headermenu.txt" -->
 <div id="SideContents">
 <!--#include virtual="news/sidecontents.txt" -->
 <div id="MainContent">
 <!--#include virtual="news/maincontent.txt" -->
 <div id="Footer">
 <!--#include virtual="news/footer.txt" -->

Each section now has an include directive. The server will replace that directive with the contents of the file named in the directive. Coranto will be used to create these text files.

Working Page with Changes

Viewing the link to the working page with changes does not look very different from our base design. This is exactly how it should be. We now have a base page we can use Coranto to provide content for.

The paths in the include directives do not begin with a slash (/). Paths that begin with a slash are from the document root, paths without the slash are relative to the current directory (below the current directory). The paths as entered work on the local test server and on the remote server because the relative path is the same, even though the path from the root of the document directory is not.

The Meta Tags

Rather than use another include to provide the meta tags another technique will be used. The tags will be maintained by Coranto.

↑ Contents

The Coranto Building Blocks

Design Decisions

We have already made some design decisions.

  • Each section of the page will be managed separately to give maximum flexibility.
  • The content will be added to the page using server side includes.
  • What sections the page will contain.

Directory Structure

Having decided to create each type of content in a separate directory under the news directory this is the directory structure:

  • document root
    • archives
    • Coranto
      • documentation
      • multipart_icons
    • images
    • news
      • footers
      • headers
      • link-files
      • main-content
      • sidebar
      • sticky
      • toolbars
    • style

In order to control what is displayed on the page a system is needed to read the available content in each of these directories and allow the user to select which belongs on the page. To accomplish this the MultiPart addon will be used.

MultiPart - Creating a File List Field explains how to create a drop-down select boxes using MultiPart. Go read the article and then come back.

Building the Create Page Profile

The pieces are in place to build the profile that will be used to create each page. The steps to create this profile and the pieces that it will use (news fields, styles, etc.) are given below.

Additional Elements

Before putting this together the base page will be extended with some additional sub-elements.

It is often desirable to stick content to the top of the page. An announcement that you want on every page would be an example. So in addition to the main content we are going to provide a place for sticky news above that. This extra content will be above the main content, contained in the same html div as the main content.

The file list drop-downs allow only a single selection. To make the sidebar more flexible it will be broken down into three sections (top, middle, bottom) and a drop-down will be created for each section. Every section does not have to be used. The extra sections allow more flexibility.

The technique used to put sub-sections in the content area and sidebar will work for any section of the page.


The blocks that the page will be built from need to be created. The basic building blocks of any content built with Coranto are newsfields.

The MultiPart addon is required for this step.

The fields listed here are all user added newsfields to use these in a style you have to pre-pend CustomField_ to the name given below.

Tags that start with the prefix desc are description fields. These will be used to improve the layout of the input form. The CustomFields addon is required to create these fields.

  • filename
    • single-line text field
    • the part of the filename to the left of the dot (.) when the page is created
  • descMetaTags (optional)
    • description field
    • used as a header above the section of the input form for the itesm in the page's html header section
    • contains 'Meta tags and other info for the header section of the web page.'
  • metaAuthor
    • single-line text field
    • the author's name
  • metaKeywords
    • single-line text field
    • list of words for the keywords meta tag - separated by a comma
  • metaDescription
    • single-line text field
    • the text for the page description meta tag
  • cssFileList
    • upload field (drop-down box with files from upload path)
    • drop-down list of the CSS files available
  • pageTitle
    • single-line text field
    • contains the value the page title
  • descContentSection
    • description field
    • contains 'End Page Header Section - Begin Content Section'
  • header
    • upload field (drop-down box with files from upload path)
    • drop-down list of the files available for use as page headers
  • topMenu
    • upload field (drop-down box with files from upload path)
    • drop-down list of the files available for use as a top menu
  • sidebarTop, sidebarMiddle, sidebarBottom
    • upload field (drop-down box with files from upload path)
    • drop-down lists of files available for use in the sidebar
  • mainStickyContent
    • upload field (drop-down box with files from upload path)
    • drop-down list of files to put at the top of the main content area
  • mainContent
    • upload field (drop-down box with files from upload path)
    • drop-down list of files for the main content area
  • footer
    • drop-down list of files for the main content area
    • drop-down list of footer files
Field Settings

The single-line text field settings need to fit how you are going to use the field. For this example they are:

  • disable html - yes
  • parse links - no
  • strip code - yes

The upload field settings used are:

  • upload path - to the path you want the field to get a filelist from
    • example - /var/www/t1/news/sidebar (this is from the server's root)
  • upload directory - the url of the directory you entered for the path
    • example - h**p://
  • extension mode - allow only the ones below
  • allowed extensions - txt
  • Specify Upload Field mode: - drop-down box with files from the upload path
  • overwrite if file exists - no
  • max file size - empty (no value)
  • create thumbnail - no

With create thumbnail set to no the remainder of the image settings do not apply.

X MultiSubmit Page

The use of X MultiSubmit is optional. Coranto's submit news page becomes cluttered and disorganized without it so this step is covered here. Skip this section of you don't use X MultiSubmit.

Addon Settings Used

  • No description message - your choice.
  • After adding profile goto - profile listing
  • Modify News" layout - List the Submit News pages on the "Modify News" page and have each item on the list link to news items submitted to that Submit News page.
  • Sort the submit fields for the XMS Profiles - in a customizable order per profile
  • Allow modification of submit page for newsitems - your choice
  • Choose a default "Submit News" page - choose one

Create Profile

Create an X MultiSubmit profile with the following settings:

  • profile name - Create Page
  • Profile Description - Create a new page for your site
  • Display on Main Page? - your choice
  • Display on Quick Menu? - your choice
  • Submit Fields - check all of the fields you created in the previous step
  • Style for the Modify News Subject - <Field: CustomField_pageTitle>
  • Required Fields - filename (everything else is optional, but you won't have much of a page)

Save the settings and then select edit for the profile you just created and make sure that the fields are in the order you want. The result:

Attach:CorantoRecipes./creatpage.jpg Δ

The Style

Create an empty style named CreatPage and enter:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">

<html xmlns="" xml:lang="en">


<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<If: Field: CustomField_metaAuthor>"<meta name="<Field: CustomField_metaAuthor>" content="author name" /></If>

<If: Field: CustomField_metaKeywords><meta name="<Field: CustomField_metaKeywords>" content="key words that you are targeting for search engines." /></If>

<If: Field: CustomField_metaDescription><meta name="<Field: CustomField_metaDescription>" content="description of the main conents." /></If>

<If: Field: CustomField_cssFileList><link rel="stylesheet" type="text/css" href="style/<Field: CustomField_cssFileList>" media="screen"/></If>

<If: Field: CustomField_pageTitle><title><Field: CustomField_pageTitle></title></If>

 <div id="MainWrapper">

<div id="Header"><!--#include virtual="news/headers/<Field: CustomField_header>" --></div>

<div id="HeaderMenus">

<!--#include virtual="news/link-files/<Field: CustomField_topMenu>" -->

 <div id="SideContents">

<!--#include virtual="news/sidebar/<Field: CustomField_sidebarTop>" -->

<!--#include virtual="news/sidebar/<Field: CustomField_sidebarMiddle>" -->

<!--#include virtual="news/sidebar/<Field: CustomField_sidebarBottom>" -->

 <div id="MainContent">

<!--#include virtual="news/sticky/<Field: CustomField_mainStickyContent>" -->

<!--#include virtual="news/main-content/<Field: CustomField_mainContent>" -->

 <div id="Footer">

<!--#include virtual="news/footers/<Field: CustomField_footer>" -->


The style code has a server side include for each of the sub-sections we added. Each include gets the filename from one of the drop-downs on the submit page.

The Coranto Profile

The Maginot addon will be used to bring all of these elements together. Maginot can be used to create static pages with a single item on each page. The filename and extension and the field that is used to split all of the items of the same type can be user specified. The Maginot addon must be installed and enabled.

Create a new profile named magCreatePage on the Edit News Profiles page ands select the type Maginot Static from the list.

Profile Settings

After you create the profile you must select EDIT for that profile and customize the settings.

  • Display Name: - Create Page - Maginot
  • File Path: - /var/www/t1 (set appropriately for your server)
  • Directory URL: - set appropriately for your server
  • Base URL: - set appropriately for your server, probably the same as Drirectory URL
  • Filter By Time: - blank
  • Filter By Number: - blank
  • Skip Items: - blank
  • Categories: -
  • XMS Profiles: - Create Page
  • News Style: - CreatPage
  • Display Coranto Link: - your choice
  • File privileges: - usually 666
  • HTML Template: - none
  • HTML File Title: - blank
  • Static Type: - Use the Static/Spice Field
  • Static Field: - filename
  • File Extension: - shtml
  • Maximum File Name Length: - your choice
  • Auto-Rebuild? - Yes (suggested, this causes the page to be built when it is submitted or modified)

These settings will cause a file called filename.shtml to be created in the directory you specify for each item you submit. That means you can add pages to your site just by creating a new entry from the Create Page submit page.

Remember to enable the profile.

Creating Content Blocks

The next step is to create a Coranto Profile for each type of content on the page. Profiles are needed for:

  • css files (if you want to edit them in Coranto)
  • header files
  • topmenu files
  • sidebar items (more than one of you want different types of elements)
  • sticky content
  • main content
  • footers

It is your choice what type of Coranto profile you use for these blocks.

Example: You could create a profile for the topmenu links and another for sidebar links, Using the same X MultiSubmit page you could enter data relating to links and use check boxes or categories to determine which links end up at the top or in the sidebar.

The main content and sticky sections could use the same submit page, but be built with two profiles. You would need to use check boxes, categories, or another method to filter each profile.


Forum Discussion Thread

Further Reading

Coranto Installation Section of this Wiki
About the CCS2 Specification
Server Side Includes (Tutorial)

Page last modified on November 25, 2010, at 08:46 AM