tweaking text

classes/_shortcodes-info.inc

@@ -1,9 +1,28 @@
 <?php if (current_user_can('submit_transcriptions')) { ?>
-  <h3><?php _e('Transcript Shortcodes', 'what-did-they-say') ?></h3>
+  <h3><?php _e('Shortcodes Info', 'what-did-they-say') ?></h3>
+
+  <h4><?php _e('Sample Transcript', 'what-did-they-say') ?></h4>
+  <pre>
+    [scene-heading]Ext. The Old Man's House[/scene-heading]
+    [scene-action]John is walking down to the car parked in the driveway.[/scene-action]
+    [dialog name="John" direction="(towards the house)"]Hey, where are the keys?[/dialog]
+  </pre>
+
+  <div style="width: 300px; border: solid #333 1px; margin: 10px; padding: 10px">
+    <div style="text-transform: uppercase; text-align: center; margin-bottom: 10px; font-weight: bold; font-family: 'Courier New'"><?php _e('Ext. The Old Man\'s House', 'what-did-they-say') ?></div>
+    <div style="font-family: 'Courier New'"><?php _e('John is walking down to the car parked in the driveway.', 'what-did-they-say') ?></div>
+    <div style="text-align: center; margin-top: 10px">
+      <div style="font-family: 'Courier New'; text-transform: uppercase"><?php _e('John', 'what-did-they-say') ?></div>
+      <div style="font-family: 'Courier New'; margin-bottom: 10px"><?php _e('(towards the house)', 'what-did-they-say') ?></div>
+      <div style="font-family: 'Courier New'"><?php _e('Hey, where are the keys?', 'what-did-they-say') ?></div>
+    </div>
+  </div>
+  
+  <h4><?php _e('Shortcode Details', 'what-did-they-say') ?></h4>
   <p>
-    <?php _e('Transcripts can be entered either using straight HTML or by using shortcodes built for What Did They Say?!?', 'what-did-they-say') ?>
+    <?php _e('Transcripts can be entered either using straight HTML or by using shortcodes built for <strong>What Did They Say?!?</strong>', 'what-did-they-say') ?>
     <?php _e('Using shortcodes will make your transcripts easier to style.', 'what-did-they-say') ?>
-    <?php _e('The default styles that come with What Did They Say?!? make your transcripts look like a screenplay.', 'what-did-they-say') ?>
+    <?php _e('The default styles that come with <strong>What Did They Say?!?</strong> make your transcripts look like a screenplay.', 'what-did-they-say') ?>
   </p>
   <h4><?php _e('Available Shortcodes', 'what-did-they-say') ?></h4>
 
@@ -22,7 +41,7 @@
     </p>
 
   <h5><?php _e('[dialog]', 'what-did-they-say') ?></h5>
-    <p><?php _e('The textfor when a character is speaking in a scene:', 'what-did-they-say') ?></p>
+    <p><?php _e('The text for when a character is speaking in a scene:', 'what-did-they-say') ?></p>
     <p>
       <?php _e('<code>[dialog name="John" direction="(towards the house)"]Hey, where are the keys?[/dialog]</code> becomes:', 'what-did-they-say') ?>
     </p>

css/wdts-admin.css

@@ -0,0 +1,40 @@
+#wdts-tab-bar {
+  margin-top: 0.5em;
+  padding: 0.7em 0 0.2em;
+  overflow: hidden
+}
+
+.wdts-tab {
+  border-style: solid;
+  border-color: #b3b3b3;
+  border-width: 1px 1px 0 1px;
+  background-color: #FFFFFF;
+  padding: 0.5em;
+  margin: 0 0.2em;
+  border-radius-topleft: 0.5em;
+  border-radius-topright: 0.5em;
+  -moz-border-radius-topleft: 0.5em;
+  -moz-border-radius-topright: 0.5em;
+  -webkit-border-radius-topleft: 0.5em;
+  -webkit-border-radius-topright: 0.5em;
+  text-decoration: none;
+}
+
+.inactive {
+  background-color: #b3b3b3
+}
+
+#wdts-container {
+  border: solid #b3b3b3 1px;
+  padding: 0.5em;
+  overflow: hidden
+}
+
+#wdts-container label {
+  display: block;
+  padding: 0.3em 0
+}
+
+#wdts-container dd {
+  margin-left: 4em
+}

css/wdts-defaults.css

@@ -1,7 +1,7 @@
 div.transcript {
   border: solid #333 1px;
-  padding: 10px;
+  padding: 0.5em;
-  margin: 10px; 
+  margin: 0.5empx;
   background-color: #e7e7e7
 }
 
@@ -10,14 +10,14 @@ div.transcript div, div.transcript span {
 }
 
 div.transcript > div {
-  margin-bottom: 10px   
+  margin-bottom: 0.5em
 }
 
 div.transcript div.scene-heading {
   text-transform: uppercase;
   text-align: center;
   font-weight: bold; 
-  margin-bottom: 10px
+  margin-bottom: 0.5em
 }
 
 div.transcript div.dialog {
@@ -33,5 +33,5 @@ div.transcript div.dialog span.name {
 }
 
 div.transcript div.dialog span.speech {
-  margin: 10px 20px 0
+  margin: 0.5em 1em 0
 }