Tool forms now display labels above the fields rather than beside. This is both substantially easier to use [1], and it allows us to have longer labels (and thus, not have to worry about the details of a particular type of display when writing tool configurations).

[1] http://www.uxmatters.com/MT/archives/000107.php)

static/june_2007_style/base.css.tmpl

@@ -9,8 +9,6 @@ body
     background-repeat: repeat-x;
     background-position: top;
     margin: 10px;
-    margin-right: 15px;
-    margin-left: 15px;
 }
 
 a:link, a:visited, a:active
@@ -39,6 +37,8 @@ div.toolFormTitle
 { 
   font-weight: bold;
   padding: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
   background: $form_title_bg_bottom;
   background-image: url(form_title_bg.png);
   background-repeat: repeat-x;
@@ -53,11 +53,13 @@ div.toolParamHelp
 
 div.toolFormBody
 { 
-  padding: 10px;
   background: $form_body_bg_bottom;
   background-image: url(form_body_bg.png);
   background-repeat: repeat-x;
   background-position: top;
+  padding: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 
 div.toolFormBody div.toolFormTitle
@@ -86,11 +88,28 @@ div.form-row
     margin-bottom: 1em;
 }
 
+div.form-title-row
+{
+    margin-bottom: 0.5em;
+}
+
+div.repeat-group-item
+{
+    border-left: solid $form_border 5px;
+    padding-left: 10px;
+}
+
+div.form-row-error
+{
+    background: $error_message_bg;
+    padding: 5px;
+}
+
 div.form-row label
 {
     font-weight: bold;
     display: block;
-    margin-bottom: .1em;
+    margin-bottom: .2em;
 }
 
 select, input, textarea
@@ -242,4 +261,48 @@ div.odd_row
     
 #footer {
   display: none;
+}
+
+## Tool panel stuff
+
+td.panel-body
+{
+    background: white;
+    color: $base_text;
+    background: $menu_bg_over url(menu_bg.png) top repeat-x;
+}
+
+div.toolMenu
+{
+    padding: 10px;
+}
+
+div.toolSectionPad
+{
+    margin: 0;
+    padding: 0;
+    height: 5px;
+    font-size: 0px;
+}
+
+div.toolSectionDetailsInner
+{ 
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+div.toolSectionTitle
+{
+  padding-bottom: 0px;
+  font-weight: bold;
+}
+
+div.toolTitle
+{
+  padding-top: 5px;
+  padding-bottom: 5px;
+  margin-left: 16px;
+  margin-right: 10px;
+  display: list-item;
+  list-style: square outside;
 }

static/june_2007_style/blue/base.css

@@ -9,8 +9,6 @@ body
     background-repeat: repeat-x;
     background-position: top;
     margin: 10px;
-    margin-right: 15px;
-    margin-left: 15px;
 }
 
 a:link, a:visited, a:active
@@ -39,6 +37,8 @@ div.toolFormTitle
 { 
   font-weight: bold;
   padding: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
   background: #d2c099;
   background-image: url(form_title_bg.png);
   background-repeat: repeat-x;
@@ -53,11 +53,13 @@ div.toolParamHelp
 
 div.toolFormBody
 { 
-  padding: 10px;
   background: #FFFFFF;
   background-image: url(form_body_bg.png);
   background-repeat: repeat-x;
   background-position: top;
+  padding: 5px;
+  padding-left: 10px;
+  padding-right: 10px;
 }
 
 div.toolFormBody div.toolFormTitle
@@ -86,11 +88,28 @@ div.form-row
     margin-bottom: 1em;
 }
 
+div.form-title-row
+{
+    margin-bottom: 0.5em;
+}
+
+div.repeat-group-item
+{
+    border-left: solid #d8b365 5px;
+    padding-left: 10px;
+}
+
+div.form-row-error
+{
+    background: #FFCCCC;
+    padding: 5px;
+}
+
 div.form-row label
 {
     font-weight: bold;
     display: block;
-    margin-bottom: .1em;
+    margin-bottom: .2em;
 }
 
 select, input, textarea
@@ -242,4 +261,47 @@ div.odd_row
     
 #footer {
   display: none;
+}
+
+
+td.panel-body
+{
+    background: white;
+    color: #303030;
+    background: #C1C9E5 url(menu_bg.png) top repeat-x;
+}
+
+div.toolMenu
+{
+    padding: 10px;
+}
+
+div.toolSectionPad
+{
+    margin: 0;
+    padding: 0;
+    height: 5px;
+    font-size: 0px;
+}
+
+div.toolSectionDetailsInner
+{ 
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+div.toolSectionTitle
+{
+  padding-bottom: 0px;
+  font-weight: bold;
+}
+
+div.toolTitle
+{
+  padding-top: 5px;
+  padding-bottom: 5px;
+  margin-left: 16px;
+  margin-right: 10px;
+  display: list-item;
+  list-style: square outside;
 }

static/light_hatched_style/base.css.tmpl

@@ -77,6 +77,37 @@ div.toolHelpBody
 	overflow: auto;
 }
 
+/* Forms */
+
+div.form-row 
+{
+    margin-bottom: 1em;
+}
+
+div.form-title-row
+{
+    margin-bottom: 0.5em;
+}
+
+div.repeat-group-item
+{
+    border-left: solid $form_border 5px;
+    padding-left: 10px;
+}
+
+div.form-row-error
+{
+    background: $error_message_bg;
+    padding: 5px;
+}
+
+div.form-row label
+{
+    font-weight: bold;
+    display: block;
+    margin-bottom: .2em;
+}
+
 select
 {
     max-width: 300px;

static/light_hatched_style/blue/base.css

@@ -77,6 +77,37 @@ div.toolHelpBody
 	overflow: auto;
 }
 
+/* Forms */
+
+div.form-row 
+{
+    margin-bottom: 1em;
+}
+
+div.form-title-row
+{
+    margin-bottom: 0.5em;
+}
+
+div.repeat-group-item
+{
+    border-left: solid #d8b365 5px;
+    padding-left: 10px;
+}
+
+div.form-row-error
+{
+    background: #FFCCCC;
+    padding: 5px;
+}
+
+div.form-row label
+{
+    font-weight: bold;
+    display: block;
+    margin-bottom: .2em;
+}
+
 select
 {
     max-width: 300px;

templates/tool_form.tmpl

@@ -1,3 +1,4 @@
+<!-- -->
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
 #from galaxy.util.expressions import ExpressionContext 
@@ -12,33 +13,32 @@
 
 <body>
 
-#if $getVar( 'error_message', None )
-   <div class="errormessagesmall">$error_message</div>
-   <p></p>
-#end if
+## #if $getVar( 'error_message', None )
+##    <div class="errormessagesmall">$error_message</div>
+##    <p></p>
+## #end if
 
 #def do_inputs( $inputs, $tool_state, $errors, $prefix, $context=None )
   #set $context = ExpressionContext( $tool_state, $context )
   #for $input_index, $input in enumerate( $inputs.itervalues() )
     #if $input.type == "repeat"
-      #if $input_index > 0
-        <tr><td colspan="2"><hr/></td></tr>
-      #end if
-      <tr><td colspan="2"><b>${input.title_plural}</b></td></tr>
-      #set repeat_state = $tool_state[$input.name]
-      #for i in range( len( $repeat_state ) ):
-        #if $input.name in errors
-          #set rep_errors = $errors[$input.name][$i]
-        #else
-          #set rep_errors = dict()
-        #end if
-        <tr><td colspan="2"><b>${input.title} ${i + 1}</b></td></tr>
-        $do_inputs( $input.inputs, $repeat_state[$i], $rep_errors, $prefix + $input.name + "_" + str(i) + "|", $context )
-        <tr><td></td><td><input type="submit" name="${input.name}_${i}_remove" value="Remove ${input.title} ${i+1}"></td></tr>
-      #end for
-      <tr><td colspan="2">&nbsp;</td></tr>
-      <tr><td></td><td><input type="submit" name="${input.name}_add" value="Add new ${input.title}"></td></tr>
-      <tr><td colspan="2"><hr/></td></tr>
+      <div class="repeat-group">
+          <div class="form-title-row"><b>${input.title_plural}</b></div>
+          #set repeat_state = $tool_state[$input.name]
+          #for i in range( len( $repeat_state ) ):
+            <div class="repeat-group-item">
+            #if $input.name in errors
+              #set rep_errors = $errors[$input.name][$i]
+            #else
+              #set rep_errors = dict()
+            #end if
+            <div class="form-title-row"><b>${input.title} ${i + 1}</b></div>
+            $do_inputs( $input.inputs, $repeat_state[$i], $rep_errors, $prefix + $input.name + "_" + str(i) + "|", $context )
+            <div class="form-row"><input type="submit" name="${input.name}_${i}_remove" value="Remove ${input.title} ${i+1}"></div>
+            </div>
+          #end for
+          <div class="form-row"><input type="submit" name="${input.name}_add" value="Add new ${input.title}"></div>
+      </div>
     #elif $input.type == "conditional"
       #set group_state = $tool_state[$input.name]
       #set group_errors = $errors.get( $input.name, {} )
@@ -53,19 +53,37 @@
 #end def
 
 #def row_for_param( $prefix, $param, $parent_state, $parent_errors, $context, $refresh=False )
-  <tr valign="top">
-    <td>$param.get_label():</td>
-    <td>
-      #set field = $param.get_html_field( $caller, $parent_state[ $param.name ], $context )
-      #set $field.refresh_on_change = $refresh
-      <div>$field.get_html( $prefix )</div>
-      #if $parent_errors.has_key( $param.name ):
-      <div style="color: red; font-style: italic; padding-top: 1px; padding-bottom: 3px;">$parent_errors[$param.name]</div>
-      #elif $param.help
-      <div class="toolParamHelp">$param.help</div>
-      #end if
-    </td>
-  </tr>
+    #if $parent_errors.has_key( $param.name ):
+        #set cls = "form-row form-row-error"
+    #else
+        #set cls = "form-row"
+    #end if
+    <div class="$cls">
+        <label>
+            ${param.get_label()}:
+        </label>
+
+        #set field = $param.get_html_field( $caller, $parent_state[ $param.name ], $context )
+        #set $field.refresh_on_change = $refresh
+        <div style="float: left; width: 250px; margin-right: 10px;">$field.get_html( $prefix )</div>
+        #if $parent_errors.has_key( $param.name ):
+        <div style="float: left; color: red; font-weight: bold; padding-top: 1px; padding-bottom: 3px;">
+            <div style="width: 300px;"><img style="vertical-align: middle;" src="$h.url_for('/static/style/error_small.png')">&nbsp;<span style="vertical-align: middle;">$parent_errors[$param.name]</span></div>
+        </div>
+        #elif $param.help
+        ##<div class="toolParamHelp" style="float: right;">$param.help</div>
+        #end if
+        
+        #if $param.help
+        <div class="toolParamHelp" style="clear: both;">
+            $param.help
+        </div>
+        
+        #end if
+
+        <div style="clear: both"></div>
+                
+    </div>
 #end def
 
 <div class="toolForm" id="$tool.id">
@@ -82,27 +100,25 @@
     #if $tool.display_by_page[$tool_state.page]
         
         $caller.fill_template_string( $tool.display_by_page[$tool_state.page], context=$tool.get_param_html_map( $caller, $tool_state.page, $tool_state.inputs ) )
-        <input type="submit" name="runtool_btn" value="Execute">
+        <input type="submit" class="primary-button" name="runtool_btn" value="Execute">
         
     #else
     	
-      <table width="100%">
-          <tr style="display: none;"><td></td><td>
+          <div style="display: none;">
             #if $tool_state.page == $tool.last_page
-            <input type="submit" name="runtool_btn" value="Execute">
+            <input type="submit" class="primary-button" name="runtool_btn" value="Execute">
             #else
-            <input type="submit" name="runtool_btn" value="Next step">
+            <input type="submit" class="primary-button" name="runtool_btn" value="Next step">
             #end if
-          </td></tr>
+          </div>
           $do_inputs( $tool.inputs_by_page[ $tool_state.page ], $tool_state.inputs, $errors, "" )
-          <tr><td></td><td>
+          <div class="form-row">
             #if $tool_state.page == $tool.last_page
-            <input type="submit" name="runtool_btn" value="Execute">
+            <input type="submit" class="primary-button" name="runtool_btn" value="Execute">
             #else
-            <input type="submit" name="runtool_btn" value="Next step">
+            <input type="submit" class="primary-button" name="runtool_btn" value="Next step">
             #end if
-          </td></tr>    
-      </table>
+          </div>    
     	
     #end if