System Requirements

• SkyBlueCanvas v1.1
• PHP 5 (Not tested with PHP 4)
• Apache Web Server

Installation Instructions

1. Connect to your SkyBlueCanvas web site using the FTP Client of your choice.
2. Locate the Fragmentor Plugin file in source/plugin_fragmentor/plugin.fragmentor.php in this download.
3. Upload the Fragmentor Plugin file to /skyblue_root/data/plugins/.

Usage

The Fragmentor Plugin allows you to pass a standard query string, similar to a URL query string, to your custom SkyBlueCanvas fragments. A query string is simply a string of key=>value pairs in the format:

key1=value1&key2=value2

Reserved Keywords

The Fragmentor Plugin has 2 reserved keywords:

1. name – name tells Fragmentor which Fragment to laod.
2. view – view tells Fragmentor which Fragment View to load.

Syntax

You can use one of or a mix of two call syntaxes to call the Fragmentor Plugin:

HTML Comment Syntax:

<!--fragment(name=fragment_name&view=view_name&key1=value1)-->

Use this syntax to add Fragmentor calls to your HTML skin templates.

In-line Text Syntax:

{fragment(name=fragment_name&view=view_name&key1=value1)}

Use this syntax to add Fragmentor calls in-line in your page article text.

If you are familiar with SkyBlueCanvas Fragments, you know that the default Fragment Plugin attempts to load any data objects associated with the fragment automatically. The plugin determines the data to load based on the name of the fragment. For instance, if you have the Links Manager installed on your SkyBlueCanvas site, and you create a fragment named links, the Fragment Plugin will automatically load the links data objects. The data objects are passed to your fragment in a variable named $data;

Fragmentor maintains this automatic data loading and your data is still passed in the $data variable. Fragmentor, however, adds a new variabled named $params which is a keyed (associative) array corresponding to the key=>value pairs of your query string.

Your query string can contain as many key=>value pairs as you like and your key names can be anything you like. The only limitations are:

1. The name and view keywords are reserved by the plugin
2. Your query string must be a well-formed query string meaning it must follow the rules or a standard URL query string (no spaces, no special characters, etc.)

A few nights ago, Steve Fister, one of the SkyblueCanvas Development Team Members posed the question again and offered a few ideas on how to pull it off. After thinking about Steve’s suggetions, I realized that this is actually quite easy to do. In fact, with Steve’s idea, you can add an editable text block anywhere on a web page. What’s more, with a little SkyBlueCanvas Skin Magic, you can build page-specific text blocks, so if you want a different block of text to appear on different pages, you can do it with this trick.

Out-of-the-box, this is still not possible with SkyBlueCanvas, but I have been working on a new Plugin that – unbeknownst to me when I built it – is the missing piece. The plugin is called Fragmentor and is a super-charged version of the Fragment Plugin that comes pre-installed with SkyBlueCanvas.

About Fragmentor

The existing Fragment Plugin has one design limitation: it uses pre-defined parameters whose meaning is determined by both position and name. I built the super-charged Fragmentor Plugin to correct this design mistake and to make the plugin much more flexible.

Whereas one would load a Fragment with the old Fragment Plugin with a call like this:

<!--#plugin:fragment(fragment_name,view_name,
    match_param[id1,id2,...],
    page=[id1,id2,...]})-->

The new plugin uses a query string of key=>value pairs much like a URL query string that looks like this:

{fragment(name=fragment_name&view=view_name
    &param1=value1&param2=value2)}

There are 3 benefits of this approach:

1. The position of parameters is irrelevant
2. The query string can contain an arbitrary number of key=>value pairs
3. Only your fragment needs to understand the optional parameters*

* There are two exceptions to this rule: the name and view keywords are reserved. Some might call this a shortcoming but I tend to disagree. Every language, whether for markup or code execution, uses reserved keywords so we are not introducing a new concept by reserving these two keywords.

The Editable Text Anywhere Trick.

What You Will Need

• The Editable Region Hack Package Download
• Basic PHP and HTML know-how
• A SkyBlueCanvas web site
• FTP access to your site
• A text editor

First, download the Editable Region Hack Package. Follow the installation instructions included with the download.

Next, open one of your SkyBlueCanvas Skins in a text editor. We are going to use the sidebar for this demonstration, so in the sidebar of your template, add the following code:

{fragment(name=region&view=view
    &content_id=
    <?php $this->get_page_name(); ?>-sidebar)}

For the time being, don’t worry about what this code means. After we have created our content item to display in the region, I will explain how this code works.

Now for the Trick

We are actually going to use a SkyBlueCanvas Page for our editable content that goes in this region. However, we will only be using the Page Menu Text and the Page Article Text in the region. The reason we created an empty Skin File was so our page does not get rendered as a full HTML document.

The Page Menu Text is what SkyBlueCanvas’s Router Class uses as it’s unique identifier, so we will need to use this as well. The Fragment code I told you not to worry about earlier comes into play now. If you look at the code, you will see a PHP call embedded in the Fragment call. When this page is loaded, the template PHP will be parsed before the Plugins are fired, so when the Fragmentor Plugin sees this page, the PHP code will be replaced by the Menu Text or unique identifier of the current page. So if we are currently viewing the “Home Page”, the final key=>value pair in our query string will actually read:

content_id=home-page-sidebar

This is critical in order for the trick to work.

The Finale

With all of our pieces in place, log into the admin section of your site and navigate to Admin > Pages and click the Add Page button. Once in the Page Form View, click the Meta Tab and name your content item Home Page Sidebar.

In the selector labeled Layout, select Region. This tells SkyBlueCanvas to use our empty Region Skin to build this page. Since the Region Skin is empty, the only output of the page will be the article cotnent.

In the selector labeled Menu, select No Menu (this is important).

Set Published to No.

You can choose to syndicate this content item.

Finally, click the Article Text tab and enter text and images the same as you would on a SkyBlueCanvas page. Once you have finished entering your text, click the Save button, then view your home page. You should see your newly created content in the side bar.

Important

We are exploiting SkyBlueCanvas’s Unique Identifier format to match content items with the including page so it is critical that your editable region content Menu Text match the Menu Text of the including page exactly, except for the additional ’sidebar’ bit.

Download It Now

How It Works

Let’s say you have your phone number littered throughout your web site. If your phone number ever changes, you would normally have to find and change every instance of the phone number on your site. With the MyVars extension and plugin, you can set your phone number in one place, and use a simple string replacement token to have the phone number automatically update immediately throughout your site.

MyVars has three possible variable types:

Variables

Variables are single word tokens that you can use anywhere in your page text, template HTML or even field inputs such as page titles, menu text or link text. The tokens are formatted as [[search_value]]. For instance, if you create a phone_number variable, you simply insert the [[phone_number]] token anywhere on your site, and the MyVars Plugin will automatically replace the token with the value you enter in the MyVars Manager.

Example:

Let’s say you create a variable with the search value phone_number and give it the replacement value (555) 555-1234.

In your page text, you enter:

For more information, please contact us at [[phone_number]].

Your page will appear as:

For more information, please contact us at (555) 555-1234.

Strings

Strings are any string of text, of any length that you want to replace throughout your site. For instance, let’s say the name of your company changes from Acme Industries, LLC to Acme Global Industries, Inc. Rather than search throughout your entire site for every instance of the old name, you can create a string search value in MyVars Managers where the old name is the search value of the variable, and the new name is the replacement value. When your pages are rendered, the old name will be automatically replaced with the new value.

Example:

Let’s say you create a string search value Acme Industries, LLC and specify the replacement value Acme Global Industries, Inc..

Your original page text contains:

Welcome to Acme Industries, LLC….

Your page will appear as:

Welcome to Acme Global Industries, Inc.….

Regular Expressions (Advanced Users)

Regular Expressions is a pattern matching language to allow you to match patterns or letters and/or numbers. MyVars allows you to specify a Regular Expression as a variable name to be replaced with the value you choose. For instance, if you want to add an area code to all instances of your phone number on your web site, you can specify /[0-9]{3}-[0-9]{4}/ as the search value, enter (555) $0 as the replacement value, and MyVars will automatically add the area code to each matching phone number.

Example:

Let’s say you create a Regular Expression search value /[0-9]{3}-[0-9]{4}/ and give it the
replacement value +1 (555) $0.

Your original page text contains:

Please contact us today at 555-1234….

Your page will appear as:

Please contact us today at +1 (555) 555-1234….

MyVars Extension Installation

System Requirements

• SkyBlueCanvas v1.1
• PHP 4 or above
• Apache Web Server

Installation Instructions

1. Log into the Admin section of your SkyBlueCanvas site at www.yoursite.com/admin.php.
2. Navigate to Admin > Collections > Installer.
3. • Click on the Managers tab.
   • Click the button labeled New in the upper-right corner of the admin page.
   • Click the button labeled Browse.
   • Using the file browser that appears, locate the MyVars Manager ZIP file in ext_myvars/packages/manager/myvars.zip.
   • Click the button labeled Install.
4. • Locate the MyVars Plugin file in ext_myvars/source/plugin/plugin.variables.php.
   • Open the MyVars Plugin file in a text editor and copy the code.
   • Go to Admin > Collections > Plugins
   • Click the button labeled Add in the upper-right corner of the admin page.
   • Paste the plugin code you copied into the textarea on the form.
   • Name the plugin plugin.variables.php.
   • Click the button labeled Save.

The only trouble is, which menu should the new page go in? This is where you will have to give SkyBlueCanvas a little help. On the Meta Data tab in the Page Manager (Admin > Pages > Edit), you will see a selector field labeled Menu. You simply select the menu in which you want the page to appear.

There are two logical next questions that you may have. (1) How do I create a new menu? (2) How does the menu get placed on a page? In this article I will answer these two questions.

The answer to question (1), “How do I create a new menu?” is very simple. You simply navigate to Admin > Collections > Menus. From the list view, click the “Add” button. In the form that appears:

provide the requested information.

Then click Save.

No you can go back to Admin > Pages > Edit (your page) and on the Meta Data tab, select your new menu from the options list and save your page.

You have now successfully created a new menu and added a page (menu item) to the new menu.

Displaying a Menu

Displaying your menu involves two other concepts in SkyBlueCanvas: templates and fragments.

Templates and fragments make up the presentation or “view” portion of your web page. They are where you define the HTML structure of pages (templates) and collections or content types (fragments). They may be a little tricky to grasp at first, but once you understand them, they are very powerful and flexible.

Your SkyBlueCanvas installation, provided you are using v1.1 RC1 or later, should already have a Menu Fragment included. We are going to modify this fragment, or add to it rather, first.

Using your FTP client, navigate to /skyblue_root/data/skins/techjunie/fragments/menu/ and make a copy of view.php. Name the new file mymenu.php. Then open the file with the text editor of your choice.

In the file mymenu.php you will see the following code:

<?php
  global $Router;
  global $Filter;
?>
<div class="horizontal-menu">
  <?php if (count($data)) : ?>
  <ul>
    <?php foreach ($data as $item) : ?>
    <?php if (not_valid_menu($item)) continue; ?>
    <li<?php the_class($item); ?>>
      <a href="<?php the_link($item); ?>">
          <?php the_text($item); ?></a>
    </li>
    <?php endforeach; ?>
  </ul>
  <?php endif; ?>
</div>

That looks pretty simple, huh?

We are going to need to modify the code a little bit but I promise it will be painless- and I will give you the full code when we are finished.

SkyBlueCanvas will know that this is a menu fragment (more on this later) so the menu items (actually the pages) will already be available to your code in the $data variable. We will only need to manually retrieve our new menu.

Now you can refer back to the Menu ID I asked you to hold onto.

<?php

  /*
  * Set this to the ID of the menu you created
  */

  $my_menu_id = 3;

  /*
  * Get the new menu from storage
  */

  $menu = $Core->SelectObj(
    $Core->xmlHandler->ParserMain(SB_XML_DIR . "menus.xml"),
    $my_menu_id
  );
?>

Now we have our menu items and our new menu. We can start building the menu HTML.

We will start with a basic HTML structure:

<div class="mymenu">
  <?php if ($menu->showtitle) : ?>
  <h2><?php echo $menu->title; ?></h2>
  <?php endif; ?>
  <ul class="verticalmenu">

  </ul>
</div>

That’s not too bad. We are almost finished building our menu HTML. Now all we need to do is loop through the $data list, and display each of the items in our menu. Here is how the looping is done:

  <?php foreach ($data as $item) : >

  <?php endforeach; ?>

We only want to show links to pages that are published, so we will add a single line to make sure the menu item can be displayed:

  <?php foreach ($data as $item) : >
  <?php if (not_valid_menu($item)) continue; ?>

  <?php endforeach; ?>

Now we want to filter the $data items to only show items in our new menu. We do this with a single line of code:

  <?php foreach ($data as $item) : >
  <?php if (not_valid_menu($item)) continue; ?>
  <?php if ($item->menu != $menu->id) continue ; ?>

  <?php endforeach; ?>

Wow! That was pretty easy and we are moving right along …

The only thing we have left to do is display the menu item:

  <?php foreach ($data as $item) : >
  <?php if (not_valid_menu($item)) continue; ?>
  <?php if (!$item->menu == $my_menu_id) continue ; ?>
  <li<?php the_class($item); ?>>
    <a href="<?php the_link($item); ?>">
        <?php the_text($item); ?></a>
  </li>
  <?php endforeach; ?>

And believe it or not, you have just built a new menu, as well as your first SkyBlueCanvas Fragment. There is only one last step, and this one is the simplest of all.

Up to this point, we have created a new Menu object in the SkyBlueCanvas admin and written a new menu Fragment. The only thing that remains is to tell SkyBlueCanvas where to display the fragment. To do this, go to /skyblue_root/data/skins/techjunkie/ (or your skin) and open skin.text.html in your text editor. You will see the following code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" {doc:lang}>
  <head>
    <title>[[page.title]]</title>
    <meta http-equiv="Content-Type"
      content="text/html;charset=UTF-8" />
    <?php echo $this->get_meta_data(); ?>
    <link rel="stylesheet"
    type="text/css"
    href="<?php echo $this->get_path(); ?>css/TechJunkie.css" />
    <!--#plugin.preloader-->
  </head>
  <body id="homepage">
    <div id="wrap">
      <!--#plugin:fragment(header)-->
      <div id="menu">
        <!--#plugin:fragment(menu,view,menu=1)-->
      </div>
      <div id="content-wrap">
        <div id="main">
          <!--#plugin:fragment(page,view)-->
        </div>
        <div id="sidebar">
          <!--#plugin:fragment(sidebar)-->
        </div>
      </div>
      <div id="footer-wrap">
        <!--#plugin:fragment(footer)-->
      </div>
    </div>
  </body>
</html>

Notice the lines that look like this:

<!--#plugin:fragment(page,view)-->>

These tokens are the code that tell SkyBlueCanvas where to load a fragment, which fragment to load, and which view (PHP file) to load. So the only thing you need to do is add a token for your new menu in the location in the HTML where you want the menu to appear. Let’s assume you want your new menu to appear at the top of the sidebar. You will change the code to look like this:

 <!--#plugin:fragment(menu,mymenu)-->

Now test your new menu by pointing your browser to your web site. Your new menu should appear at the top of the sidebar.

In the mean time, here are some detailed instructions on how to install the Galleria Extension. The same instructions, with some very minor differences, also apply for the Portfolio Fragment (frag_portfolio).

This will look a bit daunting at first glance, but it is really not difficult. I have full confidence in anyone’s ability to install the extension. If you do as I ask you to, step-by-step, you will have the extension installed in no time.

Let’s get started

Here is how to set up the Portfolio extension, step-by-step:

1. First, download ext_galleria.zip from the Downloads page: Download
2. Un-zip the frag_portfolio.zip file to your computer
3. Copy /ext_galleria/manager/portfolio/ to /your_skyblue_root/managers/

   If you already have the Portfolio Manager installed, you can skip this step.

4. Go to /your_skyblue_root/data/skins/techjunkie/ and copy skin.text.html to your skin directory. Name the new file skin.portfolio.html.

   Note

   If you are using the techjunkie skin, just copy the skin.text.html file to the same directory.

5. Leave this page as-is for now (we will come back to it)
6. Go to Admin > Pages and create a new page and do the following:
   • Click the Meta Data tab
   • Give your page a name
   • Set the Page Type to ‘portfolio’
   • Fill in the other fields on the form as appropriate for your site
   • Click Save

Ok, this part is a bit tricky:

1. Go to /your_skyblue_root/data/skins/your_skin/ and create a new directory named fragments
2. Go to the ext_gallery package you downloaded, and copy the Portfolio fragment (smoothgallery, lightbox or thickbox) you want to use to /your_skyblue_root/data/skins/your_skin/fragments/

   Note

   Be sure to read the instructions included with each fragment carefully

3. Go back to skin.portfolio.html and look for the line that reads:

   <!--#plugin:fragment(page,view)-->
   

   and change it to match the portfolio fragment you installed.

   For SmoothGallery:
   
   <!--#plugin:fragment(portfolio,smoothgallery)-->
   
   For LightBox:
   
   <!--#plugin:fragment(portfolio,lightbox)-->
   
   For ThickBox:
   
   <!--#plugin:fragment(portfolio,thickbox)-->
   

4. Go to Admin > Collections > Plugins and make sure the following plugins are enabled:
   • plugin.parser.php
   • plugin.fragments.php

Now all you need to do is add items to your portfolio in Admin > Collections > Gallery.

SkyBlueCanvas templates must be saved as a ZIP archive before installing.
How To Install a Template

Diagram 12

Click the Templates icon on the main dashboard. You will be redirected to the Templates Dashboard shown in Diagram 12. From there, click the Install Skins button shown in Diagram 12-C. You will be redirected to the Skin Installer manager show in Diagram 15.

Diagram 15

Diagram 15-A

Digram 15-A indicates the template name and a camera icon. If the skin includes a thumb.gif file in its images directory, you can view a thumbnail of the template by positioning your cursor over the camera icon.

Diagram 15-B

Digram 15-B indicates the delete control. You can delete a template by clicking this control. If only one skin is installed, however, SkyBlueCanvas will not show this control.

Diagram 15-C

Digram 15-C indicates the Add button you use to open the Installer Control. To install a new template, click this button and you will be re-directed to the Installer Control shown in Diagram 16.

Diagram 16

Diagram 16-A

Diagram 16-A indicates the text field where you enter a name for your skin. This name will be used as the name of a directory, so it is suggested that you use a name that only includes lower-case letters and numbers.

Diagram 16-B

Diagram 16-A indicates the File Selector. Click the browse button. A file browser will open in a dialog. Use the file browser to navigate to and select the ZIP archive containing the skin you wish to install.

Diagram 16-C

To upload the new skin, click the Install button indicated in Diagram 16-C. SkyBlueCanvas will upload your new template to a temporary directory, un-archive it and move it to the templates directory.
Activating Your New Template

To activate your new template, navigate back to the Templates Dashboard using the button in the gray menu bar just below the blue sky header. From there, click the Active Skin button on the Templates Dashboard. You will be re-directed to the Active Skin editor shown in Diagram 17.

Diagram 17

To activate the template (or another template), simply select the template name from the selector shown in Diagram 17-A, then click the Save button shown in Diagram 17-B. Now, you can visit your public site and view your new site template.
Caution

The names of content regions are not pre-defined in SkyBlueCanvas. You will want to double-check that the names of the regions have not changed before installing a new template. If the names of the regions have changed, you will need to go through the steps outlined in Collections_Publishing to update where your collections appear.

Additionally, to make sure the names of the layout files have not changed. If they have changed, you will need to update the page layouts in the Page Manager as shown in Diagram 2-D in the Pages instructions.

Skins are comprised of XHTML, CSS, JavaScript? and image files. SkyBlueCanvas templates contain absolutely no PHP or other executable code 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}.

When you create a template for a SkyBlueCanvas site, you do not need, however, to build the entire page. Every web page includes the HTML, HEAD and BODY regions, so SkyBlueCanvas includes a page skeleton that defines these major elements. Your template only needs to define what appears between the BODY tags.

Diagram 12

When you click the Templates icon shown in Diagram 1-A, you will be re-directed to the Templates Dashboard shown in Diagram 12. This dashboard shows 4 controls:

• Active Skin (Diagram 12-A)
• CSS Editor (Diagram 12-B)
• HTML Editor (Diagram 12-B)
• Skin_Installer (Diagram 12-C)

Caution: Unless you know what you are doing, you should not attempt to edit the CSS or HTML for your site skins.

SkyBlueCanvas allows you to install an unlimited number of templates. You use the Active Skin manager to select the currently active skin. I will not cover this manager here because it is very simple and self-explanatory.

We will use the HTML Editor as our example for explaining how the editor works. It is actually quite simple because it is only a simple text editor.

Diagram 13

To edit the HTML (and similarly the CSS) for your template, click the HTML Editor button on the Templates Dashboard as indicated in Diagram 12-B. You will be re-directed to the familiar List View shown in Diagram 13.

Diagram 13-A

You can create a new HTML Layout File by clicking the Add button shown in Diagram 13-A.

Diagram 13-B

To edit an existing layout file, click the Edit control to the right of the HTML file you wish to edit (Diagram 13-B). You will be re-directed to the HTML Editor shown in Diagram 14.

Diagram 14

Diagram 14-A

In the field indicated in Diagram 14-A, you can enter a name for the skin. However, changing the name of the HTML file does not rename the file. Instead, it makes a copy of the file with the new name. This is a precautionary measure to prevent you from accidentally breaking the appearance of your site. If you have pages that already use the original name of the layout, you would have to go change these pages individually.

Diagram 14-B

Diagram 14-B indicates the text area where you edit the HTML for the layout file. Make the desired changes to the HTML and click the Save button indicated in Diagram 14-C. That’s it. The next time someone visits your site, the new HTML will be displayed.

Diagram 7

The Collections Dashboard, shown in Diagram 7 shows you a group of buttons. The top and wider button is the Collection Publishing editor. Publishing Collections is explained on the Collections_Publishing page.

The two columns of buttons below the Collection Publishing button give you access to the different types of collections available on your site. SkyBlueCanvas calls these editor Managers because they allow you to Manage your collections. SkyBlueCanvas is extensible so you can add new collection managers through the Manger API.

For our example here, we are going to be using the Links Manager. When you click the Links button, you will be re-directed to the Links List View as shown in Diagram 8.

Diagram 8

SkyBlueCanvas managers come in 1-Dimensional and Multi-Dimensional types. A 1-Dimensional Manager is one that only manages a single item – this means items that appear as a single collection without Groups. A Multi-Dimensional Manger manages items that are arranged into more complex structures likes items and groups. The Links Manager is an example of a Multi-Dimensional Manager because it works with Links and Groups of Links.

Diagram 8-A and 8-B

Diagram 8-A indicates the Add button you use to add a new link item. Diagram 8-B indicates the View Groups button. If you click the View Groups button, your view will be switched to a list of the Links Groups. While you can add Links Items without defining any groups, you will not be able to display the links until you have added at least one group and place the Links Items in that group.

I will only cover adding Links Items here, but the Groups feature works exactly the same. In fact, all Managers in SkyBlueCanvas work essentially the same. The individual form inputs will vary but the concept is exactly the same with all Managers.

So, to add a new link, click the Add button indicated in Digram 8-A. You will be re-directed to the Links Item editor. Shown in Diagram 9.

Before we turn our attention to Diagram 9 and adding links, I will briefly explain Diagram 8-C and 8-D. By now, these features should be familiar to you. These controls allow you to edit an existing Links Item or delete the item.

Diagram 9

Diagram 9-A and 9-B

Diagram 9-A and 9-B indicate the fields where you enter the click-able text that will appear in the list of links on your public site and the URL (page address) to which to link respectively. So if I enter Google in the field marked Diagram 9-A and http://www.google.com* in the field marked Diagram 9-B, on my public site, the link will display Google to the site visitor and take them to www.google.com when they click the link.

Diagram 9-C

In the field labeled Diagram 9-C you can enter a caption for the link. If you enter a caption, the link will appear as something like this:

• SkyBlueCanvas

  The most flexible lightweight CMS in the world.

Diagram 9-D

Diagram 9-D indicates the selector you use to assign the link being edited/created to a Group. Remember that we are not going to cover creating groups because the steps are exactly the same. But once you create a group it will appear, along with all other groups in this selector.

Diagram 9-E

Diagram 9-E indicates the selector you use to arrange the order of your items (links in this case). The options you will see are:

• First
• Link 1 Name
• Link 2 Name
• Last

First and Last are self-explanatory. If you select another link from the list, the current link will appear after the link you select when the page is displayed.

Diagram 9-F

To save your new link, click the Save button indicated by Diagram 9-F.

Pictures are images that can be inserted into the body of a page, displayed in a _Photo Gallery_ and/or used as part of your [Templates].

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.

Diagram 3

When you click the Media icon on the [Dashboard], you will be re-directed to a list view of the media currently available on your site.

Diagram 3-A

Diagram 3-A indicates the selector that allows you to narrow the list of media shown to only those files contained within a specific media sub-directory (Gallery, Skins, Downloads, etc.).

Diagram 3-B and 3-C

Diagram 3-B indciates the path to the file. If the file is an image, you will see a camera icon (Diagram 3-C) to the left of the image path/name. If you hold your cursor over the camera icon, you can view a thumbnail of the image.

Diagram 3-D

If you want to upload (Add) a new file, simply click the Add button indicated in Diagram 3-D. You will then be re-directed to the Media Upload editor. See below (Diagram 4) for more details on uploading files to your site.

Diagram 3-E thru 3-G

Once you have uploaded media files to your site, you can Move, Rename or Delete the files. See Diagram 5 for more information on Moving files. See Diagram 6 for detail on renaming files.

Diagram 4

Diagram 4-A thru 4-C

To move a file from one media sub-directory to another, click the Move link next to the file in the Media List View (Diagram 3-E). You will be re-directed to the Media File Move editor. Diagram 4-A indicates the current name and location of the file.

Diagram 4-B indicates the selector you use to select the new location to which the file will be moved. Once you have selected the desired location, simply click the Move File button indicated in Diagram 4-C.

Diagram 5

Diagram 5-A thru 5-C

To rename a media file, click the Rename link next to the file in the Media List View (Diagram 3-F). You will be re-directed to the Media File Rename editor. Diagram 5-A indicates the current name of the file.

Enter the new name of the file in the field indicated by Diagram 5-B and click the Rename File button indicated in Diagram 5-C.

Diagram 6

Diagram 6-A thru 6-C

To upload a new media file, click the *Add* button shown in the Media List View (Diagram 3-D). You will be re-directed to the Media File Upload editor.

Click the Browse button shown in Diagram 5-A. A file browser will open in a new window. Use the file browser to navigate to and select the file you wish to upload. Currently, SkyBlueCanvas only supports PNG, GIF, JPG image formats and PDF, ZIP and TAR.GZ file types.

Next, select the desired location where you wish to upload the new file in the selector indicated in Diagram 6-B.

Next, click the Upload button indicated in Diagram 6-C.

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).

View Page List

Diagram 1

Click the Pages icon on the main dashboard and you will be re-directed to a list view of the existing pages in your site. All managers in SkyBlueCanvas follow the same structure:

• List View
• Item Editor
• Groups Editor (optional)

The controls on each List View page will vary but typically will include:

• Add (Diagram 1-A)
• Edit (Diagarm 1-B)
• Delete (Diagram 1-C)

Adding A New Page

Diagram 2

Click the Add button (Diagram 1-A) to add a new page. This will open the Page Editor (Diagram 2).

At first glance Diagram 2 may look a bit overwhelming but it is fairly straightforward and easy to explain.

Diagram 2-A

Item A in Diagram 2 highlights the Title Bar Text field. Whatever you enter in this field will appear in the Title Bar of the browser window when someone visits your web site.

Diagram 2-B

As mentioned previously, when you add a new page, it is automatically associated with a menu item. Items B highlights the text that will appear in the Menu Link for this page. So, if you enter Home Page in this field, the menu item will read Home Page.

Diagram 2-C

Diagram 2-C highlights the selector with which you indicate _which_ menu the menu item for this page should appear. SkyBlueCanvas allows you have create different navigation menus for your site. We will cover creating Menus in the [Menus] section.

Diagram 2-D

Diagram 2-D highlights the selector for choosing which HTML template to use for this page. SkyBlueCanvas allows you to create an unlimited number of page layouts with your Templates which can be assigned to individual pages using the selector in Diagram 2-D.

Diagram 2-E

Diagram 2-E highlights the Parent Selector. The Parent Selector allows you to assign a page as a child of another page to create structure to your site. The Parent-Child relationship between pages is closely tied to the way SkyBlueCanvas builds menus. When a page is assigned as a child of another page, the child page will appear as a sub-menu of the menu item for the parent page. You can create as many sub-levels of pages as you want in SkyBlueCanvas so you can a Parent-Child-Grandchild-greatgrandchild setup if your site calls for it.

Diagram 2-F and 2-G

Diagram 2-F and 2-G highlight the HTML editor. SkyBlueCanvas uses the Wymeditor WYSIWYM (what you see is what you mean) Semantic HTML Editor. The editor is intended to create semantically correct, structured XHTML.

Diagram 2-F indicates the Tool Bar. If you are familiar with Rich Text editing and Word Processors like Microsoft Word, you should recognize these controls.

Diagram 2-G indicates the body of the editor where you edit the text and pictures for the page. Simply click your cursor in the grey area if this is a new page, or anywhere in the body of the text if this page already has text, and start typing.

Diagram 2-H

SkyBlueCanvas allows you to apply Meta Data to pages globally or page-by-page. Meta Tags are created in the Collections control panel. Once created, the Meta Groups can will appear in the area highlighted by Diagram 2-H as check boxes. To apply the desired meta group to this page, simply check the box next to the group name.

You can also enter keywords associated with this page in the text area indicated in Diagram 2-H.

Diagram 2-I

Diagram 2-I indicates the selector that allows you to publish-up or publish-down a page. This feature allows you to create a draft of a page without actually displaying it as a menu item or on the site as viewed by the public.

Diagram 2-J

Diagram 2-J indicates the selector that allows you to specify a page as the Home Page or Default Page. Only one page can be set as the default. The default page is the first page that is viewed when a visitor comes to you site.

Diagram 2-K

This is pretty self-explanatory but once you have finished editing your page, click Save and the page is saved.