diff --git a/static/websetup/websetup.css b/static/websetup/websetup.css
index 3e55c3a7..f719f977 100644
--- a/static/websetup/websetup.css
+++ b/static/websetup/websetup.css
@@ -2,10 +2,10 @@ html, body {
     font-family: Noto, Ubuntu, sans-serif;
     color: white;
     background-color: #507e92;
-    text-shadow: 0.2ex 0.2ex 0.1ex rgba(0, 0, 0, 0.2);
+    text-shadow: 0.2ex 0.2ex 0.2ex rgba(0, 0, 0, 0.2);
 }
 
-a, a:link { color: #aef0ff; }
+a, a:link { color: #aef0ff; text-decoration: underline; }
 a:visited { color: #e6fff2; }
 a:hover { color: #d0f7eb; }
 a:active { color: #f7d0d2; }
@@ -48,7 +48,22 @@ input {
 }
 
 #config section {
-    margin-bottom: 30px;
+    padding: 0.1em 0.2em;
+    margin-bottom: 3em;
+    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#5d93aa+0,507e92+11,73b1e7+100&1+0,0+26 */
+    background: -moz-linear-gradient(top, rgba(93,147,170,1) 0%, rgba(80,126,146,0.58) 11%, rgba(86,135,160,0) 26%, rgba(115,177,231,0) 100%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(top, rgba(93,147,170,1) 0%,rgba(80,126,146,0.58) 11%,rgba(86,135,160,0) 26%,rgba(115,177,231,0) 100%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to bottom, rgba(93,147,170,1) 0%,rgba(80,126,146,0.58) 11%,rgba(86,135,160,0) 26%,rgba(115,177,231,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d93aa', endColorstr='#0073b1e7',GradientType=0 ); /* IE6-9 */
+    border: 1px solid #477082;
+}
+
+h3 {
+    margin: 0.2em 0 0.8em 0;
+}
+
+.note {
+    padding: 0.4em 1em;
 }
 
 .help-block {
diff --git a/templates/websetup/index.html b/templates/websetup/index.html
index b5145340..e433613c 100644
--- a/templates/websetup/index.html
+++ b/templates/websetup/index.html
@@ -66,12 +66,22 @@
 
         <section>
             <h3>Variables</h3>
-            <p>Also see the <a href='https://www.flamenco.io/docs/user_manual/installation/#manager-configuration' target='_blank'>Manager Configuration</a>
-                section in the Flamenco documentation.</p>
+            <p>Click on any cell in the tables below to edit.</p>
+            <p class='note text-warning bg-warning'><strong>IMPORTANT</strong>: Use forward slashes only, also on Windows (e.g. <code>S:/flamenco-jobs</code>).</p>
+
+            <h4>Regular variables</h4>
+            <p>Some tasks require certain variables. For example, rendering with Blender requires
+                that the `blender` variable points to the Blender executable for each Worker
+                platform. Also see the <a
+                href='https://www.flamenco.io/docs/user_manual/installation/#manager-configuration'
+                target='_blank'>Manager Configuration</a> section in the Flamenco documentation.</p>
             <div id='variables-table' class='table-editable'>
                 {{template "vartable" .Config.VariablesByVarname}}
             </div>
-            <h3>Path Replacement Variables</h3>
+            <h4>Path Replacement Variables</h4>
+            <p>These variables work both ways, so for example <code>R:/render/job.blend</code>
+                created on Windows may be rewritten to <code>{render}/job.blend</code>, which in
+                turn is seen as <code>/media/render/job.blend</code> on a Linux worker.</p>
             <div id='path-variables-table' class='table-editable'>
                 {{template "vartable" .Config.PathReplacementByVarname}}
             </div>