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
- Output Html and CSS format for Top Template
- Container Template's Design
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.
Then following page appears.
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.
Click the template which you want to edit on the left pane, then the GUI editor appears on the right pane.
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.
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.
In order to set the page to use in preview, click the "Set Preview Input" button, then following dialog box appears.
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.
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.
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.
Each parts on the left GUI area has "Open and Edit" button. By clicking it, you can open the template part with editor.
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
In addition to the GUI editor, it has function to edit source code the template engine outputs.
Click the "Html" tab on the top of editor pane, following pane appears.
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 of the page that template engine is applied. The variable is generated by the server side program of this template.
Header parts automatically added to this part. Mainly this part is generated by following factor.
- 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.
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.
Click the "Css" tab, then following pane appears.
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.
Click the "Server Code" tab on the top of editor, following pane appears.
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.
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.
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.
By clicking "Template Layout" tab, or the tab is activated, following editor is shown on the right side.
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.
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.
The template engine of the Content Management System generates Html code from the GUI setting. Then the ids of the div tags are used.
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.
In order to edit the style sheet for the div layer, click the "Css" tab, then following pane appears.
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.