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

Case Study: Implement a Responsive Design

This article will provide an overview of how to import a cutup HTML version of a website into the Oncord system. The template chosen for this exercise is a responsive theme built on the Bootstrap framework. This theme is free for commercial and personal use and can be viewed and downloaded here (or alternative link).

Tutorial Quick Navigation

Downloads

Create a New Design

Begin by navigating to the design section 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 name for the new design and enter it into the "Title" field at the top of the screen.

Copy the HTML

At the bottom of the editor window on the design screen there is a "Source" button which will open the Oncord HTML editor. 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 (version control can't recover deleted images).

Upload the CSS

CSS can be included as external files or embedded in a <style type="text/css"> tag in the template. 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 framework and other css files imported as external files.

For this template the contents of the "templatemo_style_fix_menu.css" and "templatemo_style.css" files were embedded in the head of the design and all other external css files were placed in their own folder.

To place css files in a folder, open the Attached Media sidebar on the right hand side of the editor screen. Create a new folder called "css", then navigate to this folder in the attached media sidebar. Upload the css external files into this folder, then do the same with the javascript "js" folder.

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/

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 following:

To the correct location:

Define the Homepage Content Region

The content region defines the area which is editable in the design. 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.

You can use a conditional statement to alter the design between the homepage and other pages.  For example; if we had a different design for the home page and the about us page. This technique will be discussed later. I decided that the three-column area on the home page will be the editable region, so that html was removed from the design and placed in the home page content. Remember that the page won't let you add content until a content region has been defined in the design.

I removed the following HTML from the design and placed it into the home page content:

I then returned to the design and replaced the code I removed from the design with a content region <ss:regions:content /> tag. The container marketing section now looks like this:

Setting up the Home Page Blog Post Feed

The next task is to make the three blog posts on the home page dynamic. This will mean the three posts will need to be created in the admin panel, a post category called "blog" will need to be created in the admin panel and the default post display will need to be altered so that posts appear consistently as shown in the HTML template.

The first step is to create a new blog category called "Blog" using the admin panel. If you don't know how to do this, please consult the Post category training video. The blog category was created using the attributes defined in the below image.

After Creating the blog post category, the three articles displayed on the home page were created as posts through the admin panel.

Navigate back to the design and locate the original HTML for the home page articles:

Identify the code that you would like to use as the default post display, then grab that code and paste it into the post configuration area in the admin panel. This screen is accessed through the admin panel by selecting Posts -> Configuration. Click the source button under List display to alter the default post display.

Don't forget to set the "small icon dimensions" on the post configuration screen. To use the same size as the original template change the 160 width value to 390.

After altering the copied code, the following code was placed into the post configuration:

Now that the default post display has been set, the HTML code for the articles in the design will be changed to code which dynamically grabs all the blog posts using the default post display:


Note that '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.

Fixing the Footer Blog Post Feed

At the bottom of the design there is a blog feed section in the footer. This feed needs to be dynamic, automatically populating with posts created in the admin panel. The following code is responsible for the blog feed in the HTML template:

The above HTML code will be replaced with the below code, which uses the Oncord data repeater tag to get blog posts:

Making The Navigation Dynamic

The next step in the design implementation is making the main website navigation dynamic. This will cause changes made through the admin control panel to be reflected in the navigation.

The following HTML is currently responsible for the website navigation:

The above code was replaced with a Oncord primary navigation tag as follows:

Want to know more about working with the primary navigation tag? See this article.

To test that the above code is working correctly navigate to the pages section of the control panel and add some example pages to the website. If you add a child page, you'll notice that we've broken the drop-down functionality of the navigation. To fix this issue I simply added the CSS rules relevant to the drop-down menu as follows:

Implementing The Featured Image Slider

The posts functionality of Oncord will be used to allow the site owner to control the content which appears on the image sliders. The image which appears in the slider will be assigned to the post image, the post title will be used to replace the "Website Template" text currently in use on the slider and post short description will be used for the call to action text.

Before starting implementation of the post slider, setup a new post category of type "Additional Category" in the CMS called something along the lines of "Featured Slider". Our implementation will grab all posts assigned to this category. It's also a good idea to create a few posts and assign them to this category in order to test the updated slider. The following code is currently in use for the slider:

To implement the post system integration as discussed, replace the above code with the following:

The above code consists of two data repeaters. The first data repeater gets the first post in the requested category so it can be placed in the div with class "item active". The second data repeater gets the next two posts so they can be placed in the div "item". I've used the data repeater attribute "DataStart" in the second data repeater to ensure that it doesn't return the first post, as the first data repeater is already returning that post. 

Implement a Footer Sitemap (Replaces Twitter Feed)

I decided to replace the twitter feed with a dynamically generated site-map. It's a more common task than a twitter feed and it's a good practise for increasing SEO.

I identified the following HTML code as being responsible for the twitter feed in the original template:

This code was replaced with the following data repeater code, which checks that a page has not been set to be "Hidden in navigation" by the site owner, then displays a sitemap in the form of an unordered list

Setup the Footer Contact Form

The following code is responsible for the contact form in the HTML template:

The above code was replaced with a standard Oncord contact form as follows:

You will need to setup a form success page, which is the page which displays after the contact form is submitted. The attribute "onsubmitredirect" is used to define the form success page.

Create The Inner Page Layout

It's a common practise to have a home page design and an inner page design. The inner page design is the layout that is used throughout all other pages of the website, separate to the home page design. Rather than having multiple designs or templates, this is normally controlled through the use of a <ss:logic:if> tag that changes the layout depending on which page is currently being viewed. For example:

What Next?

The best way to make yourself more familiar with the Oncord template language is to practise it! This template is a free download, if you have any questions about this template feel free to contact us.