Code a Design From Scratch

Code a website design from scratch, with custom HTML, CSS, JS and PHP.

Before coding from scratch: We recommend first generating a website design, to review an example website that uses common Oncord UI controls.

In This Tutorial

Create a New Blank Web Design

Navigate to: Dashboard > Website > Designs.

Select the "New Design" button located at the top of the page, or the grey "+ New Website Design" box.

Select "Code from Scratch", and a new blank design will be created, ready for you to edit.

Add Custom HTML & CSS

While editing a design, click the "Source" button located on the left-hand side of the screen to view and edit source code. Blank designs include some example code that may be useful to get started.

Custom CSS is usually included:

Within the <head> of the document, inside a <style> tag.
Within the "CSS" tab, shown when the source editor is open.
Within an external CSS file you've uploaded to the server.

Uploading Images, Javascript and CSS Files

While editing a design, click the "Media" button located towards the left-hand side of the screen.

Each Oncord account has one central /media/ folder. The system will sort media into relevant sub-folders (such as website_designs, website_pages and website_posts).

You may create your own folder structure, and un-zip compressed files on the server.

A folder is created for each design, which should be used to neatly sort all media associated with the design - such as CSS files, JS files and images.

Files can be referenced as follows (where "1" is the ID of a design);

Design Styles - Containers, Fonts & Forms

Newly created blank designs include use of the <templates:styles> UI Control, within the <head> of the document.

When present, this control adds a 'Styles' button to the left panel of the visual editor, allowing admin users to change styles associated with fonts, links, forms and sections.

We recommend using the styles control, however it is not strictly required.

The Content Region

Placed within a design, the content region defines the location within a design where page content will render. Exactly one content region must be present in your design, within the <body> tag:

<regions:content />

Where you require multiple editable regions within a single page, another UI control is available to define additional content regions.

Togglable Regions also define an area within a design which can be toggled on or off on a per-page basis, using a checkbox that appears when editing the page.

Changing The Layout Between Pages

It's common practice to change the layout of the design throughout Pages of the website. For example, to force a standard display for all pages associated with blog articles.

The page layout can be changed by using a logic test to determine which page the user is currently viewing, and altering the layout based on the outcome of this test.

<logic:if test="\Components\Website\Pages::currentPageId() == '/'"> <regions:content /> </logic:if>  <logic:else test="\Components\Website\Pages::currentIsChildPageOf('/blog/',false)"> <div class="section-md"> <h1>[? \Components\Website\Pages::currentGetColumn('page_title') ?]<strong>.</strong></h1> </div> <div class="section-md"> <regions:content /> </div> </logic:else>  <logic:else> <regions:content requiressection="true" /> </logic:else>

Dynamic Navigation

In most cases the website navigation menu should be generated dynamically, rather than using static links. This means changes to the website page structure will be reflected within the website navigation (as pages are removed, created, re-ordered etc).

One of the first steps when creating a new website should be to setup the page sitemap structure, via Dashboard > Website > Pages.

Click here to read more about dynamic primary navigation.

Changes & Version Control

All changes are tracked, and can be rolled-back via Dashboard > Settings > Changes.