Edit Html, Style Sheet and Javascript of the Top Template
After creating a new Top Template, and adding parts of the template, you can edit the detail of this template.
Edit design
In order to edit the design of the Top Template, Go to the Top Template management page, and click the template to edit. Then following page appears.
In tihs page there are tab menu to edit the detail of the Top Template.
Edit Html
Click the "Html" tab of the template page. Then, the main area of the page switches into the page like below.
The default source code of the Html is below.
In this html code there are some section to be automatically generated on publish. They are following parameters.
- $title
- $autoHeader
- $autoBody
The "$title" variable is generated by the server code of this Top Template.
The "$autoHeader" is generated by the template publish engine. The engine calculates all of the Css and Javascript to include in this page from Top Template setting and Container Template, Primitive Template which this Top Template includes.
The "$autoBody" is generated from the Template Layout Setting and document content to publish.
Edit Style Sheet
You can edit the css of the "div" tag which is used for the top layer. Click the "Css" tab.
Then the page part like above appears.
In this page, you can edit the css. The code is included in the "$autoHeader" section of generated Html on publish.
The id of the "div" tag is shown at the Template Layout Tab's section.
Save and Preview
After you edit the Template Layout, Css, or Style Sheet, you have to push the "save" button to save the change.
After you push the save button, the change is saved and you can preview the template.
In order to preview the page, you have to specify the page to preview. Click the "Set Preview input" button, then dialog below appears.
Select the page to preview (input) and push the "Set Parameters" button. Next, push the "Preview" button, then a popup window to preview the html published by the template apears.
Apply the template
After preview and checking it, push the "Apply" button, then the template is finally updated, and the change is applied to your website's pages using the Top Template..
Edit Javascript
You can also edit the Javascript of this Template. The javascript is also included in the "$autoHeader" section of generated Html on publish.
Click the "JavaScript" tab on the tab menu. Then following page part appears.
You can edit the Javascript here. And after you edit the script, push the "Save" button to save, and "Apply" button after that.