Customizing Dynamic Content of Modules

The guidelines provided in this section enable you to change presentation of template dynamic content. It is described by controls. For more information on controls, refer to the Sitebuilder Controls and Variables section. When the template source code is rendered by Sitebuilder, controls are substituted by HTML code that is generated according to rules defined in the plain-text .skin file of a control. To apply custom presentation of a control in a certain color scheme, place the corresponding .skin file into a corresponding color theme directory. For example, if you want to change the design of the StatusBar control in the green color scheme, place the StatusBar.skin file into the Green folder.

This section also provides the instructions on how to customize Sitebuilder Blog and Guestbook modules. In future versions of this guide, similar instructions for other modules will be given.

Note: Sitebuilder modules can be customized only in Sitebuilder for Windows.

In this section:

StatusBar Control

Paging Control

Form Control

Customizing Parameters Specific for Blog Module

Customizing Parameters Specific for Guestbook Module

StatusBar Control

StatusBar is a control responsible for the HTML layout of status messages on sites.

File Location

[Template path]/Themes/[Colour scheme name]/StatusBar.skin

Sample

The StatuBar control is a template of messages containing results of user actions. There are three action statuses: error, success and info.

Image and text displayed after successfully performed actions are described in the SuccessTemplate. The content of the element must contain HTML code of a success message. To provide user with more details on the action use the following variables:

DefaultSuccess. Path to a default icon displayed on the message window. You can specify a different path.

MessageType . Message header.

Message. Text of a message.

InfoTemplate and SuccessTemplate structure is similar to the SuccessTemplate element's structure. Use DefaultInfo and DefaultError respectively for the elements' default icon paths.

<SiteBuilder:StatusBar>

<ErrorTemplate>

<div class="statuses-error">

<img src="$DefaultError$" align="absmiddle" style="margin-right: 3px; border: 0px;" />

<b>$MessageType$</b>$Message$

</div>

</ErrorTemplate>

<InfoTemplate>

<div class="statuses-info">

<img src="$DefaultInfo$" align="absmiddle" style="margin-right: 3px; border: 0px;" />

<b>$MessageType$</b>$Message$

</div>

</InfoTemplate>

<SuccessTemplate>

<div class="statuses-success">

<img src="$DefaultSuccess$" align="absmiddle" style="margin-right: 3px; border: 0px;" />

<b>$MessageType$</b>$Message$

</div>

</SuccessTemplate>

</SiteBuilder:StatusBar>

Strict Definition

ErrorTemplate element

Variables:

DefaultError (Optional). Stores the path to a default image.
MessageType. (Optional). Stores the message header.
Message. Stores the message text.

InfoTemplate element

Variables:

DefaultError (Optional). Stores the path to a default image.
MessageType (Optional). Stores the message header.
Message. Stores the message text.

SuccessTemplate element

Variables:

DefaultError (Optional). Stores the path to a default image.
MessageType (Optional). Stores the message header.
Message. Stores the message text.

Paging Control

Paging control is responsible for HTML layout of bottom links bar.

File Location

[Template path]/Themes/[Colour scheme name]/Pager.skin

Sample

The Paging control is a template of a paging.

The control has two attributes: PageNumber-class and CurrentPageNumber-class. These attributes define the style of navigation links in active and inactive statuses respectively.

In the Template element content defines the paging presentation.

The $TotalInfo$ text variable contains information about total number of pages.

The Template element content includes two kinds of controls:

Link
Container

Note: Starting from the 4 version of templates, you can customize HTML layout of Link controls. For more details, refer to the Link section.

The Container control with the ID=PagesContainer attribute defines the position of the paging.

All controls inside the <Template> tag are optional.

<SiteBuilder:Pager

pagenumber-class="mod-pager-a">

<Template>

<table cellpadding="0" cellspacing="0" border="0" width="100%" class="mod-pager" style="margin: 10px 0;">

<tr>

<td style="padding: 5px 10px;">$TotalInfo$</td>

<td align="right" style="padding: 5px 10px;">

<SiteBuilder:Link ID="FirstPage" class="mod-pager-a" /> 

<SiteBuilder: Link ID="PreviousPage" class="mod-pager-a" /> 

<SiteBuilder:Container ID="PagesContainer" /> 

<SiteBuilder:Link ID="NextPage" class="mod-pager-a" /> 

<SiteBuilder:Link ID="LastPage" class="mod-pager-a" />

</td>

</tr>

</table>

</Template>

</SiteBuilder:Pager>

Strict Definition

Template element

Variables:

TotalInfo (Optional). Stores total number of pages.

Controls:

ID	Type	Is required	Description
PagesContainer	Container	Optional	Position of navigation links code
FirstPage	Link	Optional	Link that leads to the first page of the list
PreviousPage	Link	Optional	Link to the previous page of the list
NextPage	Link	Optional	Link to the next page of the list
LastPage	Link	Optional	Link to the last page of the list

Pager control attributes

PageNumber. Name of CSS class applied to the inactive navigation links.
CurrentPageNumber. Name of CSS class applied to active navigation links.

Form Control

Form control is responsible for HTML layout of input fields on a page. The example of this control you can see on "Login" and "Feedback" pages.

File Location

[Template path] / Themes / [Colour scheme name] / Form.skin

Sample

The Form control is a template of a form.

The HeaderTemplate element is responsible for form header HTML layout. You can define a form header style by specifying a proper class selector as the mod-form attribute value.

To configure HTML layout of form fields, use the FieldTemplate and AlternatingFieldTemplate elements. These tags are used to modify HTML layout of even and odd fields respectively. For example, you can set different backgrounds for even and odd fields.

The $Caption$ variable contains the description of a field. The ValidationText control with attribute ID=IsRequired defines a place where the "is required" asterisk appears on the screen. You can set class or style attributes for this control. Also, you can change the way the validation messages appear on the page: if you set Display="Static", the form page will not be resized when the validation message is displayed. If you set Display="Dynamic", the page will be automatically resized when the message is displayed.

The FooterTemplate element is responsible for form footer HTML layout.

<SiteBuilder:Form input-class="mod-input">

<HeaderTemplate>

<table cellpadding="5" cellspacing="0" width="100%" class="mod-form" style="margin: 10px 0; border: 0;">

</HeaderTemplate>

<FieldTemplate>

<tr>

<td width="30%">$Caption$<SiteBuilder:ValidationText Display="Static" ID="IsRequired" /></td>

<td width="70%"><SiteBuilder:Container ID="InputHolder" /></td>

</tr>

</FieldTemplate>

<AlternatingFieldTemplate>

<tr>

<td width="30%">

$Caption$<SiteBuilder:ValidationText Display="Static" ID="IsRequired" />

</td>

<td width="70%"><SiteBuilder:Container ID="InputHolder" /></td>

</tr>

</AlternatingFieldTemplate>

<FooterTemplate>

</table>

</FooterTemplate>

</SiteBuilder:Form>

Strict Definition

HeaderTemplate element

No special variables or controls.

FieldTemplate, AlternatingFieldTemplate elements

Variables:

Caption. Stores text description of the form fields. Can be wrapped into TextDiv.

Controls:

ID	Type	Is required	Description
IsRequired	ValidationText	Required	Defines if the "is required" asterisk is set for a form field
InputHolder	Container	Required	Position of input controls code

FooterTemplate element

No special variables or controls.

Form control attributes:

input-class – it is a name of the CSS class applied to the input controls.

Customizing Parameters Specific for Blog Module

You can change HTML layout of pages specific for the Blog module, such as page listing all blog posts and page displaying content of a certain post.

Note: The Blog module can be customized only in Sitebuilder 3.2.1 for Windows and later versions of Sitebuilder for Windows.

List of Blog Posts

To create HTML layout of a Blog page displaying a list of posts, the ListPosts.page file is used. Modify this file to create a special Blog design.

File Location

[Template path] / Themes / [Colour scheme name] / Blog / ListPosts.page

Sample

<!-- Category description block - white div with padded text. If no category chosed - all div will be hidden.

Use simple $CategoryDescription$ variable if you need just output text. -->

<SiteBuilder:TextDiv ID="CategoryDescription" class="mod-category-body" style="padding: 10px; margin: 10px 0 0 0;"/>

<SiteBuilder:List ID="EntryList">

<ItemTemplate>

<tr>

<b>$Title$</b>

</div>

</td>

</tr>

<tr>

<div id="truncationEnvelope">$Entry$</div>

<SiteBuilder:Link ID="ReadMore" class="mod-item-body-a-strong" /> 

<SiteBuilder:Link ID="ToComments" class="mod-item-body-a-strong" />

</div>

</td>

</tr>

</table>

</ItemTemplate>

<AlternatingItemTemplate>

<tr>

<b>$Title$</b>

</div>

</td>

</tr>

<tr>

<div id="truncationEnvelope">$Entry$</div>

<SiteBuilder:Link ID="ReadMore" class="mod-item-body-a-strong" /> 

<SiteBuilder:Link ID="ToComments" class="mod-item-body-a-strong" />

</div>

</td>

</tr>

</table>

</AlternatingItemTemplate>

</SiteBuilder:List>

<SiteBuilder:Container ID="Pager" />

<SiteBuilder:Link ID="BackLink" />

</div>

This sample shows default layout of the ListPosts.page file.

The CategoryDescription variable stores description of a Blog module category. It is wrapped inside the TextDiv control. For details on the control, refer to the TextDiv section.

The List control with the ID=EntryList attribute defines a blog post entries template.

ItemTemplate element defines presentation of a blog post.

AlternatingItemTemplate element defines presentation of even blog posts.

Variables Time, Title and Entry that represent post time, post title and post body can reside inside the ItemTemplate and AlternatingItemTemplate elements.

In addition, you can customize Link controls with IDs ReadMore and ToComments. The controls define the position of links to "full posts list" and "post comments" pages (correspondingly).

Container with ID Pager reserves place for a paging control. Refer to the Paging Control section for details on how to customize the control.

Link with ID BackLink describes defines the position of a link to posts archive.

Strict Definition

ListPosts.page file

Variables:

CategoryDescription. The description of a selected category. Can be wrapped into TextDiv.

Controls:

ID	Type	Is required	Description
EntryList	List	Required	Template of a blog post entry
Pager	Container	Required	Position of paging code
BackLink	Link	Required	Position of link to posts archive
RSSLink	Link	Required	Position of link to blog posts rss feed

ItemTemplate, AlternatingItemTemplate elements

Variables

Time. Time when an entry was posted. Can be wrapped into TextDiv.
Title. Title of the post entry. Can be wrapped into TextDiv.
Entry. Body of the post entry. Can be wrapped into TextDiv.

Controls:

ID	Type	Is required	Description
ReadMore	Link	Required	Link to list of all posts
ToComments	Link	Required	Link to comments on a blog entry

Post Comments

The ShowPost.page file defines the layout of a page that displays content of a certain blog post, including list of comments to the post and form for posting new comments.

File Location

[Template path] / Themes / [Colour scheme name] / Blog / ShowPost.page

Sample

<tr>

<b>$PostedOn$</b>

</div>

$Entry$

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

<td>

<SiteBuilder:Link class="mod-item-body-a" ID="BackLink" />

</td>

<SiteBuilder:Link id="AddCommentLink" class="mod-item-body-a-strong" style="cursor: hand;" />

</td>

</tr>

</table>

<SiteBuilder:List ID="CommentList" style="width: 100%;">

<ItemTemplate>

<tr>

<b>$Author$</b>

</div>

</td>

</tr>

<tr>

<b>$Title$</b>

</div>

$Comment$

</td>

</tr>

</table>

</ItemTemplate>

<AlternatingItemTemplate>

<tr>

<b>$Author$</b>

</div>

</td>

</tr>

<tr>

<b>$Title$</b>

</div>

$Comment$

</td>

</tr>

</table>

</AlternatingItemTemplate>

</SiteBuilder:List>

<SiteBuilder:Container ID="Pager" />

<tr>

<b>$AddCommentTitle$</b>

</td>

</tr>

<tr>

</div>

</td>

</tr>

<tr>

$AuthorCaption$

<SiteBuilder:ValidationText Display="Static" ID="AuthorIsRequired" /><br/>

<SiteBuilder:TextInput ID="AuthorInput" class="mod-input" style="width: 100%;" />

</td>

$SubjectCaption$

<SiteBuilder:ValidationText Display="Static" ID="SubjectIsRequired" /><br />

<SiteBuilder:TextInput ID="SubjectInput" class="mod-input" style="width: 100%;" />

</td>

</tr>

<tr>

$MessageCaption$

<SiteBuilder:ValidationText Display="Static" ID="MessageIsRequired" /><br />

<SiteBuilder:TextInput ID="MessageInput" class="mod-input" style="width: 100%; height: 87px;" />

</td>

</tr>

<tr>

<SiteBuilder:Button ID="AddComment" class="mod-form-button" />

</td>

</tr>

</table>

This sample shows default layout of the ShowPost.page file.

The first table section content contains a Blog entry template.

The table is followed by a List control with ID CommentList that defines the template for comments on an entry. The Paging control defines the position of a paging for this list. For details on how to customize the control, refer to the Paging Control section.

The paging is followed by a form for adding a new comment. This form is divided into separate controls so you can provide much more flexible layout than with Form control. The Form control is still required for pages with variable number of fields. For example, the Feedback module can be described only with the Form control.

Variable AddCommentTitle stores the form name. The form includes the following elements: Author of comment, Subject and Message fields and Button with ID AddComment. Each field name is defined by a variable with suffix Caption (for example, AuthorCaption)

Control TextInput displays HTML form input fields. Control ValidationText displays a validation message if a user entered invalid data into a field.

Strict Definition

ShowPost.page file

Variables:

Entry. A Blog entry. Can be wrapped into TextDiv.
PostedOn. Time when the entry was posted. Can be wrapped into TextDiv.
AddCommentTitle. (Optional) Name of a form. Can be wrapped into TextDiv.
AuthorCaption. (Optional) Caption for the author input field. Can be wrapped into TextDiv.
SubjectCaption. (Optional) Caption for the comment subject input field. Can be wrapped into TextDiv.
MessageCaption. (Optional) Caption for the comment input field. Can be wrapped into TextDiv.

Controls:

ID	Type	Is required	Description
BackLink	Link	Required	Link to list of Blog entries
AddCommentLink	Link	Required	Link to comments on a Blog entry
CommentList	List	Required	Template for comments on a Blog entry
Pager	Container	Required	Position of a paging code
AuthorInput	TextInput	Required	Input field "author of comment"
AuthorIsRequired	ValidationText	Required	Validation text for input field "author of comment"
SubjectInput	TextInput	Required	Input field "subject of comment"
SubjectIsRequired	ValidationText	Required	Validation text for input field "subject of comment"
MessageInput	TextInput	Required	Input field "body of comment"
MessageIsRequired	ValidationText	Required	Validation text for input field "body of comment"
Captcha	Container	Optional	CAPTCHA image and input field
AddComment	Button	Required	Button for submitting form.

ItemTemplate, AlternatingItemTemplate elements

Variables

Author. Author of a comment. Can be wrapped into TextDiv.
Time. Posted time of a comment. Can be wrapped into TextDiv.
Title. Subject of a comment. Can be wrapped into TextDiv.
Comment. Body of a comment. Can be wrapped into TextDiv.

Customizing Parameters Specific for Guestbook Module

You can change HTML layout of pages specific for the Guestbook module. For instance, you can customize page listing all guestbook messages and page showing the form for composing a new message.

Note: The Guestbook module can be customized only in Sitebuilder 3.2.1 for Windows and later versions of Sitebuilder for Windows.

File Location

[Template path] / Themes / [Colour scheme name] / Guestbook / MessageList.page

Sample

<!-- Here StatusBar will be displayed. Customize it you can in StatusBar.skin file. -->

<SiteBuilder:Container ID="StatusBar" />

<SiteBuilder:List ID="MessageList">

  <ItemTemplate>

    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse: collapse; margin-top: 10px;">

      <tr>

         <td class="mod-item-header" style="padding: 5px 10px;">

           <div style="float:left;">

             <b>$Author$</b>

             <!-- This link is visible when user, that left message, was logged in -->

             <SiteBuilder:Link ID="MailTo" style="margin-left:10px;"><img src="$DefaultMail$" alt="$Text$" align="absmiddle" border="0" /></SiteBuilder:Link>

             <!-- This link is visible when user, that left message, was logged in and filled his homepage url -->

             <SiteBuilder:Link ID="HomePage" style="margin-left:10px;"><img src="$DefaultWWW$" alt="$Text$" align="absmiddle" border="0" /></SiteBuilder:Link>

           </div>

           <div style="float:right;">$Time$</div>

         </td>

      </tr>

      <tr>

         <td class="mod-item-body" style="padding: 5px 10px;">$Message$</td>

      </tr>

      </table>

  </ItemTemplate>

  <AlternatingItemTemplate>

    <table cellpadding="0" cellspacing="0" border="0" width="100%" style="border-collapse: collapse; margin-top: 10px;">

      <tr>

         <td class="mod-item-header" style="padding: 5px 10px;">

           <div style="float:left;">

             <b>$Author$</b>

             <!-- This link is visible when user, that left message, was logged in -->

             <SiteBuilder:Link ID="MailTo" style="margin-left: 10px;"><img src="$DefaultMail$" alt="$Text$" align="absmiddle" border="0" /></SiteBuilder:Link>

             <!-- This link is visible when user, that left message, was logged in and filled his homepage url -->

             <SiteBuilder:Link ID="HomePage" style="margin-left: 10px;"><img src="$DefaultWWW$" alt="$Text$" align="absmiddle" border="0"/></SiteBuilder:Link>

           </div>

           <div style="float:right;">$Time$</div>

         </td>

      </tr>

      <tr>

         <td class="mod-item-body-alter" style="padding: 5px 10px;">$Message$</td>

      </tr>

    </table>

  </AlternatingItemTemplate>

</SiteBuilder:List>

<!-- Here Pager for MessageList will be displayed. Customize Pager you can in Pager.skin file. -->

<SiteBuilder:Container ID="Pager" />

<table cellpadding="10" cellspacing="0" border="0" width="100%" class="mod-form" style="margin: 10px 0;">

  <tr>

    <td class="mod-form-title">

      <b>$AddMessageTitle$</b>

    </td>

  </tr>

  <tr>

    <td style="padding: 0 10px;">

      <div class="mod-form-hr" style="height:1px;">

         <span></span>

      </div>

    </td>

  </tr>

  <tr>

    <td>

      $AuthorCaption$

      <SiteBuilder:ValidationText Display="Static" ID="AuthorIsRequired" />

      <br/>

      <SiteBuilder:TextInput ID="AuthorInput" class="mod-input" style="width: 100%" />

    </td>

  </tr>

  <tr>

    <td style="padding: 0 10px;">

      $MessageCaption$

      <SiteBuilder:ValidationText Display="Static" ID="MessageIsRequired" />

      <br />

      <SiteBuilder:TextInput ID="MessageInput" class="mod-input" style="width: 100%; height: 87px;" />

    </td>

  </tr>

  <tr>

    <td align="right">

      <SiteBuilder:Button ID="AddMessage" class="mod-form-button" />

    </td>

  </tr>

</table>

This is a default layout of the Guestbook module. Container StatusBar reserves the place for server messages. The next item is a template of a guestbook message. The template is followed by a messages list paging and form for adding a guestbook message. The form includes fields (Author and Message) and a submit button.

Strict Definition

MessageList.page file

Variables:

AddMessageTitle. (Optional) Form title. Can be wrapped into TextDiv.
AuthorCaption. (Optional) Caption for the author input field. Can be wrapped into TextDiv.
MessageCaption. (Optional) Caption for the comment input field. Can be wrapped into TextDiv.

Controls:

ID	Type	Is required	Description
StatusBar	Container	Required	Position to a status bar code
MessageList	List	Required	Template of a guestbook message.
Pager	Container	Required	Position of paging code
AuthorInput	TextInput	Required	Input field "author of comment"
AuthorIsRequired	ValidationText	Required	Validation text for input field "author of comment"
MessageInput	TextInput	Required	Input field "subject of comment"
MessageIsRequired	ValidationText	Required	Validation text for input field "subject of comment"
Captcha	Container	Optional	CAPTCHA image and input field
AddMessage	ValidationText	Required	Button for submitting a form.

ItemTemplate, AlternatingItemTemplate elements

Variables:

Message. Body of a message. Can be wrapped into TextDiv.
Time. Time when the message was posted. Can be wrapped into TextDiv.
Author. Author of the message. Can be wrapped into TextDiv.

Controls:

ID	Type	Is required	Description
MailTo	Link	Required	Mailto-link if a message was posted by an authorized user
HomePage	Link	Required	Link to user home page if a message was posted by an authorized user and he entered his homepage URL in the profile