How To Create Page Templates and Content Elements

Steps to create new content, a new page template (index.html) and a content element (content.html). For existing content, see How To Edit.

Note that creating new sections of the website and new pages within sections should only be done with the approval of the webmaster.

Content is normally added to the site only to pages that are already part of the site navigation (appear in the site map). New pages must be integrated into the banner/global navigation and the left/local navigation, a task best left to the site administrators who will insure consistency with the information architecture. This whole process, creating a page and integrating it into the navigation, is described below.

• Navigate in the File Manager (Pages > Manage Pages and Files) to the desired section folder/directory. You may also use our in-context editing feature to just shift-click the content of a page in the desired section, then login and click Manage Files.

  We will use the membership directory as an example.

• Navigate to and click to select the Model folder. It contains a model template page series (with the wraparound banner/global and left/local navigation, plus right-hand items and a footer appropriate to this section of the website) and a model content page series.

• Click on Duplicate
• You are now asked to Navigate to the destination folder/directory where you want a copy of the model directory. This allows you to save a folder and its contents under a new name anywhere on the website.

  Usually the new folder will be a sibling folder at the same level as "model" so you don't need to navigate in this case. For our example, the destination directory is membership itself.

• Name the new directory "how_money_spent."

• Open (double click) your new directory how_money_spent.
• You now have a template page series (index.html) and a content page series. You must edit the breadcrumbs in the content and the title and css nav selector in the template (index.html).

• Select the content.html file and click Manage Series (or double click). Select the one page in the new page series and click skyWrite. Edit the breadcrumbs to read

  <a href="/">Home</a> > <a href="/membership/">Membership</a> > How Money Spent

• Save and click Manage Files. Now double click the index.html page series. You are in its Series Manager. Select the one page in the new series and click skyWrite (or simply double click).

• Edit the title to read

  <title>CM Pros > Membership > How Money Will Be Spent?</title>

• Edit the style selector to read

  #menu a#nav_how_money_spent {

Steps to integrate the new page into the navigation

• Your new page will need to appear in the left/local navigation (with its menu item selected).

  To accomplish this you must add a page link to the /includes/nav_membership.html file, which contains the local navigation menu items.

• Click on Manage Files, go to Files Root, double click the includes folder, and double click the nav_membership.html file to edit it.

Copy and paste another list item and edit its name and id appropriately (see yellowed id selector).

• Finally, you must add the corresponding drop-down menu element in the global navigation file at /includes/banner.html.

  Note that some of these are http links and others are https with the attribute class="menuSecure" which adds the padlock gif to the menu item.

<a id="nav_banner_how_money_spent" class="menuItem" href="http://www.cmprosold.org/membership/how_money_spent/">How money will be spent</a>

<a id="nav_banner_survey" class="menuItemSecure" href="https://www.cmprosold.org/membership/survey/">Member survey </a>

• So to recap, you duplicate the model folder for a section. It has an index file (template) and a content file. You change the title, id selector, and breadcrumbs path to agree with your new page, then edit the local navigation and global navigation files in the /includes folder.
• You are done and you or your contributing authors can now edit the time series for the content element. Note that a content element may have its own includes to support further templating and reuse multiple smaller content elements, but this is too advanced to describe here.

The page template code