Tutorials for Web Developers & Designers

An Introduction to Oncord

Start here, with an overview of Oncord's features and hosting infrastructure.

Video: Your First Website

Watch a crash course covering how to create your first website. Generate a design theme, or custom-code from scratch.

User Interface Controls

Add additional dynamic features to your HTML markup, such as forms, galleries and navigation menus. 

Logic And Loops

Logic is used to show content based on a test. Repeaters are used to list elements like Products, Pages, or Contacts.

Working With Oncord Designs

A design defines the layout, fonts and style rules to be used across website pages, or e-mail marketing messages.

Generate A Design

Oncord is capable of generating professional sites fast, giving you the perfect foundation to build a new online presence. 

Import An Existing Design Template

This article discusses the basics of importing an existing HTML design template into the Oncord platform.

Changing The Default Post Display

This article will discuss how to alter the way posts display on a Oncord powered website.

Case Study: Implement a Responsive Design

This article provides an overview of how to take a cutup HTML website and implement it in the Oncord system.

Website Navigation Overview

Despite being such a vital element of a website, navigation is often overlooked or neglected. This article will examine some different types of website navigation and give a general overview of how navigation on a Oncord powered website operates.

Dynamic Primary Navigation

This article explains how to implement dymanic primary navigation on a Oncord website. Dynamic navigation allows website navigation to automatically populated with pages created in the admin console.

Secondary Navigation

How to implement secondary navigation on a Oncord powered website, such as sidebar navigation. Secondary navigation provides extra navigation items to assist the user in navigatiing the website.

Breadcrumb Navigation

Breadcrumb navigation can be useful for enhancing usability on websites with a large number of pages.

Post Article Navigation

This article will explain how to create a navigation menu which is automatically populated by post articles.

CSS Styling Navigation

Unsure about how to css style Oncord navigation menus? This article explains some techniques for CSS styling navigation, including the style rules relevant to drop down menus.

Page Redirection

This article explains how to setup page redirectors, using either a hard-coded method or through the admin panel.

Pagination And "Show More"

When loading a large amount of data, instead of increasing page load time you can opt to display a "Show More" button.

Show Post Categories

Show All Post Categories associated with a Post

Filter Posts By Date

Display Posts on the website based on their date.

Rotating Image Banner

Various methods for implementing a dynamic image slidshow on a Oncord powered website.

Custom Rotator Controls

The classcontrols attribute on the Oncord rotator allows you to create totally custom rotator controls for changing between rotator items.

Different Banner Image Per Page

By using attached media folders, an image rotator and a data repeater, you can allow a different banner images to be used for each page on the site.

Controlling Image Resizing

Take advantage of Oncord's automatic image resizing, cropping and thumbnail generation and control how images are automatically scaled.

Advanced Galleries

This article will give you an overview of how to implement an image gallery on Oncord, outlining the different techniques available to you.

Get Started: Contact Enquiry Forms

This tutorial will give you an overview of some common elements found in Oncord forms, and walk through implementation of a basic enquiry form as an example.

Newsletter Signup

A simple implementation of a Oncord newsletter signup form.

Advanced E-mail Notifications

This form will ask the user "What can we help you with?", and send a notification message to an e-mail address depending on which item is selected.

Login Forms

This article explains how to implement a member login form on a Oncord powered website.

Add Contacts To Groups

This tutorial will show you how to add a contact to a group as part of a form submission.

Two Stage Registration Forms

A two-stage registration form requests a user sign up with only an e-mail address or limited details, and then asks for more details on a second page

Auto-Logout and Redirect After Submission

Useful for in-store forms where a terminal or iPad is shared between users for data capture.
Applications might be: In-store electronic feedback form at point of sales, electronic competition form on an iPad at a tradeshow.

Website Search

Add a search box to your website design or a page on your site.

Product Enquiry Form

Create a product enquiry form, which requests basic contact fields and shows a list of products.

Calling Custom PHP Functions

Make calls to the Oncord API or a custom web service by writing a PHP function that is called when the form is submitted.

Shopping Cart Buttons

How to implement a cart button which displays the number of items in the cart, or the current cart total.

Custom Payment Forms and Donations

In this article, you will see how to create a custom form which allows you to inject a product into the shopping cart and accept payment.

Working With PHP

PHP is used to retrieve and manipulate data stored within Oncord, such as contacts, pages or products.

Database Filters

Learn how to filter results from your database, for example when using an <ss:data:repeater>.

Query Array

Explore the more advanced data querying options offered by the Properties Array.

Client Handover

Setup your client with administrator login, and ensure payment information is entered into the account.

Addthis Social Sharing Tools

AddThis offers a good solution for implementing a wide array of social sharing solutions on your website, and is totally compatible with Oncord.

Calendars

Implement a calendar on a Oncord based website. The calendar populates with post articles of a certain category, using the post date to place the post in the correct position on the calendar.

Detecting Mobile Devices

Determine whether the user is running a mobile device.

Website Design & Cutup

When creating a website design to be sent away for the cutup process, there are certain standards and practises that can help ensure the cutup process goes smoothly.

Website Maintenance Message

Using some simple server code, you can easily bring a website down for maintenance or construction.

Multilingual Websites

Create page trees for the different languages you want to present on your website.