After creating a new Top Template, and adding parts of the template, you can edit the detail of this template.
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.
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.
The "$title" variable is generated by the server code of this Top Template.
The "$autoBody" is generated from the Template Layout Setting and document content to publish.
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.
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.
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..