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.