Full Site Publication Tutorial
This tutorial will use the Sites Framework to build a website with common features, such as a slideshow and blog.
Import Sites Packages
First, we need to import two webCOMAND Sites Packages to utilize the Sites Framework.
- Launch "Content Manager (CMS)"
- Import Sites Content
- Click Import in collection toolbar on right.
- Click "From URL" and enter:
https://www.webcomand.com/packages/com_webcomand_sites/install/sites-content.js - Click Next and then Import
- Import Sites Pages & Components
- Click Import in collection toolbar on right.
- Click "From URL" and enter:
https://www.webcomand.com/packages/com_webcomand_sites/install/sites.js - Click Next and then Import (takes ~30 seconds)
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.
- Click "Add" in collection toolbar on right.
- Select "Folder".
- Enter Title: Bases
- Click "Approve" in the Workflow Menu, and refresh the folder tree on the left.
Add "Website" Base
- Click the "Bases" in the folder tree on the left.
- Click "Add" in collection toolbar on right.
- Select "Base".
- Enter Title: Website
- Click "Approve" in the Workflow Menu, and refresh the folder tree on the left.
Add "Home" Web Page
- Click "Website" in the folder tree on the left.
- Click "Add" in the right collection toolbar.
- Select "Web Page".
- Enter Title: Home
- Click "Add" in the Sections field collection toolbar.
- Select "Rich Text & Image".
- Enter:
- Text (Heading 1): Hello World Wide Web!
- Image: hello-world.jpg
- Alignment: Above (Center)
- Click "Approve" in the Workflow Menu.
Add "Website (Staging)" Publication
- Click "Website" on left.
- Click "Add" in collection toolbar.
- Select "Publication"
- 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
- General tab
- Click "Approve" in the Workflow Menu.
Preview Website
- Click "Publications" on left.
- Click "Website (Staging)" on right.
- Click "Preview"
- Click "Published Page: Home" in Notifications & Tasks slideout.
Add "Page" Publication Settings
- Click "Website" on left.
- Click "Add" in collection toolbar.
- Select "Publication Settings"
- Enter:
- Title: Page
- Folders: Website
- Inherit Folders: uncheck
- Content Types: Page
- Publication Procedures: Page
- Publications: Website (staging)
- Target Object Only: check
- Click "Approve" in the Workflow Menu.
Preview Web Page
- Click "Web Pages" on left.
- Click "Home" on right.
- Click "Preview" 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.
- Click the i on the right to slideout the Info sidebar.
- Copy the OID of this Web Page because we will need it soon.
- Click "Page" tab with "Home" Web Page.
- Expand Template field and copy "Default Page Template".
- Click "Website" on left.
- Click "Paste" in collection toolbar.
- Open "Default Page Template".
- Enter Title: Standard Template.
- 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 blue back button.
- Add Navigation
- Click "Add" in Sections field, and select "Navigation"
- Navigation: Primary
- Max Depth: 2
- Click blue back button.
- Click blue back button.
- In Sections field, drag and drop "header" above "Page Sections"
- Add Logo
- Add Footer
- Click "Add" in Sections field, and select "cTemplate"
- Script:
<footer> <p>Copyright © 2019</p> </footer>
- Click blue back button.
- Click "Approve" in the Workflow Menu.
Switch Home Page Template
- Click "Web Pages" on left.
- Click "Home" Web Page.
- Click "Page" tab.
- Change Template field to "Standard Template".
- Click "Preview" in the Workflow Menu.
Add Custom CSS
To add a custom stylesheet to your template, we'll start by creating an instance of the "CSS File" content type:
- Click "Website" on the left.
- Click "Add" in the collection toolbar.
- Select "CSS File".
- Enter the Filename "css/web.css".
- 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; } }
- Click "Preview" in the Workflow Menu.
- Click blue back button.
Next, we need to add define our Publication Settings so that all files, including CSS files, are published and available to our HTML template:
- Click "Website" on the left.
- Click "Add" in the collection toolbar.
- Select "Publication Settings".
- Enter:
- Title: "File"
- Folders: Website
- Content Types: File
- Publication Procedures: File (All Files)
- Publications: Website (Staging)
- Target Object Only: Checked
- Click "Preview" in the Workflow Menu.
- 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
- Click "Website" on the left.
- Click "Add" in the collection toolbar.
- Select "Web Font".
- Enter:
- Family: Roboto
- Filename: css/font/roboto
- TTF: Robot-Regular.ttf
-
Add file link
-
- Status: Active (Live & Staging)
Next, we'll need to modify our CSS File to include this new font:
- Click "Website" on the left.
- Click "css/styles.css" on the right.
- Check the cTemplate field under the Metadata tab.
- Add the following to our existing CSS Data field:
#INSERT(SitesWebFont,"css/font/Roboto",CSS) body { font-family: "Roboto", serif; }
- Click "Preview" in the Workflow Menu.
Add Custom JavaScript
- Click "Website" on the left.
- Click "Add" in the collection toolbar.
- Select "JavaScript File".
- Enter the Filename "js/main.js".
- Data:
document.write('<footer id="js"><strong>JavaScript is active!</strong></footer>');
Next, we'll need to modify our Standard Template to include our JavaScript file:
- Click "Website" on the left.
- Click "Standard Template" on the right.
- Click the Script tag.
- Add the following to our existing Script field, before the closing <body> tag:
<script type="text/javascript" src="#INSERT(JavaScriptFile,"js/main.js")"></script>
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 future tutorials.