Developer › Tutorials for Web Developers & Designers › Creating a New Design

Import An Existing Design Template

This article will explain how to import a traditional business website design template

The template used for this tutorial will be imported from templated.co, a collection of free CSS and HTML5 site templates released under the Creative Commons license.

Please note: In order to use this template for your website project you must visibly credit its creators by leaving attribution in the footer of the design.

Downloads

SimpleWork by Templated - Click the "Free Download" button on the top right-hand side of the page
Completed Oncord Template

Create a New Design

Begin by navigating to the design page of the admin console and clicking the "New Blank Design" button. This will display a New Design dialog box, select "Upload a custom design" and click next. Choose a meaningful name for the new design and enter it into the "Title" field at the top of the screen.

Copy the HTML

When editing a design, click the "Source" button to open the Oncord HTML editor. The Source button is located on the bottom left-hand side of the screen. Copy and paste the code from index.html into the source of the design. This is usually a good place to save, remember you're working with version control which can be accessed through the "Changes" tab at the top of the design editor screen (the change history can't recover deleted images).

Upload the CSS

CSS can be included as external files, or embedded between a <style type="text/css">CSS goes here</style> tag in the head section of the design. If you embed CSS in the head of the template you will find editing CSS rules easier, as you can edit the template and css rules in the same window. As a general guide; style rules specific to the template, or rules you will need to regularly access are usually embedded in the head of the template, with CSS framework or other css files imported as external files.

For this tutorial, the contents of "default.css" will be embedded in the head of the design and "fonts.css" will be imported from a CSS folder. To do this, remove the following code, replacing it with the contents of "default.css", wrapped in a style tag.

To place the fonts.css file in a folder, open the Attached Media sidebar, which is located on the right side of the editor screen. Create a new folder called "css", then click on the newly created folder to open it. Upload the "fonts.css" file into this folder. The link address for the fonts.css file will be updated in a later step.

Managing Images

As a guide, Oncord resellers often operate under the following standards in regards to image organization. Remember that the design number ('/1/') will be variable:

Images used in the design are saved in the attached media for that design - /media/website_designs/1/
Images used in slide-shows or rotators which will be changed by site owners are saved in a created folder in the home page attached media folder - /media/website_pages/slideshow/
Images used in page content are saved in the attached media folder for that page - /media/website_pages/about-us/

In this case the file "banner.jpg" needs to be uploaded into the attached media folder of the design. Ensure you're not still in the context of the "CSS" folder created in the earlier step when uploading the image.

Remove The Metadata and Title

To allow the website title and metadata to be controlled through the admin panel, remove the <title> and <meta> tags from the design.

Fix Links

Work systematically through the design and fix all CSS and image links. As an example, the first link that needs to be changed is the link to the fonts.css file:

To the correct location:

Another example is the following link to an image:

The correct location:

Don't forget to change hyperlink tags as well:

The correct location:

Define The Content Region

The content region defines the area in the design which will contain the page content. All content which is to be editable using the Oncord page editor needs to be removed from the design template and placed into the homepage page content instead. As a general rule, try not to have any dynamically generated content appearing in the editable region, as this will allow the user to accidentally delete your code.

The content region is defined as follows:

In this tutorial, the left column with the heading "Welcome to our website" will be the editable region, so the paragraph, heading and image content in this column should be removed from the design and placed on the home page instead. This will allow the text and image content to be editable by admin users. Note that the page won't let you add content until a content region has been defined somewhere in the design. Take the following steps:

Take the content included between the <div id="content"></div> tags and place it onto your clipboard (cut) or place it in your desktop text editor software.
Add the <ss:regions:content /> tag to the design, replacing the text you removed.
Save the design.
Return to the admin panel and open the home page editor screen.
Open the source view of the home page, and add the content you removed from the design.

After taking the above steps the design should now like this:

And the home page content source should look like this (I removed the title div to make editing the page easier):

Don't forget to upload the image into the attached media of the home page so it links properly!

Setting up The Home Page Blog Post Feed

The next task is to make the three blog posts on the sidebar of the home page dynamic (the first post has the heading "AMET SED VOLUTPAT MAURIS"). To get started, the three posts will need to be created in the admin panel, in addition to a post category.

The first step is to create a new post category. For this tutorial, perhaps create a category called "Blog". If you don't know how to do this, please consult the post category tutorial. The blog category was created using the attributes defined in the below image:

After creating the post category, create the three post articles and assign them to the newly created category. After creating the three posts, navigate back to the design and locate the HTML for the home page articles:

The above code will need to replaced with an <ss:data:repeater> tag which retrieves all the posts of the newly created blog post category. This can be accomplished by replacing the above code with the following:

Note that the data source attribute 'getAllForCategory(2)' will need to be altered to use the correct blog category id for your situation. In my case the blog category I setup has the id '2', to find the blog category id, navigate to the blog category edit screen in the admin panel and look for the text - "Editing Post Category #id" at the top of the page.

Dynamic Navigation

The next step is to code the main website navigation so it is dynamic, rather than static. This will cause changes made through the admin control panel to be reflected in the website navigation. The following HTML is currently responsible for the website navigation:

The above code needs to be replaced with a <ss:navigation:primary /> tag as follows. To read more about implementing primary navigation, please see the knowledge base article explaining dynamic primary navigation.

Changing The Layout Between Pages

It's common practise to change the layout of the design throughout various pages of the website. The layout used on pages other than the home page is often referred to as the "Inner page layout". On the Oncord platform the page layout can be changed by testing to determine which page the user is currently viewing, and altering the layout based on this test.

Changing the design depending on which page the user is viewing is discussed further in later design guide articles, however for use in this design the sidebar area will only display on the home page.

Start by locating the sidebar area in the design:

The above code for the sidebar area must be wrapped in an <ss:logic:if> tag which performs the test "If the current page id is not equal to the home page, display the code inside the <ss:logic:if> tag. This can be accomplished as follows: