4.2. Style Sheets

The WebTool uses CSS for all styling and layout. Some WebTool pages use a single column layout, while others are divided into left and right columns. This layout is specified in the WebTool CSS file, located at /templates/webtool.css. You should refer to the existing template files for examples of how to declare your <DIV> tags for each type of layout.

Blocks of HTML should be declared as displayed below. First a pageEntry class DIV tag, followed by a pageEntryTitle DIV tag containing the title of the block, then a pageEntryContent DIV tag containing your content, with tables enclosed by a popupEntryWhite DIV tag. Tables should always be assigned a listing class, and any table header rows should be assigned a listing-title class. Following these guidelines will ensure that your module adheres to the look and feel of the existing modules, which helps usability and maintains a consistent experience within the WebTool.

<DIV CLASS="pageEntry">
  <DIV CLASS="pageEntryTitle"> 
    <TMPL_VAR NAME="lang_indextitle"> 
  </DIV>
  <DIV CLASS="pageEntryContent">
    <TMPL_VAR NAME="lang_indexintro">
    <DIV CLASS="popupEntryWhite">
      <TABLE WIDTH="100%" CLASS="listing">
        <TR CLASS="listing-title">
          <TD>Header 1</TD>
          <TD>Header 2</TD>
        </TR>
        <TR>
          <TD>Data 1</TD>
          <TD>Data 2</TD>
        </TR>
      </TABLE>
    </DIV>
  </DIV>
</DIV>

For pages with a multi-column layout, use a pageEntryColumn class rather than pageEntry, with either a pageEntryLeft or pageEntryRight DIV within it, as seen below.

<DIV CLASS="pageEntryColumn">

  <DIV CLASS="pageEntryLeft">
    <DIV CLASS="pageEntryColumnTitle">Left Column Title Here</DIV>
    <DIV CLASS="popupEntryWhite">
       <DIV CLASS="pageEntryContent">
         Left Column Content
       </DIV>
    </DIV>
  </DIV>

  <DIV CLASS="pageEntryRight">
    <DIV CLASS="pageEntryColumnTitle">Right Column Title Here</DIV>
    <DIV CLASS="popupEntryWhite">
       <DIV CLASS="pageEntryContent">
         Right Column Content
       </DIV>
    </DIV>
  </DIV>

</DIV> 

Please follow these guidelines as closely as possible when designing the layout of a WebTool module, maintaining a consistent user experience with your module relative to the rest of the WebTool is as critical as proper functionality.