Theme Design: Body Theme

The core of the theme is the body theme file. It defines the layout structure between the html body tags and dynamic elements like content zones, navigation and login controls.

Content Zones

When administrators add applications to the page they are placed within the available content zones. Zones are nothing more that HTML containers such as span, div, or td/th tags with id and runat="server" attributes. There is a special set of zones called the I-Block that are required in every theme’s main content area. The I-Block is a table with five zones, HeaderPane, LeftPane, ContentPane, RightPane, and FooterPane like below.

<table>
  <tr>
    <td colspan="3" ID="HeaderPane" RunAt="server"> </td>
  </tr>
  <tr>
    <td ID="LeftPane" RunAt="server"> </td>
    <td ID="ContentPane" RunAt="server"> </td>
    <td ID="RightPane" RunAt="server"> </td>
  </tr>
  <tr>
    <td colspan="3" ID="FooterPane" RunAt="server"> </td>
  </tr>
</table>

 

All other zones are called detached zones, and they can appear anywhere within the design.

Theme Controls

Theme controls are server site elements that render various things in the page, such as menus and system content. There are a variety of theme controls available as listed below:

All of these controls are optional, but there are a few that should always be included such as Login and menu. When these are omitted a user is left with no way to authenticate with or navigate the site.