DeveloperTemplates

Colewhite Website Template

Colewhite Website Template

Template Description

Colewhite is a simple, clean template based on Bootstrap 3, targeted at professional services firms.

Colewhite offers a great way to get started developing solutions with Synergy 8, and showcases some common CMS features and design implementation approaches such as:

- A full width home page editable via the page editor. 
- Other pages use a sidebar display, with a blog feed. 
- A toggleable call-to-action section above the website footer.

Get Started

View Live Preview. 
Download Design Template.
Download Example Pages.

Setup Instructions

The following instructions will walk you through all the steps necessary to get up and running with this design template:

  1. Import the Design.
  2. Import the Example Pages.
  3. Setup a Post Category for the Blog.
  4. Customize the Post Display.
  5. Update the Footer Navigation Menu.
  6. Update the Contact Form. 
  7. Add your own CSS.

1. Import the Design Template

Navigate to Dashboard > Website > Designs.

Select the "Import" option from the menu at the top of the page. 

Upload the design template (zip file). After the upload is complete, click "Import Designs".

2. Import the Example Pages

Navigate to Dashboard > Website > Pages.

Select the "Import" option from the menu at the top of the page. 

Upload the example pages (zip file).

3. Setup a Post Category for the Blog

This design uses a Post Category to display recent blog articles on the home page, and in a sidebar.

As a background; Post Categories are used to categorize and sort website posts. After you have created a Post Category, you will be able to use an <ss:data:repeater> to display all posts assigned to the post category:

If you haven't worked with Synergy 8 Posts before, read our help articles first for some context on how Posts and Post Categories are used.

To create a new Post Category:

Navigate to Dashboard > Website > Posts > Click "Categories" > Click "New Category". 

Set the Category title to "Blog" (or whatever you please).

Select the Post Category type "Primary Category".

If you've already imported the example pages, select "Use Existing Page" and select the blog page that already exists. Otherwise, leave "auto-generate location" ticked so that a new page is generated for you.

4. Customize the Default Post Display

Each Synergy 8 design has a Post Display, which can be used as a standard display for listing Posts throughout the website.

To configure the Post display navigate to Dashboard > Website > Designs. 

Below the title of your website design, you will notice a small heading "Dynamic Templates". Click the link "Posts - List Display".

Click the "Source" button, and override the display with the following code:

5. Update the Footer Navigation Menu

There are two dynamic, auto-populating menus in the footer of the website. 

The navigation menu under the heading "Sitemap" is set to populate with all pages underneath the home page: 

However the second navigation menu under the heading "Services" is set to populate with all pages underneath the Services page. This will cause an issue if the Services page does not exist:

To change which pages should appear in this menu, just update the rootpage="" attribute of the <ss:navigation:primary> tag to specify a different page.

For more info on navigation menus, click here

6. Update the Contact Form

Don't forget to update the contact form! If you imported the example pages, a contact enquiry form will be included on the contact page.

You need to update the e-mail address used to notify admin users of a submission. To do this, just update the onsubmitemail="" attribute of the <ss:forms:form> tag. 

For more information about contact enquiry forms, check out this tutorial.

7. Add your own CSS

As standard practice, in order to add your own CSS or to override the CSS used in this design, you should edit the website design, open the SRC view, and add your styles via the "CSS" tab. 

You'll notice that there's already some CSS declared in the CSS tab of this design. For convenience, most of the CSS you'd want to update has been placed here.