Shout: Prettify the wizard some more

diff --git a/shout/templates/wizard.inc b/shout/templates/wizard.inc
index abb5ffe..f1daff7 100644 (file)
--- a/shout/templates/wizard.inc
+++ b/shout/templates/wizard.inc
@@ -1,47 +1,55 @@
 <div id="wizard">
-<h3 onclick="showstep('welcome')">Welcome</h3>
-<div id="welcome" class="step">
-    <p>Here you will configure your new PBX.  Follow the simple instructions below, yada, yada.
-    <p><span class="button" onclick="showstep('step1')">Continue to Step 1</span></p>
+<div class="step">
+    <h3 onclick="showstep('welcome')">Welcome</h3>
+    <div id="welcome">
+        <p>Here you will configure your new PBX.  Follow the simple instructions below, yada, yada.
+        <p><span class="button" onclick="showstep('step1')">Continue to Step 1</span></p>
+    </div>
 </div>
 
-<h3 onclick="showstep('step1')">Step 1: Create your company greeting</h3>
-<div id="step1" class="step">
-    <ol>
-        <li>1: Call your new number: FIXME</li>
-        <li>2: When you hear the default greeting, press the star key, "<span class="attention">*</span>".</li>
-        <li>3: When prompted, enter your admin PIN: <span class="attention"><?php echo $curaccount['adminpin']; ?></span>.</li>
-        <li>4: Press <span class="attention">1</span> to manage recordings.</li>
-        <li>5: Enter the recording ID for your new menu: <span class="attention"><?php echo $recording['id']; ?></span><br>
-        Follow the prompts to create and save your new recording.</li>
-    </ol>
-    <p>When finished, hang up.</p>
-    <p><span class="button" onclick="showstep('step2')">Continue to Step 2</span></p>
+<div class="step">
+    <h3 onclick="showstep('step1')">Step 1: Create your company greeting</h3>
+    <div id="step1">
+        <ol>
+            <li>Call your new number: FIXME</li>
+            <li>When you hear the default greeting, press the star key, "<span class="attention">*</span>".</li>
+            <li>When prompted, enter your admin PIN: <span class="attention"><?php echo $curaccount['adminpin']; ?></span>.</li>
+            <li>Press <span class="attention">1</span> to manage recordings.</li>
+            <li>Enter the recording ID for your new menu: <span class="attention"><?php echo $recording['id']; ?></span><br>
+            Follow the prompts to create and save your new recording.</li>
+        </ol>
+        <p>When finished, hang up.</p>
+        <p><span class="button" onclick="showstep('step2')">Continue to Step 2</span></p>
+    </div>
 </div>
 
-<h3 onclick="showstep('step2')">Step 2: Create your first extension</h3>
-<div id="step2" class="step">
-    <?php require SHOUT_TEMPLATES . '/extensions.inc.php'; ?>
-    <br />
-    <br />
-    <div>
-        <span class="button" onclick="showstep('finished')">
-            <?php echo Horde::img('save.png'); ?>
-            Finished
-        </span>
-    </div><br/>
+<div class="step">
+    <h3 onclick="showstep('step2')">Step 2: Create your first extension</h3>
+    <div id="step2">
+        <?php require SHOUT_TEMPLATES . '/extensions.inc.php'; ?>
+        <br />
+        <br />
+        <div>
+            <span class="button" onclick="showstep('finished')">
+                <?php echo Horde::img('save.png'); ?>
+                Finished
+            </span>
+        </div><br/>
+    </div>
 </div>
 
-<h3 onclick="showstep('finished')" class="step">Finished!</h3>
-<div id="finished" class="step">
-    <p>Congratulations! Your new phone system is now configured and ready to use.</p>
-    <p>For additional information on using these tools, we have the following resources available:</p>
-    <ul>
-        <li><a>Printable documentation</a></li>
-        <li><a>Getting Started video</a></li>
-    </ul>
-    <br />
-    <p><a class="button" href="dialplan.php">Continue to the control panel</a></p>
+<div class="step">
+<h3 onclick="showstep('finished')">Finished!</h3>
+    <div id="finished">
+        <p>Congratulations! Your new phone system is now configured and ready to use.</p>
+        <p>For additional information on using these tools, we have the following resources available:</p>
+        <ul>
+            <li><a>Printable documentation</a></li>
+            <li><a>Getting Started video</a></li>
+        </ul>
+        <br />
+        <p><a class="button" href="dialplan.php">Continue to the control panel</a></p>
+    </div>
 </div>
 </div>
 <script type="text/javascript">

diff --git a/shout/themes/screen.css b/shout/themes/screen.css
index 8b87268..c8f8a02 100644 (file)
--- a/shout/themes/screen.css
+++ b/shout/themes/screen.css
@@ -210,37 +210,37 @@ span.device:hover
     z-index: 5;
 }
 
+div#wizard
+{
+    border: 2px solid #c00;
+    padding: 5px;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
+    width: 500px;
+    background-color: #fcc;
+}
+
 div#wizard h3
 {
     cursor: pointer;
-    border-top: 5px solid #c00;
-    border-left: 5px solid #c00;
-    border-right: 5px solid #c00;
-    -moz-border-radius-topleft: 5px;
-    -webkit-border-top-left-radius: 5px;
-    border-top-left-radius: 5px;
-    -moz-border-radius-topright: 5px;
-    -webkit-border-top-right-radius: 5px;
-    border-top-right-radius: 5px;
     padding: 0 5px;
     display: block;
-    width: 500px;
+}
+
+div#wizard ol, div#wizard ul {
+    margin-left: 30px;
 }
 
 .step
 {
-    width: 500px;
-    border-left: 5px solid #c00;
-    border-bottom: 5px solid #c00;
-    border-right: 5px solid #c00;
-    margin: 0;
+    background-color: #fff;
+    border: 2px solid #c00;
+    margin: 5px;
     padding: 0 5px;
-    -moz-border-radius-bottomleft: 5px;
-    -webkit-border-bottom-left-radius: 5px;
-    border-bottom-left-radius: 5px;
-    -moz-border-radius-bottomright: 5px;
-    -webkit-border-bottom-right-radius: 5px;
-    border-bottom-right-radius: 5px;
+    -moz-border-radius: 10px;
+    -webkit-border-radius: 10px;
+    border-radius: 10px;
 }
 
 .form {