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

Edit Html
Edit Style Sheet
Save and Preview
Apply the template

Edit Javascript

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.

Edit template page

In tihs page there are tab menu to edit the detail of the Top Template.

Tabs of the template edit page

Edit Html

Click the "Html" tab of the template page. Then, the main area of the page switches into the page like below.

Html Edit Page

The default source code of the Html is below.


<html lang="en">
<head>
  <title>{$title}</title>
  <meta http-equiv="content-language" content="en-us" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="description" content="{$cms_page.page_description}" />
  <link rel="alternate" hreflang="en-us" href="{$self}" />
  <link rel="canonical" href="{$self}">
  {$autoHeader}
</head>
<body>
  {$autoBody}
</body>
</html>

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.

Edit the style sheet

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.

div id of the generated layer

Save and Preview

After you edit the Template Layout, Css, or Style Sheet, you have to push the "save" button to save the change.

Save and preview

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.

Preview setting

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..

Apply button

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.

Javascript editor

You can edit the Javascript here. And after you edit the script, push the "Save" button to save, and "Apply" button after that.