webCOMAND

webCOMAND Docs
Developer Guide Publications Full Site

Full Site Publication Tutorial

This tutorial will use the webCOMAND Sites Framework to build a website with common features, such as custom fonts and JavaScript.

Install Sites Packages

The Sites Framework depends on the Forms Framework, so that must be installed first.

Option A: CLI

If you have access to the command line interface (CLI), it is easiest to install the Forms Framework and Sites Framework from the CLI.

If dimensions are enabled and you would like to localize and translate the website content, import sites-content-localized.js instead of sites-content.js in step 4 below.
  1. php /var/www/webcomand/comand.php io_comand_package add -p io_comand_localization
  2. php /var/www/webcomand/comand.php io_comand_package add -p com_comandsolutions_app_forms
  3. php /var/www/webcomand/comand.php io_comand_package add -p com_webcomand_sites
  4. php /var/www/webcomand/comand.php io_comand_io import -s file:///var/www/webcomand/files/packages/com_webcomand_sites/install/sites-content.js
  5. php /var/www/webcomand/comand.php io_comand_io import -s file:///var/www/webcomand/files/packages/com_webcomand_sites/install/sites.js

Option B: UI

If you do not have access to the CLI, you can import two webCOMAND Sites Packages from the User Interface (UI) to utilize the Sites Framework.

If dimensions are enabled and you would like to localize and translate the website content, import sites-content-localized.js instead of sites-content.js in step 2 below.
  1. Launch "Content Manager (CMS)"
  2. Import Sites Content
  3. Import Sites Pages & Components

Add "Bases" Folder (if not already there)

Even though we are not going to use Bases in this tutorial, it is a best practice to follow the Bases folder structure anyway, so we can easily utilize it in the future if desired.  So, if there is not already a "Bases" folder at the top-level in the folder tree on the right, create one.

  1. Click the add button (+) in collection toolbar on right.
  2. Select "Folder".
  3. Enter Title: Bases
  4. Click "Approve" in the Workflow Menu, and refresh the folder tree on the left.

Add "Website" Base

  1. Click the "Bases" in the folder tree on the left.
  2. Click add (+) in collection toolbar on right.
  3. Select "Base".
  4. Enter Title: Website
  5. Click "Approve" in the Workflow Menu, and refresh the folder tree on the left.

Add "Home" Web Page

  1. Click "Website" in the folder tree on the left.
  2. Click add (+) in the right collection toolbar.
  3. Select "Web Page".
  4. Enter Title: Home
  5. Click add (+) in the Sections field collection toolbar.
  6. Select "Rich Text & Image".
  7. Enter:
    • Text (Heading 1): Hello World Wide Web!
    • Image: hello-world.jpg
    • Alignment: Above (Center)
  8. Click "Approve" in the Workflow Menu.

Add "Website (Staging)" Publication

  1. Click "Website" on left.
  2. Click add (+) in collection toolbar.
  3. Select "Publication"
  4. Enter:
    • General tab
      • Title: Website (Staging)
      • Content Folder: check "Website" Base and "webCOMAND Sites" Package
      • Publication Procedures: check "File" and "Page"
      • Active: check
    • Destination tab
      • Publish Path: staging.<account>.webcomand.com/htdocs/ (where <account> is the name of your webCOMAND account, which is in the address bar of your web browser like https://<account>.webcomand.com/)
      • URL: https://staging.<account>.webcomand.com/
    • Settings tab
      • Is Staging: check
  5. Click "Approve" in the Workflow Menu.

Add "Page" Publication Settings

  1. Click "Website" on left.
  2. Click add (+) in collection toolbar.
  3. Select "Publication Settings"
  4. Enter:
    • Title: Page
    • Folders: Website
    • Inherit Folders: uncheck
    • Content Types: Page
    • Publication Procedures: Page
    • Publications: Website (staging)
    • Target Object Only: check
  5. Click "Approve" in the Workflow Menu.

Create Page Template

The current Home page is using the Default Page Template that comes with the Sites Framework. It is very basic and only displays the sections defined for the web page, without any header, footer or layout.  Symbols can be used and reinserted on every page, to manage a single header and footer across all pages.  Even better though, you can create your own Page Template and associate it with whichever Web Pages you want.

  1. Click the i on the right to slideout the Info sidebar.
  2. Copy the OID of this Web Page because we will need it soon.
  3. Click "Page" tab with "Home" Web Page.
  4. Expand Template field and copy "Default Page Template".
  5. Click "Website" on left.
  6. Click "Paste" in collection toolbar.
  7. Open "Default Page Template".
  8. Enter Title: Standard Template.
There are two ways to add a custom header/footer to a Page Template: (a) Edit HTML directly in the Script field, or (b) Add Components to the Sections field.
  1. Add Header
    • Add Logo
      • Click add (+) in Sections field, and select "Block Component"
      • Tag: header
      • Click add (+) in the Sections field and select "Image"
      • Class: logo
      • Image: Upload logo.png.
      • Link: #LINK(Page,OID=<"Home" Web Page OID>)
      • Click "Approve"
      • Click blue back button.
    • Add Navigation
      • Click add (+) in Sections field, and select "Navigation"
      • Navigation: Primary
      • Max Depth: 2
      • Click "Approve"
      • Click blue back button.
    • Click blue back button.
    • In Sections field, drag and drop "header" above "Page Sections"
  2. Add Footer
    • Click add (+) in Sections field, and select "cTemplate"
    • Script: 
      <footer>
    <p>Copyright &copy; $SystemYear</p>
</footer>
    • Click blue back button.
  3. Click "Approve" in the Workflow Menu.

Switch Home Page Template

  1. Click "Web Pages" on left.
  2. Click "Home" Web Page.
  3. Click "Page" tab.
  4. Change Template field to "Standard Template".
  5. Click "Preview" in the Workflow Menu.

Add "File" Publication Settings

Next, we need to add define our Publication Settings so that all files, such as CSS files, are published and available to our HTML template:

  1. Click "Website" on the left.
  2. Click add (+) in the collection toolbar.
  3. Select "Publication Settings".
  4. Enter:
    • Title: "File"
    • Folders: Website
    • Content Types: File
    • Publication Procedures: File (All Files)
    • Publications: Website (Staging)
    • Target Object Only: Checked
  5. Click "Preview" in the Workflow Menu.
  6. Click blue back button.

Add Custom CSS

To add a custom stylesheet to your template, we'll start by creating an instance of the "CSS File" content type:

  1. Click "Website" on the left.
  2. Click add (+) in the collection toolbar.
  3. Select "CSS File".
  4. Enter the Filename "css/web.css".
  5. Data: 
    body { background: #eee; }
body > * { width: 90%;  max-width: 1200px;  margin: auto;  background-color: #fff;  padding: 1em; }
body > header, body > footer {  border: 2px solid #eee; }
body > header { border-width: 0 0 2px; min-height: 100px; }
body > footer { border-width: 2px 0 0; }
body > header img.logo { max-width: 100px; max-height: 100px; }
nav #nav-menu { display: none; }
nav ul { list-style: none; padding: 0; min-height: 80px; display: flex; justify-content: flex-end; align-items: flex-end; }
nav ul li { padding: 0 2em; }
nav ul li a { width: 100%; padding: 0 1em; text-align: center; background: #333; display: block; line-height: 2em; color: #fff; }
nav ul li a:hover { background: #000; }
@media only screen and (min-width: 600px) {
    body > header img.logo { float: left; }
}
  6. Click "Preview" in the Workflow Menu.
  7. Click blue back button.

Note: The Standard Template that we are using already includes all CSS files in our document head, thanks to the following cTemplate code:

#LIST(CSSFiles)
  <link href="#LINK(File,OID=$OID)" rel="stylesheet" />
#ENDLIST

Add Custom Web Fonts

  1. Click "Website" on the left.
  2. Click add (+) in the collection toolbar.
  3. Select "Web Font".
  4. Enter:
    • Family: Roboto
    • Filename: css/font/roboto
    • TTF: Robot-Regular.ttf (available from Google Fonts)
    • Status: Active (Live & Staging)

Next, we'll need to modify our CSS File to include this new font:

  1. Click "Website" on the left.
  2. Click "css/styles.css" on the right.
  3. Check the "cTemplate" field under the Metadata tab.
  4. Add the following to our existing CSS Data field: 
    #INSERT(SitesWebFont,"css/font/roboto",CSS)
body { font-family: "Roboto", sans-serif; }
  5. Click "Preview" in the Workflow Menu.
The #INSERT above is a cTemplate directive, which will be interpreted because we checked the cTemplate field in step 3. It targets the particular Web Font we wish to include by name, and invokes the "CSS" template to render the appropriate CSS code when published.

Add Custom JavaScript

  1. Click "Website" on the left.
  2. Click add (+) in the collection toolbar.
  3. Select "JavaScript File".
  4. Enter the Filename "js/main.js".
  5. Data: 
    document.write('<footer id="js"><strong>JavaScript is active!</strong></footer>');
  6. Click the "Preview" button

Next, we'll need to modify our Standard Template to include our JavaScript file:

  1. Click "Website" on the left.
  2. Click "Standard Template" on the right.
  3. Click the Script tab.
  4. Add the following to our existing Script field, before the closing <body> tag: 
    <script type="text/javascript" src="#INSERT(JavaScriptFile,"js/main.js")"></script>
  5. Click the "Preview" button

Preview Website

  1. Click "Publications" on left.
  2. Click "Website (Staging)" on right.
  3. Click "Preview"
  4. Click "Published Page: Home" in Notifications & Tasks slideout.
    • Your Staging username is the same as your account name
    • Your Staging password is "webcomand"

Conclusion

This tutorial covers the creation of a vary basic homepage, and demonstrates how to include certain standard content and filetypes. Many other standard elements may be added, some of which will be featured in additional tutorials.

Page last updated .

Copyright © 2013-2024, COMAND Systems, Inc.