Customize Layout of Components

The Top and Container Templates are to layout Html5 parts. You can edit them with GUI editor on the web browser.


Edit Layout of the Template

In order to change the layout of template, we can do that with GUI editor.

Click the "" button on the top page of the administration console.

Template Management buttons

Then following page appears.

Top Template Management console

In this page, there is a list of Top Templates on the left site. And the right page is editor area to show GUI to edit them.

Open the Top Template

Click the template which you want to edit on the left pane, then the GUI editor appears on the right pane.

Template GUI editor

On this pane, there is a GUI layout on the left side, and pallet of parts on the right side.

The pallet has Html5 Components and Container Templates.

Edit Layout

You can edit the layout of template by drag and drop, or mouse action. When you change the components in the Template layout, you have to click the "Save" button.

By clicking the save button, the template's layout is saved. Then you can preview the template's appearance by clicking "preview" button. If you do not specify the page to preview, an alert to request to set page to apply template appears.

Preview alert

In order to set the page to use in preview, click the "Set Preview Input" button, then following dialog box appears.

Preview Input Setting

On this dialog box, select the page with combo box, and push the "Set Parameters" button. And push the "Preview" button, again.

Then a new popup window appears, and preview the template with the page.

After previewed and check the template's setting, please push the "Apply" button.

Apply Template button

The "Apply" button appears after saving the template setting. It is located next to the save button.

By pushing the button, the template setting is applied to the website. And the button disappears after applied update to the actual web pages.

By using this GUI editor, you can do following operations.

Change Position

You can change the position of parts by drag and drop.

Add a part

Select the component to add from the pallet on the right side of this page, and drag and drop to the GUI layout editor on the left side of this page.

Then the part is added to the layout, after that, change the position by drag and drop.

Remove a part

Click the "remove" button, then alert dialog to confirm to delete it appears. Then click the "OK" button.

Open Container Template and Html5 Component

Each parts on the left GUI area has "Open and Edit" button. By clicking it, you can open the template part with editor.

Template parts

If the part is Container Template, it opens editor page to edit Container Template, and if it is Html5 Template, it opens with Primitive Template(Html5 Component) Editor.

By using this function, you can find the parts to edit

Output Html and CSS format for Top Template

In addition to the GUI editor, it has function to edit source code the template engine outputs.

Top Template's Html

Click the "Html" tab on the top of editor pane, following pane appears.

Html Editor

On this pane, you can edit the source code of the Template. In this template there are some variables which starts with "$".

They are dynamically replaced into page contents by template engine.

For example, following variables are available.

$title

Title of the page that template engine is applied. The variable is generated by the server side program of this template.

$autoHeader

Header parts automatically added to this part. Mainly this part is generated by following factor.

  • Inner parts of this template part's header source code(Meta tag of Html, Javascript, and Style Sheet)
  • The additional header code managed by the content editor

If the meta tags are conflict with the content page's additional code, the template engine automatically adjust it. The code in the content page overrides template's code.

$autoBody

The body part's html code is replaced from this variable. This variable is generated from inner components which you set with the GUI editor.

Style Sheet of Top Template

Click the "Css" tab, then following pane appears.

Style Sheet of top template

On this input, you have to write minimum setting which is relevant to the entire page design. Because the Html5 Components and Container Templates has own style sheet, and they are added to the $autoHeader part automatically.

Javascript of Top Template

Click the "JavaScript" tab on the top of editor, following pane appears.

Edit JavaScript

The default template's Javascript code on the Top Template is to make scroll action on clicking the anchor for name smooth.

Program Part

Click the "Server Code" tab on the top of editor, following pane appears.

Server Program Editor

On this page, you can edit the server code, and debug it. How to use the debugger is same with Html5 Component's debugger.

The default template's server code is to get page content and setting, server domain, page path from the database and parameter.

Container Template's Design

The container template is to implement 2 column div layout. The Container Template is to generate the Html code and Style Sheet with responsive web design or ones for desktop pc templates.

Following page is console to edit the Container Template.

Container Template's Editor

This page has tree structured list of templates on the left side and container template editor on the right part.

By double clicking template on the left side, the template is opened with editor on the right side.

Container Part's Html

By clicking "Template Layout" tab, or the tab is activated, following editor is shown on the right side.

GUI editor of Container Template

The Container Template has 2 columns, and you can change the position of the component by drag and drop.

In addition to changing the layout, following operation is available.

Add components

Click the category of components of the pallet on the right side of the pane. And drag and drop the component to the column you want to add.

Remove a component

Each component has "remove" button, by clicking it, you can remove the component.

Open inner component with editor

Each component has "Open and Edit" button. By clicking the button, a new window opens and component editor appears on the window.

Generated source code from GUI editor

The template engine of the Content Management System generates Html code from the GUI setting. Then the ids of the div tags are used.

div ids

The part to set the div tag's id is on the top of editor pane, like picture above.

From these setting, following code is generated.

In order to design the layer, and adopt responsive web design, you can set the style sheet.

Style Sheet for responsive web design

In order to edit the style sheet for the div layer, click the "Css" tab, then following pane appears.

Edit Style Sheet

On this pane, you can write style sheet, and it is inserted into the Html code which parent Top Templates generates on publish.

In order to adopt responsive web design, write the code like following example.

In this code, the "@media" section defines style sheet for display device whose width is less than or equals 1000 pixcels.


Go to Top