5-minute User Guide

With CMS from Scratch you really can turn a flat HTML page into one that your client can update in minutes - with no database or programming knowledge!

This page gives you everything you need to get going.

Over the following weeks, we'll add links to more in-depth tutorials that will help you do even more with the CMS.

Step 1 - Install

See the Installation step-by-step guide for more information...

Summary of steps

  • Extract the CMS from Scratch archive to a folder on your local file system
  • Using an FTP client, upload all the files in the folder into the web root of your site

Step 2 - Edit your Settings

You should see a login form as below. As you haven't set up logins yet, just select the Submit button and you will proceed to the CMS main page.

(CMS from Scratch only has 2 user accounts: Designer and Client/Editor. Users identify themselves with a password alone.)

Screenshot of login form

Click the Settings tab (right-most tab).

You'll see this simple form.

Screenshot of settings

Add a site name in 'Header title', this can be anything. The name will appear at the top-left of the navigation bar.

Leave ‘Show files not created in CMS' set to 'No' for now. It isn't very important.

Set up logins for the two types of accounts: Designer (you) and Editor (usually your client).

  • The Designer can access and change everything on the site, including templates, and settings.
  • The Editor/Client can only edit the content, but not the structure of the pages.

Just choose a password for each and then click ‘Save changes’.

You will now have to log out, and log back in using the password you just created. (If your designer login doesn’t work, use the FTP client to look for a file called settings.text, delete it and start again.)

Step 3 - Create your first page

CMS from Scratch is designed to let you chop up existing pages, or templates, saving chunks as includes, which the Editor may edit, without being able to mess up core markup.

Some includes will only appear on one page, whereas others may be re-used on several pages. CMS from Scratch makes it easy to create all kinds of includes.

To create a page, first click on the Browse tab. Click create new page (below).

You'll see a popup that looks like this.


  • Type in the name of the page. The extension (.php) will automatically be added to the name.
  • At this stage no page templates have been created so leave this as ‘blank page’.

Your new page will now be displayed on screen.

Screenshot of new page created

The 5 icons inside the page panel mean:
  1. Create a new Text include belonging to this page.
  2. Create a new HTML include belonging to this page.
  3. Create a new Set include belonging to this page.
  4. Create a Page Template from this page (ignore this).
  5. Preview the page (you can click this, but you won't see much).
You also have 3 small links at the top right of the page panel. These do the following:
  • [r] - Rename the page
  • [x] - Delete the page
  • [^] - Collapse the page panel

What we want to do first is paste the full source HTML from a template page into the page source. To edit the page source, just click on the page name (here mypage.php). The page source will open up in a new tab.

(The tab will close if you click "Save & Close", but you can also switch to your other tabs (like Browse), and come back to this one. Sometimes it's handy to click "Save & Continue editing". You can also close some tabs, without saving, by clicking on the tab again.)

Just paste your HTML markup into the big text area and save it.

Your page will now exist on the web site. You can also preview the page by clicking on the magnifying glass icon in the page's panel.

Preview vs. Live view

CMS from Scratch keeps 2 copies of every include (as well as page source): a Preview version, and a Live version.

When your client (Editor) edits content, they just edit the Preview version. Once they've made their changes, they should preview the page (by clicking the magnifying glass icon), and only if they are happy they can publish the amended includes.

When the preview copy of a page or an include is different from the live copy, you'll see extra small links at the top-right of its panel.

  • The bigger ">" link publishes the item (i.e. copies the preview copy over the live version).
  • The smaller "<" link does the reverse - restoring the live copy over the preview version. This should only be used if the preview version has been messed up.

Step 4 - Start chopping up your page into Includes

The clever bit happens here. CMS from Scratch doesn’t use a database to store content. Pieces of content are stored in files (includes), which can be dynamically inserted into one or more pages.

The 3 types of Includes

Plain text

Text for plain text without formatting. Useful for hidden information like metadata, simple text like headers and CSS/code.

The extension of these Includes is ".text".

HTML (Rich text)

HTML for general rich content that includes images, formatted text, lists, tables and links, etc. Edited in a powerful WYSIWYG editor.

The extension of these Includes is ".html".

Sets

Sets are unique files, described like a flexible table, or a spreadsheet, the properties of which the designer defines. Editors (client) can add, re-order and edit rows, which may contain text, links and images. The designer dictates how the set should be displayed.

The extension of these Includes is ".set".

Where Includes live

Any web site contains unique content, and other chunks that appear in several places (like navigation, copyright messages or advertisements).

CMS from Scratch can use Includes that live in several places.

Free Includes

Free includes are located in a specific named folder (we often have one called "generalinc"). These are useful for storing chunks of content, like navigation or overall page layouts, that are used on several pages.

To create a free include, click on the "New (include-type)" icon within an actual folder. Avoid creating includes in the root folder.

To make a free include appear in your page, you type << foldername/includename.ext >>, e.g. << generalinc/pageheader.text >>

Page-specific Includes

Pages can have their own includes. These can only appear on that particular page. Use these for unique content.

To create one, click on the new (include-type) icon within the page's panel.

To make them appear in a page, just type the name of the include file e.g. << introduction.html >>.

Folder-specific Includes

It's also possible to reference an Include that happens to sit in the same folder as the current page.

Create these the same was as though you were creating a free include (of course, you can still reference them with foldername/includename, just like a free include).

To reference them, you can just put the include file name in any page in the folder, e.g. << newslist.set >>, just like a Page-specific Include.

The way CMS from Scratch works when it finds an apparent Page-specific Include is:

  1. First, it looks for a Page-specific include (belonging to the current page)
  2. If it doesn't find one, it then looks for an Include of the same name in the current folder
  3. If it doesn't find that, it skips the Include altogether

The really useful thing about Folder-specific Includes is - you can use them to call in different sections of content, depending on where you are in the site.

For example, you may have a different 2nd-level navigation in "About Us" than you do in "Products". All you'd do is have every page look for e.g. " << localnav.set> >", and pages created in your /about/ folder would find the one for About, while pages in the /products/ folder would find the Products 2nd-level nav.

(Another cool tip is to use a simple text include to set an ID or classname, which you then use in your CSS. e.g. <body class="<< foldername.text >>"> could look for an include called "foldername.text", which might be just the text "aboutus" when in the /about/ folder, and could combine to set the "About" top-level navigation button or tab to the "on" state when any page in that folder is browsed.)

Creating the different types of Includes

Creating and editing a Text Include

To create a text include, click the "T " icon for a page (for page-specific) or folder. You'll be prompted for a name. (Don't worry about entering an extension; CMS from Scratch will add the correct extension.)

The new text Include should appear, either in the folder, or in the list of Includes belonging to the page.

To edit it, just click the item (once for Page-specific Includes, or sometimes twice for Free Includes). It will open a new tab featuring a large text area. Just edit and click "Save & Close" (or "Save & continue editing") when you're done.

If you have just created the Include, or edited a blank Include, both Preview and Live versions will be created/updated with the new content.

If you have edited an existing Include, you'll see the Publish / Restore links against the Include. Usually, you'll preview the page to check the content in context, or you may want to publish straightaway.

Creating and editing HTML Includes

This is almost exactly like creating plain text Includes, except:

  • You click the box icon featuring the red "T" and the picture, with a plus-sign, to create a new HTML Include.
  • When you edit the Include, you'll use the powerful HTML editor (provided by FCK).

Creating and editing Set Includes

Sets give you functionality like database-driven sites, without the database, and in a fraction of the time!

They are useful for rendering any content that follows a regular pattern, such as:

  • Any Lists, including navigation
  • Content to be rendered in Tables, like opening times or sales figures
  • Complex repeated HTML structures, like news items that feature a heading, thumbnail and overview, and link through to a full story...

Sets give your customers an interface for adding, editing or deleting the content for these repeated items, without being able to mess up the HTML structure behind them.

Set Templates

Before you can create a Set Include, the Designer needs to create one or more Set Templates. These have a tab of their own in the navigation.

To create a Set Template, select the "Set Templates" tab, click the "New Set Template" button and give your new Set Template a name.

There are 2 parts to a Set Template: column definition, and rendering rules.

Set Template: Column Definition

On the left side of the "Edit Set Template" view, there will be an empty table entitled "Columns". This is where you'll say how many variables your set will include, a bit like defining the columns in a database table.

To add a column, type in its name (we recommend not using spaces), and select the data type. Data types can be: text, longtext, image and link. The long text type just gives the Editor a larger box in which to edit the text, and is suitable for text that is likely to be more than one sentence.

For example: Let's say we want to show a list of links to other pages. You could use the HTML editor for this, but that allows the Editor much greater freedom. If you want to control how the content is displayed, a Set is the right thing to use. Our lists always have some text, and should also have a link.

You would define the columns like this. (The column names can be anything.)

On the right-hand side, there is another form, where you define how the Set should be rendered.

There are 5 sections:

  1. Before: This is code that will be displayed at the start of the Set (only if the Set has any contents).
  2. Repeated block 1: The Set will render all the code entered here, replacing any names found in [square brackets] with the actual values the Editor has entered into the Set. Here, it will replace [link] with whatever value is in the "link" column defined on the left, and [listitem] with the value from the "listitem" column.
  3. Repeated block 2: If any of the values (i.e. [link] or [listitem]) in the block above were not found (e.g. the Editor has entered text for the list item, but no link), CMS from Scratch will try to use this alternative block. In the case of no link being provided, this code just tells it to add an <li> with the text alone.
  4. Repeated block 3: (Not used here) There are occasions where you may want a third failover option, for complex Set definitions. You have a third option here in the smaller box. If not all the items in any of the 3 boxes are found, the Set row will be skipped.
  5. After: The markup to write after the repeated blocks.

Editing Sets

Once you have defined one or more Set Templates, you will be able to create new Set Includes, in the same way as you would create a Text or HTML include, using the grid-cube icon.

The only exception is, when you create a new Set, you must specify the Set Template to use. This will define what columns to offer when editing, as well as the rules to use for rendering the Set, like this:

When you click on a Set Include to edit it, you'll see a window like this:


This is similar to the view an Editor will see, except Editors do not get:
  • "Add column" button (you should never need to use this anyway)
  • "Delete column" links (in the column headers)
  • "Format using" option. (You can use this to define a different Set Template than the ST originally used to define the Set.)

Editing a Set is straightforward. Users can add, re-order or delete rows using the options provided.

When editing Text-type columns, you can just type into the box. Long-text columns get an additional button, which launches a larger textarea popup for editing longer text.

Links have [...] buttons. Click the button to launch a page selector, for selecting a local page to link to. Alternatively, type in the URL of a site/page to link to.

Image-type columns display a tiny thumbnail image. Users click the image to select an image (previously uploaded into the Images area).

 

Step 5 - Creating a Page Template

Once you have created the main “shell” for your site by substituting the editable content for includes, you can create a page template.

Page templates apply various defaults for new pages. Both Designer and Editor can select one to use when creating a new page. For example, you might create page templates for "News", "General Content" and "Product Review" for your client.

Page templates define:

  • The default page source code. (Note: Editor can't change source code, only Designer)
  • The default Page-specific Includes. Any Page-specific includes created for a Page Template will be copied to any page created using that template, including the default values.

There are 2 ways to create a Page Template

Creating a Page Template manually

Go to the ‘Page Template’ tab. Click "New Page Template" and give it a name. The new new page template will appear in the list. You can edit its source code, and create Page-specific Includes as though you were editing a real Page.

Creating a Page Template based on an existing Page

This is much easier, and definitely the recommended way to go.

When you've created e.g. your "News item" page, and you're happy that all the Include-calls are good, you can click the icon on the page's panel that looks like a page with a spanner or wrench. This is the magic "Create a Page Template from this Page" link. All you need to do is give your new Page Template a name and CMS from Scratch will do the work.