SkyBlueCanvas is built for small web sites and non-technical users. The system distills the core concepts of content editing down to their simplest form and eliminates a lot of the complexities associated with larger systems. SkyBlueCanvas is not meant to be all things to all users and is not intended to compete with, but to act as an alternative to more robust systems.

Overview

A SkyBlueCanvas site is broken down into five simple units. These units are:

• Pages
• Media (Pictures and Files)
• Collections
• Templates (Skins)
• Settings

Pages

SkyBlueCanvas is built first-and-foremost around the concept of pages as the base container. A page can contain text, pictures and other containers (also called collections).

When a new page is created in SkyBlueCanvas, it is automatically associated with a menu item. You create a page, add text and pictures, then indicate in which menu the page should appear (or no menu at all).

Media

SkyBlueCanvas currently supports two types of media – pictures and files. Files are downloadable assets such as PDFs, Microsoft Office documents and ZIP or TAR files. The system allows you to upload files, move them between directories and rename them. Additionally, in the list view, pictures can be previewed by simply holding the cursor over the camera icon beside the image name.

Collections

Collections are perhaps the trickiest concept to grasp in SkyBlueCanvas. A collection is a type of container made up of a variable number of items. Examples of collections include link lists, photo galleries, FAQs and Menus. They are literally collections of things or smaller units that appear within a page. The concept of a collection, allows you, the user to add, edit and delete individual items within a container without having to worry about building the container itself.

Templates

Templates – or skins – are the presentation layer of a web site and allow you to change the appearance of your site without making any changes to the content (text and pictures). The SkyBlueCanvas template system is very simple and very flexible. What your site looks like is limited only by your imagination.

Skins are comprised of XHTML, CSS, JavaScript? and image files. SkyBlueCanvas templates contain absolutely no executable code like PHP and incorporates a simple token replacement concept. You build your XHTML files as you would for any web page and indicate a content region using simple tokens like {region:header}, {region:left} and {region:main}.

Settings

As stated previously, SkyBlueCanvas is a zero-configuration system, meaning there are no complex configuration options and settings to manipulate before the system is ready to use. The settings to which we now refer are things like the Site Name, Default Contact Info and administrator username and password.

When you create a template for your SkyBlueCanvas site, you build the HTML exactly as you normally would. However, in any area of the page where editable content is to appear, you add a Content Replacement Token that indicates to SkyBlueCanvas that content goes in this region. The token names are up to you, but they must follow the format {region:your_region_name}.

When your page is viewed on the public site, SkyBlueCanvas finds all of the tokens on the page, then replaces them with the Collection you indicated goes in that region. Which brings us to our current topic. Collections Publishing is where you tell SkyBlueCanvas what to put in a particular region.

Diagram 10

Diagram 10 shows the list view of all the collections available to publish on your site. To publish a collection, click the Edit control indicated in Diagram 10-B. You will be re-directed to the Collections Publishing editor for that collection.

Diagram 11

Diagram 11-A

Briefly, let’s familiarize ourselves with the diagram to facilitate our discussion. Diagram 11-A shows a thumbnail of a typical web page layout. Your layout(s) may vary from this diagram, but this is a good guide since most web pages use some variation of this basic structure.

Diagram 11-B

Diagram 11-B shows the name of the pages currently in your site and a Show? selector. The Show selector allows you to turn on or off the display of a collection on a page-by-page basis.

Diagram 11-C

Diagram 11-C shows the selector you use to indicate which region in which to display the collection. Remember that we said you define the regions in your HTML template using the {region:your_region_name} token format. When you open the Collections Publishing editor, SkyBlueCanvas parses the layout template selected for the page next to which the selector in Diagram 11-C appears and shows you those regions in the selector list.

So, if you indicated the the Home Page uses a layout named standard and the standard layout defines {region:top}, {region:left}, {region:main} and {region:right} tokens, then the selector shown in Diagram 11-C will show:

• Top
• Left
• Main
• Right
• Footer

as its list of options. The arrows pointing from the layout thumbnail to the selector in Diagram 11-C demonstrate how the layout of the page, and the region options are related.

We are using the Links collection for our current example, so whatever region you indicate using the selector in Diagram 11-C is where your list of links will appear on each page. And since you assign the position on a page-by-page basis, you can show the list of links in different locations depending on each page and the layout used for that page.

Diagram 11-D

Diagram 11-D indicates the Publish selector. The Collections Publishing editor requires that you set two settings in order to display a collection. At first this may seem redundant, but it is actually quite useful because you can unpublish a collection globally using the selector in Diagram 11-D or on a page-by-page basis using the selector for each page shown in Diagram 11-B.

Diagram 11-E

Once you are finished making your publishing selctions, click the Save button shown in Diagram 11-E to save your selections. Now, when a visitor visits your web site, they will see (or not see as the case may be) your collection in the regions you indicated on each page.

NOTE

If you are upgrading from an earlier version of SkyBlueCanvas, please refer to the article on Upgrading SkyBlueCanvas.

What You Will Need (System Requirements)

1. PHP v4-5.x running on Linux, Unix, FreeBSD, OpenBSD or MacOS X
   Sorry, Windows servers are not supported at this time
2. A FTP Client (Get FileZilla from Mozilla for free)
3. mod_rewrite enabled (optional but recommended)
4. JavaScript enabled in your web browser

FTP Installation

1. Download the SkyBlueCanvas ZIP or TAR file and extract the contents into a folder on your compter.
2. Connect to your web server using your FTP client and upload the SkyBlueCanvas code.
3. Change the file permissions of the entire skyblue folder to 755 (some servers may require 775). Apply the changes recursively to all directories and files in the skyblue folder.
4. Rename the file /skyblue/htaccess.txt to .htaccess (dot htaccess) to enable SEF URLs
5. Point your web browser to http://yourdomain.com/ or if you have installed SkyBlueCanvas in a sub-directory of your main domain, http://yourdomain.com/sub_directory_where_skyblue_is_installed/.
6. Follow the instructions that appear on your screen. This will be a simple form you need to fill in.
7. When you log in to the Admin Control Panel, go to Admin > Settings > Default Info, and enter the info in the form.
8. That’s it.

Command-line Installation (Advanced Users)

1. Download the tar file and place it in the root of your new website.
2. Unpack the tarball (tar -zxf skyblue.tar.gz)
3. Rename the file /skyblue/htaccess.txt to .htaccess (dot htaccess) to enable SEF URLs
4. Change the owner/group of the directory contents (chown -R www:www `*`)
5. Change the file permissions of the entire skyblue folder to 755 (some servers may require 775). Apply the changes recursively to all directories and files in the skyblue folder.
6. Point your web browser to http://yourdomain.com/ or if you have installed SkyBlueCanvas in a sub-directory of your main domain, http://yourdomain.com/sub_directory_where_skyblue_is_installed/.
7. Follow the instructions that appear on your screen. This will be a simple form you need to fill in.
8. When you log in to the Admin Control Panel, go to Admin > Settings > Default Info, and enter the info in the form. This will enable emailing through your site and will set the full URL so that RSS feeds will point to your site pages.
9. That’s it.

Trouble Shooting

If you get an error when you point your browser to the Setup Wizard, try setting the permissions of the /skyblue/ directory to 777. It is not recommended that you leave the permissions set to 777. The first screen of the Setup Wizard will suggest the proper settings. Once you have completed the installation, you can change the file permissions to the correct setting. If you continue to have trouble, check your hosting provider’s documentation or contact their Support Center and ask for “the correct settings for their server to allow web software to read and write files”.

You are now ready to start adding your site’s content. You can log into the SkyBlueCanvas admin control panel by going to http://www.yourdomain.com/admin.php.

Enjoy!